Design System
Les fondations visuelles du projet. Tout ce qui suit est lu depuis src/styles/tokens.css et src/styles/motion.css : la page ne redéclare aucune valeur, elle affiche celles qui sont réellement appliquées.
Couleurs
Chaque paire texte/surface a été passée au détecteur Impeccable avant d'entrer dans les tokens. Trois candidates ont été rejetées pour échec WCAG AA et remplacées : le vermillon de marque à 4,0:1 sur le papier, le blanc sur ce même vermillon à 4,2:1, et l'orange d'avertissement à 4,3:1.
Surfaces
--paper
Fond de page
--surface
Carte en relief
--surface-2
Zone encastrée, en-tête de tableau
--rule
Filet, bordure de champ
Encre
--ink
Texte principal
--ink-secondary
Texte secondaire, chapô
--ink-muted
Légende, métadonnée
Signal
--signal
Vermillon de marque — graphique et grand texte
--signal-aa
Variante AA — texte courant, aplat sous du blanc
États
--success
Confirmation
--warning
Avertissement
--error
Erreur, destruction
--info
Information neutre
Typographie
Display — Archivo
Titres et chiffres
Corps — IBM Plex Sans
La mesure d'un paragraphe est plafonnée à 68 caractères par le token --content-max. Au-delà, l'œil perd la ligne en revenant à la gauche du bloc. Ni Inter, ni Geist : deux polices que tout le secteur emploie, et dont la neutralité ne dit plus rien.
Mono — IBM Plex Mono
--signal-aa: #be2f16; /* 4.7:1 sur --paper */
Espacements
| Token | Valeur | Usage |
|---|---|---|
| --space-1 | 4px | Écart entre icône et label |
| --space-2 | 8px | Padding minimal d'un conteneur bordé |
| --space-3 | 12px | Padding de cellule de tableau |
| --space-4 | 16px | Gouttière mobile |
| --space-6 | 24px | Padding de carte, gouttière tablette |
| --space-8 | 32px | Écart entre blocs d'une même section |
| --space-12 | 48px | Padding de carte large |
| --space-16 | 64px | Respiration verticale de section, mobile |
| --space-24 | 96px | Respiration verticale de section, desktop |
| --space-32 | 128px | Séparation de chapitre |
Rayons et élévation
| Token | Valeur | Usage |
|---|---|---|
| --radius-none | 0px | Filets, tableaux, aplats pleine largeur |
| --radius (sm/md/lg) | 0.15 / 0.2 / 0.25rem | Boutons, champs, cartes |
| --radius-full | 9999px | Pastilles d'état, avatars uniquement |
--shadow-sm
L'élévation se mérite. Par défaut, un filet suffit.
--shadow-md
L'élévation se mérite. Par défaut, un filet suffit.
--shadow-lg
L'élévation se mérite. Par défaut, un filet suffit.
Grille
| Token | Valeur | Usage |
|---|---|---|
| --container-page | 1440px | Largeur maximale de page |
| --content-max | 68ch | Mesure d'un paragraphe (§3.1 E) |
| --gutter | 24px | Gouttière de grille |
| --columns | 12 | Colonnes de la grille de composition |
Motion
Sous prefers-reduced-motion: reduce, toutes les durées tombent à 0,01 ms et toutes les distances à 0 px, en un seul endroit. Aucun composant n'a à s'en occuper, et rien ne reste bloqué à mi-transition.
| Token | Valeur | Usage |
|---|---|---|
| --duration-instant | 90ms | Changement d'état d'un contrôle |
| --duration-fast | 160ms | Survol, focus |
| --duration-base | 240ms | Apparition, ouverture d'overlay |
| --duration-slow | 420ms | Transition de layout |
| --duration-slower | 700ms | Séquence orchestrée |
| --ease-out | cubic-bezier(0.22, 1, 0.36, 1) | Entrées |
| --ease-in | cubic-bezier(0.64, 0, 0.78, 0) | Sorties |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Transformations |
| --stagger-base | 70ms | Décalage entre éléments d'une liste |
| --travel-md | 16px | Distance de déplacement par défaut |
Contrôles et états
Boutons
Champs
Format d'adresse non reconnu.