Fondations
Les décisions de base dont tout le reste découle. Chaque valeur a une raison d'être, écrite ici, pour qu'on puisse la défendre ou la changer en connaissance de cause.
Couleur
La palette suit une ambiance chaude et feutrée : un anthracite brun, le charbon, décliné en 15 niveaux, un accent pêche pour les actions et une couleur secondaire prune, utilisée avec parcimonie pour les points d'attention. Les visuels mêlent prune, pêche, lavande, sauge et rose. Les couleurs de statut (succès, avertissement, erreur) sont séparées de l'accent : elles signalent un état et ne décorent jamais.
Primitives
Valeurs brutes. Elles ne sont jamais utilisées directement dans un composant.
Tokens sémantiques
Ce sont eux que les composants consomment. La page calcule en direct le contraste sur le fond --bg du thème affiché : basculez le thème pour vérifier l'autre.
| Token | Rôle | Sombre | Clair | Contraste (thème actif) |
|---|
À faire
- Utiliser
--fg-2pour le texte secondaire, jamais une opacité sur--fg. - Réserver l'accent aux actions principales et aux éléments actifs.
- Doubler toute information portée par la couleur d'un texte ou d'une icône.
À éviter
- Écrire une valeur hexadécimale dans un composant.
- Utiliser la prune comme deuxième accent décoratif.
- Placer
--fg-3sur--surface-3: en thème clair, le contraste tombe à 4,3 :1.
Typographie
Trois familles, chacune avec un rôle précis. Bricolage Grotesque porte les titres : ses axes de largeur et de taille optique lui donnent du caractère dans les grands corps. Geist assure la lecture courante. Geist Mono marque tout ce qui est technique : tokens, valeurs, étiquettes.
Aa Gg 42
Bricolage Grotesque · 200–800 · titres et chiffres clés
Aa Gg 42
Geist · 300–700 · paragraphes, interface
Aa Gg 42
Geist Mono · 400–600 · code, tokens, étiquettes
Échelle
Échelle fluide d'un rapport proche de 1,25 : les grands corps se réduisent sur mobile, les petits restent fixes pour garantir la lisibilité.
Espacement
Base de 4 px, douze paliers. Les petits paliers règlent l'intérieur des composants, les grands rythment les sections. On espace avec gap dans des grilles et des flex, pas avec des marges isolées.
Grille et points de rupture
Conteneur de 1240 px maximum, gouttière latérale fluide de 16 à 40 px. Les mises en page passent à une colonne sous 640 px.
| Nom | Largeur min. | Usage |
|---|---|---|
sm | 640 px | Formulaires sur deux colonnes |
md | 760 px | Grilles de cartes à deux colonnes |
lg | 900 px | Mises en page en deux zones, bento |
xl | 1080 px | Barre latérale de documentation |
2xl | 1180 px | Navigation principale complète |
Rayons
Plus un objet est grand, plus son rayon l'est. Les éléments imbriqués ont un rayon inférieur à leur conteneur, réduit de la marge intérieure.
Élévation
Trois niveaux d'ombre seulement. En thème sombre, l'élévation passe surtout par la surface, plus claire à mesure qu'on monte : une ombre noire se voit mal sur un fond noir.
Mouvement
Le mouvement explique un changement : d'où vient un élément, où il va, ce qui a réagi. Les sorties sont plus rapides que les entrées. Le système neutralise tout quand l'utilisateur demande moins d'animations.
| Token | Valeur | Usage |
|---|---|---|
--dur-1 | 120 ms | Retour de survol, pression |
--dur-2 | 200 ms | Changement de couleur, sortie d'un toast |
--dur-3 | 320 ms | Ouverture de menu, onglet actif |
--dur-4 | 560 ms | Apparition de section |
--dur-5 | 900 ms | Ouverture de page, une seule fois |
Iconographie
Icônes au trait de 2 px, sur une grille de 24, extrémités arrondies. Une icône seule porte toujours un nom accessible ; une icône à côté d'un texte est décorative et masquée aux lecteurs d'écran. Jamais d'emoji en guise d'icône.
Voix et ton
Les mots font partie de l'interface. Ils suivent les mêmes exigences de cohérence que les couleurs.
Clair
Phrases courtes, un mot pour une idée, le vocabulaire de l'utilisateur plutôt que celui du système.
Actif
Les boutons disent ce qui va se passer : « Enregistrer le brouillon », pas « Valider ».
Utile
Un message d'erreur dit ce qui s'est passé et comment corriger, sans excuse ni jargon.
Respectueux
Vouvoiement, pas d'humour sur les erreurs, pas de culpabilisation.
À faire
- « Ce numéro doit contenir 10 chiffres. »
- « Supprimer le projet »
- « Aucun résultat pour “tokens”. Vérifiez l'orthographe ou élargissez les filtres. »
À éviter
- « Erreur 422 : champ invalide. »
- « OK »
- « Oups ! Rien ici… »