Variables
Les variables CSS constituent la source de vérité du design de Site 2026. Chaque couleur, taille, espacement ou rayon est défini une seule fois dans :root, puis consommé par les composants. Cliquez sur n'importe quelle variable pour la copier.
Hiérarchie des tokens
Le système distingue deux niveaux. Les tokens primitifs portent une valeur brute (--primitive-lg: 2rem, --color-grey-100). Les tokens sémantiques leur donnent un rôle (--color-border-default, --spacing-stack-md). Les composants ne consomment que le niveau sémantique : changer un primitif met à jour tout le système.
Couleurs
Toutes les couleurs sont exprimées en OKLCH — luminosité perceptuelle uniforme, idéale pour construire des gammes accessibles. Les palettes sources alimentent les tokens sémantiques ; les composants n'utilisent jamais une couleur source directement.
Tokens sémantiques
Le vocabulaire fonctionnel du site : fond, marque, texte, bordures, icônes et pills.
Palettes sources
Huit gammes primitives, du blanc aux teintes de statut. Cliquez sur une nuance pour copier sa variable.
{{ p.name }}
{{ p.note }}Statuts & système
Disponibilité, avertissement, erreur et boutons de fenêtre macOS.
Marques & applications
Couleurs réservées aux logos, badges et intégrations tierces. Ne jamais les utiliser pour l'interface elle-même.
{{ g.name }}
Typographie
Sept tailles fluides construites avec clamp() : chaque taille interpole entre sa valeur mobile et sa valeur desktop, sans media query. Chaque --font-size-* est appairée à une --line-size-*.
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide.
Tailles
L'échelle de tailles fixe (--size-*) sert aux hauteurs de contrôles et repères géométriques. Les familles fluides dimensionnent médias, vignettes, avatars, icônes, illustrations, animations Lottie et logos.
Échelle de base
Familles fluides
Chaque famille est un clamp() entre borne mobile et borne desktop.
Note d'audit : --nom-de-la-variable >> + indication à renseigner.
Espacements
Onze primitives (0.25rem → 8rem) alimentent trois familles sémantiques décalées d'un niveau : les sections respirent plus (+1), les composants sont au niveau nominal, les stacks sont plus serrés (−1). Une même « taille M » produit donc trois espacements différents selon le contexte.
Primitives — taille réelle
Familles sémantiques — le décalage
Paddings fluides
Bordures & rayons
Épaisseurs
Rayons
Layout & conteneurs
Cinq largeurs de contenu, du flux éditorial (65ch) à la pleine largeur. Les conteneurs structurels — header, main, sections, footer — partagent la référence --layout-content-wide (80rem).
Tokens structurels
Breakpoints
Trois paliers pilotent la hauteur du header sticky ; le repli des cartes horizontales intervient à 430px.
Dark mode readiness
Chaque token sémantique possède son équivalent -dark, prêt pour prefers-color-scheme: dark. Le fond bascule sur Marine Blue 800 et l'accent iconographique passe au vert.