Design tokens

Les tokens sont le contrat entre le design et le code. Un nom stable, une valeur qui peut changer, un rôle documenté. C'est aussi ce qui permet à une IA de générer des interfaces conformes.

Trois couches

Chaque couche ne référence que la couche inférieure. C'est cette discipline qui rend le thème sombre, une nouvelle marque ou une version dense possibles sans réécrire un seul composant.

1. Primitives« quelle valeur ? »

L'inventaire complet des valeurs disponibles. Nommées par leur apparence. Jamais utilisées directement dans un composant.

--char-950: #181615--peach-400: #F2BD98--space-4: 16px
2. Sémantiques« pour quoi faire ? »

Des décisions : quel gris pour le texte secondaire, quelle couleur pour une erreur. Nommées par leur rôle. Redéfinies par thème.

--fg-2: var(--char-250)--accent: var(--peach-400)--danger
3. Composants« où exactement ? »

Les réglages propres à un composant, quand il a besoin de s'écarter du cas général. À utiliser avec retenue.

--btn-radius--card-pad--input-height

Convention de nommage

Un nom de token se lit de gauche à droite, du plus général au plus précis. On nomme le rôle, jamais l'apparence : --danger reste juste si l'erreur devient orange, --red deviendrait faux.

Structure
--[catégorie]-[propriété]-[variante]-[état]

/* exemples */
--fg-2                 /* texte, niveau 2 */
--surface-3            /* surface, niveau 3 */
--btn-height-lg        /* composant bouton, hauteur, grande */
--accent-hover         /* accent, état survol */

Référence

TokenRéférence (sombre)Référence (clair)
--bg--char-950--char-50
--surface--char-900--char-0
--surface-2--char-850--char-100
--line--char-800--char-200
--line-ui--char-450--char-450
--fg-3--char-400--char-500
--accent--peach-400--peach-700
--accent-fg--char-950--char-0
--plum--plum-400--plum-600

Exports

Une seule source, plusieurs formats. Le format JSON suit la structure du Design Tokens Community Group du W3C (DTCG) (clés $value et $type), ce qui le rend lisible par les outils de transformation et par un modèle de langage.

tokens.css
:root {
  --peach-400: #F2BD98;
  --accent: var(--peach-400);
  --radius-lg: 20px;
  --card-radius: var(--radius-lg);
}
:root[data-theme="light"] {
  --accent: var(--peach-700);
}

Atelier : modifier les tokens en direct

Modifiez cinq réglages et observez l'effet sur une carte. Le contrôle de contraste vérifie que le texte reste lisible sur l'accent choisi.

…
Nouveau

Gouvernance IA

Registre des cas d'usage, classification des risques et revue avant mise en production.

Valeurs générées

          

        


        
Faire évoluer un token

        
    
          
  • Changer une valeur d'un token sémantique est une version mineure si le contraste reste conforme.
    • 
          
  • Renommer un token est un changement cassant : l'ancien nom reste disponible en alias pendant une version, avec un avertissement.
    • 
          
  • Ajouter un token composant exige un cas d'usage documenté que les tokens sémantiques ne couvrent pas.
    • 
        

        
Pour aller plus loin : Tokens sémantiques, le contrat qui relie design et code.