Les design tokens sont un contrat, pas une palette

La plupart des fichiers de tokens que j’ouvre ressemblent à un nuancier : quarante gris, une douzaine de bleus et des noms comme grey-650. Ils décrivent ce qui existe, pas la façon de s’en servir. Chaque nouvel écran rouvre donc les mêmes questions.

Aujourd’hui, je traite les tokens comme un contrat. Chacun est une promesse : si vous utilisez ce nom, vous obtenez la bonne valeur sur chaque surface, aujourd’hui comme après la prochaine refonte.

Trois niveaux, un seul sens

La structure qui tient le mieux chez moi compte trois niveaux, et les références ne vont que vers le bas :

• Les primitives portent les valeurs brutes : une gamme de gris, un accent, une échelle typographique.
• Les tokens sémantiques décrivent un rôle : texte, texte secondaire, surface, filet, accent.
• Les tokens de composant n’existent que si un composant a vraiment besoin de sa propre décision.

Un nom décrit une intention, pas une apparence

--ink-muted survit à un changement de palette. --grey-650, non. Dès qu’un nom cite une couleur, le premier changement de palette en fait un mensonge.

/* primitives */
:root {
  --grey-50: #e2e8e5;
  --grey-900: #131816;
  --orange-600: #a8361a;

  /* rôles : les seuls noms utilisés par les composants */
  --bg: var(--grey-50);
  --ink: var(--grey-900);
  --accent: var(--orange-600);
}

/* les composants lisent les rôles, jamais les primitives */
.quote {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--ink);
}

Ce que le contrat vous apporte

Un rebranding devient un nouveau jeu de valeurs primitives, pas un second design. Les revues raccourcissent : la question n’est plus « quel gris ? » mais « quel rôle ? ».

Si une valeur doit être expliquée à chaque utilisation, ce n’est pas encore un token. C’est une décision que personne n’a prise.

Commencez petit : cinq ou six rôles couvrent l’essentiel d’une page. Ajoutez un token quand deux écrans se contredisent, pas avant.