Palette
Trois matières, pas une de plus. Le jaune ne remplit jamais une surface pour décorer — il marque ce qui demande une décision.
Papier
Le fond sur lequel tout se pose.
Papier
#F4F3ED
--c-app
Fond de page
Surface
#FFFFFF
--c-surface
Cartes, panneaux
Panneau
#F9F9F7
--c-panel
En-têtes, zones creuses
Trait
#E4E4DE
--c-line
Bordures, séparateurs
Encre
Le texte, les traits, les ombres.
Encre
#0B0C09
--c-text
Texte principal, ombres
Encre 90
#16160F
—
Surface sombre
Encre 80
#26261F
—
Panneau sombre
Gris
#707168
--c-muted
Texte secondaire
Signal
Ce qui compte, et rien d’autre.
Jaune
#FFD20A
--c-accent
Signal, accent, focus
Jaune clair
#FFDF4D
—
Survol
Jaune pâle
#FFF9DB
--c-accent-soft
Fond d’accent
Or
#8A6D00
--c-accent2
Texte sur jaune pâle
Règle d’emploi. Si le jaune apparaît plus de trois fois dans un même écran, c’est qu’il ne signale plus rien. Retirez-en deux.
Typographie
Geist porte la voix éditoriale, IBM Plex Mono porte les données. Un chiffre n’est jamais en Geist : il doit s’aligner en colonne.
Éditorial — Geist
Votre consommation a baissé de 12 % ce mois-ci.
Données — IBM Plex Mono
Les trois gestes
Ce sont eux qui rendent l’interface reconnaissable sans logo. Chacun a un rôle précis et un seul.
Le geste se pose sous la ligne de base, comme un trait de feutre passé sur un mot précis.
Réservé au mot porteur de sens. Jamais sur une phrase entière.
Aucun flou, jamais. L’objet est posé sur la page, il projette une ombre nette.
Tout est carré. Seules les pastilles d’identité et les puces restent rondes.
Élévation
Il n’y a pas dix niveaux de profondeur. Il y en a trois : posé, relevé, flottant.
border seul
La règle par défaut. La bordure suffit à délimiter.
3px 3px 0
Ce qui appelle une action : bouton, champ actif.
6px 6px 0
Ce qui sort du flux : modale, KPI majeur.
Grille & densité
Un espace client est un outil de travail : la densité est une qualité, pas un défaut. L’unité de base est 4 px.
Le bloc dominant occupe deux tiers. Les indicateurs se rangent sur une bande.
Mouvement
L’animation confirme une action ou installe une hiérarchie d’arrivée. Elle ne fait jamais patienter.
Le bouton se soulève au survol, s’enfonce au clic.
Tout le mouvement se coupe sous prefers-reduced-motion.
Jetons
Les variables CSS pilotent les deux thèmes. Changer une valeur ici change toute l’application.
| Jeton | Clair | Sombre | Rôle |
|---|---|---|---|
| --c-app | #F4F3ED | #0B0C09 | Fond de page |
| --c-surface | #FFFFFF | #16160F | Surface de carte |
| --c-panel | #F9F9F7 | #26261F | Zone creuse |
| --c-line | #E4E4DE | #3A3A35 | Bordure |
| --c-text | #0B0C09 | #F4F3ED | Texte principal |
| --c-muted | #707168 | #A8A8A0 | Texte secondaire |
| --c-accent | #FFD20A | #FFD20A | Signal |
| --c-on-accent | #0B0C09 | #0B0C09 | Texte sur signal |