Design tokens : une source unique pour la couleur et la typo

Les design tokens sont des valeurs nommées pour chaque décision de design qu’une marque répète : couleurs, polices, tailles de texte, espacements, arrondis, ombres et durées d’animation. Au lieu de taper #5b21b6 dans une feuille de style, un fichier Figma et une application iOS, vous définissez color.brand.700 une fois, dans un seul fichier, et vous générez à partir de lui le format de chaque plateforme. Modifiez le token et tous les produits se mettent à jour ensemble. Cette source unique de vérité, c’est tout l’intérêt.

À quoi ressemble un design token

Un token a un nom, une valeur et un type. Le format publié par le W3C Design Tokens Community Group les écrit en JSON, avec des propriétés qui commencent par un signe dollar pour ne jamais entrer en conflit avec les noms de groupes.

{
  "color": {
    "violet": {
      "100": { "$type": "color", "$value": "#ede9fe" },
      "500": { "$type": "color", "$value": "#8b5cf6" },
      "700": { "$type": "color", "$value": "#6d28d9" },
      "900": { "$type": "color", "$value": "#4c1d95" }
    },
    "ink": { "$type": "color", "$value": "#14121f" },
    "paper": { "$type": "color", "$value": "#faf8ff" }
  },
  "font": {
    "heading": { "$type": "fontFamily", "$value": ["Fraunces", "Georgia", "serif"] },
    "body": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] }
  },
  "radius": {
    "control": { "$type": "dimension", "$value": { "value": 10, "unit": "px" } }
  },
  "duration": {
    "quick": { "$type": "duration", "$value": { "value": 160, "unit": "ms" } }
  }
}

Tokens primitifs, sémantiques et de composant

Une liste plate de couleurs est une palette, pas un système. La structure qui tient dans la durée compte trois niveaux, chacun faisant référence à celui du dessous. Les composants ne touchent jamais aux valeurs brutes : ils demandent un usage.

{
  "color": {
    "action": {
      "primary": { "$type": "color", "$value": "{color.violet.700}" },
      "primary-hover": { "$type": "color", "$value": "{color.violet.900}" }
    },
    "text": {
      "default": { "$type": "color", "$value": "{color.ink}" },
      "on-action": { "$type": "color", "$value": "{color.paper}" }
    },
    "surface": {
      "page": { "$type": "color", "$value": "{color.paper}" },
      "tint": { "$type": "color", "$value": "{color.violet.100}" }
    }
  }
}

Beaucoup d’équipes s’arrêtent à deux niveaux, primitif et sémantique, et n’ajoutent des tokens de composant que là où un composant diffère vraiment. Le fichier reste ainsi assez petit pour être compris.

Nommer les design tokens pour qu’ils durent

Les noms survivent aux valeurs. Un token appelé color.purple casse le jour où la marque passe au sarcelle ; un token appelé color.action.primary y survit. Nommez les tokens sémantiques par rôle, et gardez des noms primitifs qui décrivent la valeur.

Choisissez un schéma, par exemple catégorie, puis rôle, puis variante, puis état, et consignez-le dans votre guide de style de marque. La cohérence des noms compte plus que le schéma choisi.

Du fichier de tokens au CSS et aux applications

Le fichier de tokens n’est pas livré tel quel. Une étape de build le transforme dans le format dont chaque plateforme a besoin. Style Dictionary est l’outil open source le plus utilisé pour cela, et d’autres lisent le même format. Pour le web, le résultat est en général des propriétés personnalisées CSS.

:root {
  --color-violet-100: #ede9fe;
  --color-violet-700: #6d28d9;
  --color-violet-900: #4c1d95;
  --color-ink: #14121f;
  --color-paper: #faf8ff;

  --color-action-primary: var(--color-violet-700);
  --color-text-default: var(--color-ink);
  --color-surface-page: var(--color-paper);

  --font-heading: Fraunces, Georgia, serif;
  --radius-control: 10px;
  --duration-quick: 160ms;
}

.button {
  background: var(--color-action-primary);
  color: var(--color-paper);
  border-radius: var(--radius-control);
  transition: background var(--duration-quick) ease;
}

Si vous utilisez Tailwind v4, le bloc @theme est lui-même un niveau de tokens : chaque variable --color-* devient des classes utilitaires. Les couleurs Tailwind montre comment y brancher une gamme de tokens. Le même fichier peut aussi produire des constantes Swift et des ressources Android, et c’est là que les tokens se rentabilisent pour les équipes multiplateformes.

Mode sombre et marques multiples

Comme les composants ne lisent que des tokens sémantiques, un thème n’est qu’un autre jeu de valeurs pour ce niveau. Le mode sombre redéfinit color.text.default et color.surface.page ; une deuxième marque redéfinit color.action.primary. Rien ne change dans les composants.

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-default: #e9e5f5;
    --color-surface-page: #0b0a14;
    --color-action-primary: var(--color-violet-500);
  }
}

[data-brand="harbour"] {
  --color-action-primary: #0f766e;
}

Déployer des design tokens

1. 1

   Faites l’inventaire de l’existant

   Rassemblez chaque couleur, taille de texte et valeur d’espacement utilisée. Attendez-vous à des doublons qui ne diffèrent que d’un chiffre hexadécimal.

2. 2

   Définissez les primitifs

   Réduisez-les à des échelles claires. Construire les gammes de couleurs en OKLCH garde des paliers réguliers ; voir OKLCH expliqué.

3. 3

   Ajoutez le niveau sémantique

   Nommez les rôles : texte, surface, bordure, action, retour. Faites pointer chacun vers un primitif.

4. 4

   Automatisez le build

   Générez le CSS et les ressources d’application à partir du fichier dans votre build, jamais à la main.

5. 5

   Protégez-le

   Ajoutez une règle de lint contre les valeurs hex brutes dans les composants, pour que le nouveau code utilise des tokens dès le premier jour.

Les tokens gardent le produit cohérent, mais les marques dérivent aussi dans les visuels créés en dehors : publications, slides, bannières. Un kit de marque Gradiently contient les mêmes décisions, vos palettes de couleurs, polices de titres et de texte, logos et ton, pour que les designs créés dans le Studio s’accordent. Et comme Gradiently fonctionne dans ChatGPT, Claude et les autres assistants qui prennent en charge les serveurs MCP distants, un assistant muni d’une clé API à portée limitée peut créer des designs fidèles à la marque depuis le même espace de travail. La cohérence de marque couvre l’habitude plus large.