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-*.
Espacements de lettres
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
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
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
Familles fluides
Chaque famille est un clamp() entre borne mobile et borne desktop.
Note d'audit : --nom-de-la-variable >> + indication à renseigner.
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
Espacements
Onze primitives (4px -0.25rem- → 128px -8rem-) alimentent trois familles sémantiques qui partagent les mêmes noms d'étape (XL, L, M…) mais ne pointent pas vers la même taille primitive : les sections empruntent le palier immédiatement supérieur (niveau +1, elles respirent plus), les composants pointent directement sur le palier de même nom (nominal), les stacks empruntent le palier immédiatement inférieur (niveau −1, plus serrés). Une même « taille M » produit donc trois espacements différents selon le contexte.
Primitives — taille réelle
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
Familles sémantiques
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
Paddings fluides
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
Boutons
Padding interne des boutons — 3 variantes croisant présence ou non d'une icône. La variante avec icône a un padding horizontal asymétrique (gauche > droit) pour compenser l'espace visuel de l'icône.
Bordures & rayons
Épaisseurs
Rayons
Les valeurs affichées à gauche correspondent aux bornes du clamp() — minimum mobile → maximum desktop. Redimensionnez la fenêtre pour voir l'interpolation fluide. Les valeurs en px sont fournies à titre indicatif. Les valeurs réelles, en rem, sont celles référencées dans le fichier variables.txt.
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
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.