Typographie

L'echelle typographique et les jetons de poids utilises sur la boutique.

Familles de polices

Deux slots de polices sémantiques pilotent le design system : PRIMARY (Inter) pour les titres, en-têtes et contrôles UI ; SECONDARY (Space Grotesk) pour le corps de texte, descriptions et paragraphes. Les deux sont auto-hébergées au build via next/font/google (zéro CDN, display:swap, pas de FOUT). Pour échanger une police globalement, modifier la var CSS dans packages/design-system/globals.css. JetBrains Mono reste disponible via font-text-code pour le contenu technique (chips de code, numériques tabulaires) mais ce n'est pas un slot de marque.

Primary : Inter (titres)

Le vif renard brun

Saute par-dessus le chien paresseux.

Secondary : Space Grotesk (corps)

Le vif renard brun

Saute par-dessus le chien paresseux.

Chargement

Les polices sont bundlées au build par Next.js — aucune requête vers le CDN Google Fonts, conforme RGPD. Si l'environnement de build n'a pas d'accès réseau, les polices retombent silencieusement sur la famille système suivante dans la chaîne du jeton.

Échelle typographique

ep-xs

Très petit — Le vif renard brun

0.75rem / 1rem

ep-sm

Petit — Le vif renard brun

0.875rem / 1.25rem

ep-base

Base — Le vif renard brun

1rem / 1.5rem

ep-lg

Grand — Le vif renard brun

1.125rem / 1.75rem

ep-xl

Très grand — Le vif renard brun

1.25rem / 1.75rem

ep-2xl

Titre 2XL — Le vif renard brun

1.5rem / 2rem

ep-3xl

Titre 3XL — Le vif renard brun

1.875rem / 2.25rem

ep-4xl

Titre 4XL — Le vif renard brun

2.25rem / 2.5rem

Graisses de police

Ce sont les utilitaires font-weight standard de Tailwind — le design system n'enregistre pas de graisses personnalisées. Politique des titres (ADR-030, Q3) : l'atome Heading vaut font-bold (700) par défaut pour h1–h4 et font-semibold (600) pour h5–h6 ; les moments display héroïques passent en font-extrabold (800).

font-400

Régulière — ePassLive

font-500

Moyenne — ePassLive

font-600

Semi-grasse — ePassLive

font-700

Grasse — ePassLive

font-800

Extra-grasse — ePassLive

Hauteurs de ligne

Ce sont les utilitaires line-height par défaut de Tailwind. Le design system ne les étend pas — utilisez ces valeurs standard pour la cohérence.

leading-none

1 — Le vif renard brun

leading-tight

1.25 — Le vif renard brun

1.25

leading-snug

1.375 — Le vif renard brun

1.375

leading-normal

1.5 — Le vif renard brun

1.5

leading-relaxed

1.625 — Le vif renard brun

1.625

leading-loose

2 — Le vif renard brun

Espacement des lettres

Ce sont les utilitaires letter-spacing standard de Tailwind — le design system n'enregistre pas de tracking personnalisé. Convention (ADR-030 §C) : les micro-libellés en majuscules utilisent tracking-wider (0.05em) pour garder les ajonctions ouvertes ; les grands titres utilisent tracking-tight.

tracking-tighter

-0.05em — Le vif renard brun

-0.05em

tracking-tight

-0.025em — Le vif renard brun

-0.025em

tracking-normal

0em — Le vif renard brun

0em

tracking-wide

0.025em — Le vif renard brun

0.025em

tracking-wider

0.05em — Le vif renard brun

0.05em

Rôles d'usage des slots

L'ADR-030 et son addendum assignent un rôle à chaque surface textuelle. Les noms de slots décrivent le rôle, pas la police — échanger une famille se fait en changeant une var CSS, sans toucher au markup.

PRIMARYTitres & headings (h1–h6, display)Inter

SECONDARYCorps & paragraphes (descriptions, prose ≥14px)Space Grotesk

PRIMARY + tabular-numsData Anchor — prix, dates, quantitésInter

CODECode — codes, IDs, OTP, codes promoJetBrains Mono

PRIMARYMicro-copy — captions, overlines, infobulles (<14px)Inter

Exemple Data Anchor

34,99 $1 240,50 $0 $79,50 $

Inter + tabular-nums : les chiffres sont à chasse fixe, les colonnes restent alignées quand les montants changent — l'esthétique boarding-pass.