Archetypes v2

Les 12 archetypes du moteur v2 sont des ancres : chacun packs une palette OKLCH, une typo, une layout, des ornaments, une motion, et un set de primitives par défaut. Le LLM choisit un archetype puis customise 2-3 fields. Force-le explicitement avec force_archetype pour les tester systématiquement.

Concept

Sans archetype, le LLM converge vers des designs safe (linear_minimal 60 % du temps, wellness 25 %). Les archetypes forcent la diversité : chacun a une identité structurelle (l'ordre des sections, pas juste la couleur).

Chaque archetype définit :

• Palette — 6 couleurs OKLCH (background, surface, text_primary, text_secondary, accent_primary, accent_secondary) + danger/success.
• Typographie — display_font, body_font, taille (modest/bold/massive), case (normal/upper/small_caps), letter_spacing, body_size.
• Layout — max_width (narrow_680 / medium_900 / wide_1200 / full_bleed), vertical_rhythm (tight/comfortable/airy/cinematic), hero_layout, section_separator.
• Decorative system — corner_radius, shadow_language, ornaments[], image_treatment.
• Motion — cta_hover, scroll_behavior.
• Primitive selection — hero, social_proof, objections, urgency, guarantee, pricing, footer.
• Section order — la séquence des sections produites par le renderer (voir ai-landing-renderer-v2.js:336).

Source code : ai-landing-dna.js:164 (ARCHETYPES) et ai-landing-renderer-v2.js:336 (ARCHETYPE_SECTION_ORDERS).

Comment forcer un archetype

{
  "name": "generate_ai_landing",
  "arguments": {
    "description": "...",
    "engine": "v2",
    "force_archetype": "luxury"
  }
}

Sans force_archetype, le LLM utilise recommendArchetypeForVertical(vertical) comme prior :

Les 12 archetypes en détail

1. linear_minimal

Quand l'utiliser : SaaS B2B, productivité, dev tools, fintech moderne. Quand tu veux que la landing ne crie pas et que le copy parle seul.

• Palette : blanc cassé (oklch(98% 0.005 240)), violet doux (oklch(60% 0.18 270)).
• Typo : Inter en display ET body, taille modest, letter-spacing tight, body comfortable.
• Layout : wide_1200, vertical_rhythm airy, hero split-left, separator hairline.
• Ornaments : hairlines (1px borders, geometric grid).
• Image treatment : rounded.
• Motion : subtle_lift au hover.
• Primitives : split_image hero, logo_strip social, faq_accordion objections, badge guarantee, single_box pricing.
• Section order : hero → problem → solution → social_proof → comparison → objections → pricing → guarantee → faq → final_cta → footer (séquence complète).

2. brutalist

Quand l'utiliser : produit punk-design, agence créative, brand challenger. Quand tu veux que ça secoue.

• Palette : crème (oklch(96% 0.005 80)), rouge cinabre puissant (oklch(60% 0.25 25)).
• Typo : Anton display en MASSIVE UPPERCASE, body Inter.
• Layout : full_bleed, rythme tight, hero text_only_giant, separator thick_rule.
• Ornaments : numbers (big "01" "02" "03"), hairlines.
• Corner radius : sharp_0 (aucun arrondi).
• Shadow : hard_offset (6px noir).
• Motion : bold_scale au hover.
• Primitives : centered_text hero, metric_blocks social, side_by_side objections, banner urgency, bold_text guarantee, anchored_strikethrough pricing.
• Section order : urgency_top → hero → social_proof → problem → solution → pricing → guarantee → final_cta → footer (pas de objections/FAQ — pas de hand-holding).

Exemple : landing #46 live sur Trackily.

3. editorial

Quand l'utiliser : long-form advertorial, content marketing, dating, lifestyle. Quand le copy fait le travail et l'esthétique imite un magazine print.

• Palette : crème chaud (oklch(97% 0.02 80)), brique (oklch(40% 0.15 25)).
• Typo : Fraunces display (serif moderne), Source Serif Pro body, taille bold, body generous.
• Layout : medium_900 (colonnes lisibles), rythme cinematic, hero full_bleed_image, separator ornament.
• Ornaments : dividers (✦ ❦ entre sections).
• Image treatment : framed (cadre photo épais).
• Motion : subtle_lift.
• Primitives : centered_text hero, quote_cards social, faq_accordion objections, embedded_inline urgency, testimonial_quote guarantee, single_box pricing.
• Section order : hero → problem → solution → social_proof → objections → guarantee → pricing → faq → final_cta → footer (pas de comparison/urgency — magazine voice).

Exemple : landing #47 live.

4. dark_tech

Quand l'utiliser : crypto, antivirus, VPN, AI/ML tools, dev tools premium. Quand l'audience veut du sérieux technique.

• Palette : noir bleuté (oklch(15% 0.02 270)), cyan accent (oklch(75% 0.20 195)), magenta secondaire.
• Typo : JetBrains Mono display (vrai monospace dev), Inter body, taille bold, letter-spacing tight, body compact.
• Layout : wide_1200, rythme comfortable, hero centered, separator hairline.
• Ornaments : monospace_tags (// SECTION_01), scanlines (CRT-style).
• Shadow : glow_accent (halo cyan autour des cards).
• Motion : glow_pulse au hover.
• Primitives : centered_text hero, metric_blocks social, side_by_side objections, scarcity_count urgency, badge guarantee, tiered_cards pricing.
• Section order : hero → problem → social_proof → solution → comparison → objections → pricing → urgency_inline → guarantee → final_cta → footer.

5. wellness

Quand l'utiliser : compléments, meditation, sommeil, skincare, beauté natural. Quand le ton doit être doux, anti-pressure, rassurant.

• Palette : crème rosé (oklch(97% 0.025 30)), vert sage (oklch(70% 0.12 145)), pêche doux.
• Typo : Crimson Pro display (serif tendre), Inter body, body generous.
• Layout : medium_900, rythme airy, hero centered, separator nothing (pas de barres).
• Ornaments : blobs (formes organiques flottantes).
• Corner radius : organic_blob.
• Image treatment : rounded.
• Primitives : centered_text hero, quote_cards social, faq_accordion objections, embedded_inline urgency, seal guarantee, single_box pricing.
• Section order : hero → problem → solution → social_proof → guarantee → pricing → faq → final_cta → footer (pas de comparison, pas d'urgency banner — anti-pressure).
• LOCK : urgency ne peut JAMAIS devenir scarcity_count ou countdown même en cold traffic (le smart picker respecte la philosophie de marque).

6. tabloid

Quand l'utiliser : sweepstakes, giveaway, gift card prize, viral content. Quand tu veux du SCANDALEUX qui convertit en cold push traffic.

• Palette : blanc pur (oklch(100% 0 0)), jaune fluo surface, rouge sang accent.
• Typo : Anton display en UPPERCASE MASSIVE, IBM Plex Sans body.
• Layout : wide_1200, rythme tight, hero text_only_giant, separator thick_rule.
• Ornaments : highlight_strips (rectangles jaunes sous les titres), numbers.
• Corner radius : sharp_0.
• Shadow : hard_offset.
• Motion : bold_scale.
• Primitives : centered_text hero, star_grid social, side_by_side objections, countdown urgency, bold_text guarantee, anchored_strikethrough pricing.
• Section order : urgency_top → hero → social_proof → problem → solution → pricing → urgency_inline → final_cta → footer (pas d'objections / FAQ — kill momentum).
• LOCK : urgency reste banner ou countdown. hero reste text_only_giant.

7. luxury

Quand l'utiliser : montres haut-de-gamme, bijoux, parfumerie de niche, produits ultra-premium. Quand le prix N'EST PAS un sujet et le sérieux du brand IS the offer.

• Palette : NOIR profond (oklch(8% 0 0)), or chaud (oklch(75% 0.13 85)).
• Typo : Cormorant Garamond display en UPPERCASE WIDE, Cardo body, taille massive, body generous.
• Layout : medium_900, rythme cinematic, hero centered, separator ornament.
• Ornaments : gold_lines (rules dorées), dividers.
• Corner radius : sharp_0.
• Shadow : none (sobriété).
• Image treatment : full_bleed.
• Primitives : centered_text hero, quote_cards social, faq_accordion objections, none urgency, seal guarantee, hidden_until_cta pricing.
• Section order : hero → solution → social_proof → guarantee → pricing → final_cta → footer (PAS de problem/comparison/objections/faq/urgency — le luxe vend l'aspiration, pas la pain-relief).
• LOCKS : urgency, pricing, guarantee, footer — l'idiom luxe est restrained, le smart picker n'écrase rien.

Exemple : landing live possibly à venir.

8. indie

Quand l'utiliser : cours en ligne d'un créateur, infopreneur, Substack-style, personal brand. Quand le lecteur vient pour TOI, pas pour l'offre.

• Palette : crème chaud (oklch(97% 0.015 80)), violet doux accent, jaune secondaire.
• Typo : Lora display (serif personnel), Charter body, taille modest, body generous.
• Layout : narrow_680 (colonne lecture), rythme comfortable, hero centered, separator nothing.
• Corner radius : rounded_12.
• Ornaments : highlight_strips.
• Image treatment : rounded.
• Primitives : centered_text hero, quote_cards social, mythbusters objections (voix conversationnelle), none urgency, testimonial_quote guarantee, single_box pricing, brand_repeat footer (signature créateur).
• Section order : hero → problem → solution → social_proof → objections → guarantee → pricing → faq → final_cta → footer.
• LOCKS : urgency, social_proof, footer. Pas de manufactured urgency — le créateur n'en a pas besoin.

9. scientific

Quand l'utiliser : insurance, debt relief, medicare, supplements clinical, finance B2C sérieuse. Quand l'audience cherche de la preuve.

• Palette : blanc clinique (oklch(99% 0.005 240)), bleu navy (oklch(45% 0.18 250)), cyan secondaire.
• Typo : IBM Plex Mono display (data-feel), IBM Plex Sans body, taille modest, body comfortable.
• Layout : medium_900, rythme comfortable, hero split-left, separator hairline.
• Ornaments : chart_svgs (mockups data viz), hairlines.
• Image treatment : raw.
• Primitives : split_image hero, metric_blocks social, faq_accordion objections, embedded_inline urgency, badge guarantee, single_box pricing, full_sitemap footer.
• Section order : hero → problem → solution → comparison → social_proof → objections → guarantee → faq → pricing → final_cta → footer (comparison + FAQ élevés).
• LOCK : social_proof = metric_blocks (la signature du brand).

Exemple : landing #49 live.

10. y2k

Quand l'utiliser : produits fun, jeunesse, gen-z, music app, social app. Quand l'ambiance veut être playful et chromée Y2K.

• Palette : blanc bleuté pâle, surface lavande (oklch(95% 0.05 240)), bleu iridescent, magenta secondaire.
• Typo : Quicksand display (sans-serif rond), Nunito body, taille bold.
• Layout : wide_1200, rythme comfortable, hero centered, separator gradient_band.
• Corner radius : pill_24 (très arrondi).
• Ornaments : gradient_mesh (conic blobs).
• Shadow : glow_accent.
• Motion : bold_scale.
• Primitives : centered_text hero, star_grid social, mythbusters objections, banner urgency, badge guarantee, tiered_cards pricing.
• Section order : urgency_top → hero → solution → social_proof → pricing → final_cta → footer (juste 5 sections — y2k = rapide, fun, pas d'agitation problem).
• LOCKS : hero reste centered_text, urgency reste banner.

Exemple : landing #48 live.

11. retro

Quand l'utiliser : food artisanal, café indé, cocktails, vinyles, brand vintage. Quand le ton veut être chaleureux et un peu nostalgique.

• Palette : crème jaune (oklch(94% 0.04 85)), orange terracotta (oklch(60% 0.18 50)), vert olive secondaire.
• Typo : DM Serif Display display, Cardo body, taille bold, body generous.
• Layout : medium_900, rythme cinematic, hero split-left, separator ornament.
• Corner radius : organic_blob.
• Ornaments : grain (texture noise SVG), dividers.
• Shadow : soft_drop.
• Image treatment : framed.
• Primitives : split_image hero, quote_cards social, faq_accordion objections, embedded_inline urgency, seal guarantee, single_box pricing, brand_repeat footer.
• Section order : hero → solution → social_proof → problem → guarantee → pricing → faq → final_cta → footer.
• LOCK : hero reste split_image (avec image cadré-photo).

Exemple : landing #50 live.

12. glassmorphism

Quand l'utiliser : SaaS premium moderne, fintech, AI tools haut-de-gamme. Quand tu veux le look "macOS Big Sur" avec frosted glass.

• Palette : navy profond (oklch(20% 0.05 280)), surface translucide claire, magenta/cyan iridescent.
• Typo : Geist display (Vercel font), Inter body, taille bold, letter-spacing tight.
• Layout : wide_1200, rythme airy, hero centered, separator nothing.
• Corner radius : rounded_12.
• Ornaments : gradient_mesh, glass_blur (backdrop-filter cards).
• Shadow : soft_drop.
• Image treatment : rounded.
• Primitives : centered_text hero, quote_cards social, faq_accordion objections, embedded_inline urgency, badge guarantee, tiered_cards pricing.
• Section order : hero → solution → social_proof → comparison → pricing → objections → guarantee → final_cta → footer.

Exemple : landing #51 live.

Smart picker — quand l'archetype défault est override

Le smartPickPrimitives (ai-landing-dna.js:702) compose des overrides selon :

Traffic temperature

Volume de testimonials

• testimonials.length >= 5 → social_proof: star_grid (sauf editorial/indie/luxury locked sur quote_cards).
• testimonials.length >= 7 AND cold → hero: testimonial_above_fold (sauf wellness/luxury).

Volume de comparison_items

• comparison_items.length >= 4 → hero: comparison_above_fold (sauf luxury/wellness/y2k/editorial).

Tableau récapitulatif des LOCKS

wellness      → urgency
luxury        → urgency, pricing, guarantee, footer
editorial     → urgency, social_proof
indie         → urgency, social_proof, footer
tabloid       → urgency, hero
brutalist     → hero
scientific    → social_proof
y2k           → hero, urgency
retro         → hero
glassmorphism → (none)
dark_tech     → (none)
linear_minimal→ (none)

Un field locked ne sera JAMAIS modifié par le smart picker, peu importe la temperature ou le volume de copy.

Exemples — forcer chaque archetype

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"linear_minimal"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"brutalist"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"editorial"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"dark_tech"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"wellness"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"tabloid"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"luxury"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"indie"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"scientific"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"y2k"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"retro"}}

{"name":"generate_ai_landing","arguments":{"description":"...","engine":"v2","force_archetype":"glassmorphism"}}

Erreurs courantes

• Force un archetype incompatible : forcer tabloid sur un produit luxe = visuellement absurde. Le LLM produit le HTML mais le brand fit est cassé.
• Compter sur le smart picker contre un lock : tu veux du scarcity_count sur wellness, ça ne marchera jamais. Les locks sont par design.
• Ignorer la section order : luxury ne produit PAS de FAQ/problem/comparison — pas un bug, c'est l'identité. Si tu veux ces sections, change d'archetype.
• v1 + force_archetype : ignoré silencieusement.

Voir aussi

• AI Builder — le wrapping autour
• Primitives — les pièces assemblées par chaque archetype
• Image providers — quel provider pour quel archetype
• Code source : ai-landing-dna.js:164 (ARCHETYPES), ai-landing-renderer-v2.js:336 (ARCHETYPE_SECTION_ORDERS)