1.1 · Palette couleurs (11 tokens)

1.2 · Typographie

3 stacks canoniques + échelle V6 éditoriale + scale enrichie.

Échelle V6 éditoriale (7 niveaux)

Échelle enrichie (eyebrow / lede / pull-quote / drop-cap / caption)

1.3 · Spacing scale (8pt · 17 tokens)

+ section rhythm : --section-tight 48px · --section-base 96px · --section-loose 160px · --section-grand 256px

1.4 · Shadows éditoriaux (5 tokens)

1.5 · Motion (3 easings + 7 durations)

• --dur-instant 0ms
• --dur-snap 120ms
• --dur-fast 200ms
• --dur-base 400ms
• --dur-slow 800ms
• --dur-deliberate 1200ms
• --dur-cinematic 1800ms

1.6 · Z-index scale (6 niveaux)

• --z-base 1
• --z-sticky 10
• --z-overlay 100
• --z-modal 1000
• --z-toast 2000
• --z-cursor 9999

1.7 · Layout & containers

• --wrap 1440px · max-width standard
• --wrap-wide 1560px · max-width étendu (sections)
• --wrap-tight 1120px · prose article
• --gut 32px (responsive : 20px ≤ 900px · 16px ≤ 600px)
• --header-height 72px · clearance sticky obligatoire pour heros

2.1 · Layout containers (3 classes)

2.2 · Buttons (9 classes — préférer Button.astro atom)

Les classes .btn-* survivent pour legacy. Pour nouveau code : <Button variant="primary" />.

2.3 · Reveal animations (5 patterns)

• .blur-in · entrance avec flou progressif
• .clip-up · clip-path révèle bas→haut
• .reveal-fade · fade simple
• .reveal-up · translate-y + fade
• .scale-in · scale 0.95 → 1 + fade

Toutes les classes ajoutent state .in via IntersectionObserver (cf src/lib/animations/scroll-reveal.ts).

2.4 · Hairlines (3 classes)

Kicker · 3 tones

ChapterLabel

Button · 4 variants

Form elements (raw HTML · tokens DS)

PillCTA

TerminalCTA

Bi · bilingue (FR/EN)

Mode props : Bonjour

Mode slots : Construire du revenue.

Atomes non-démo (4)

• CursorDot · cursor custom injecté par Base.astro
• ProgressBar · scroll progress bar top
• ScrollProgress · progression scroll étendue
• SectionTransition · phrase éditoriale entre sections (cf home)

SectionHeader (legacy .sec-hd)

StatRow

TechPillRow

RelatedCards (3 cards · pattern fin de page)

NewsletterSignup · variant card + inline

PainPointInline · 2 exemples de severity

ShareButtons

Molecules non-démo (23)

Voir src/components/ui/molecules/ pour : AsymmetricServiceRow, AuthorByline, AuthorCard, Breadcrumb, CalEmbed, EditorialCaseCard, EditorialWriteRow, FitColumns, MastheadRow, MetricStrip, PagePill, PricingTier, ProcessSteps, ProofBand, RelatedByCluster, ServiceCatalogRow, TableOfContents, TagPills, TaxonomyMenu, TerminalMockup, TerminalTable, TunnelNav.

Pattern d'usage

<SectionsRenderer
  sections={[
    { type: 'hero-split', h1_fr: '...', cta_primary: {...} },
    { type: 'proof-bar', metrics: [...] },
    { type: 'method-timeline', steps: [...] },
    { type: 'cta-final', h2_fr: '...' },
  ]}
  lang="fr"
/>

19 sections disponibles

• HeroSplit · hero avec right-block (mini-map, workflow, stats)
• HeroCentered · hero centré + CTA stack
• HeroFullBleed · hero full-width edge-to-edge
• ProofBarSection · 4-6 métriques en grille
• StatBlock · stats riches avec h2 + lede
• SocialProof · logos marquee ou grid (full-bleed)
• MethodTimeline · timeline horizontale numérotée
• FeatureGrid · 3-8 features en grid (2/3/4 cols)
• ComparisonTable · comparatif features × tiers
• TimelineBlock · timeline narrative avec dates
• MediaBlock · image/video/svg/embed avec caption
• PricingTable · 1-5 tiers tarifaires
• FaqAccordion · FAQ avec details/summary
• ObjectionHandler · objection/réponse en table
• CtaFinal · CTA fin de page (bg ink/accent/paper)
• CtaBandSection · band horizontal full-bleed
• CtaInline · CTA discret en milieu de page
• TestimonialBlock · témoignages (carousel/grid/rows)
• GuaranteeBlock · garanties numérotées

Preview live : /test-composable (5 sections inline pour démo end-to-end)

Showcase live · 6 sections les plus utilisées

Démos avec mock data. Pattern d'usage in-page.

MediaBlock · type "media-block" (svg)

Reveal classes

Magnetic hover