Guide

Les design tokens, expliqués avec de vrais fichiers

Un design token est une décision de design nommée : une couleur, un espacement, une taille de police. Définie une seule fois, utilisée partout, par l'outil de design comme par le code.

Pourquoi les tokens comptent

Sans tokens, le bleu de vos boutons est écrit dans le fichier de design, puis à nouveau dans le CSS, puis encore dans l'app. Changez-le une fois, et il faut le retrouver partout. Avec des tokens, vous modifiez color.brand et tous les endroits qui l'utilisent suivent.

À quoi ressemble un fichier de tokens

Le W3C Design Tokens Community Group définit un format JSON où chaque token possède une $value et un $type.

{
  "color": {
    "brand": { "$value": "#2F5BEA", "$type": "color" },
    "ink":   { "$value": "#121214", "$type": "color" }
  },
  "space": {
    "4": { "$value": "16px", "$type": "dimension" }
  }
}

Les mêmes décisions, transformées en variables CSS que le navigateur peut utiliser :

:root {
  --color-brand: #2F5BEA;
  --color-ink: #121214;
  --space-4: 16px;
}

Comment Kalka utilise les tokens

  • Un seul dossier : chaque projet possède un dossier design-system/ avec tokens.json au format W3C et tokens.css juste à côté.
  • Utilisés sur le canevas : quand vous choisissez une couleur ou un espacement dans le panneau Design, vous choisissez un token, et le CSS utilise la variable.
  • Versionnés avec Git : un changement de votre couleur de marque est un commit que vous pouvez relire, comme n'importe quelle modification de code.

Kalka est en développement et open source. La structure de dossiers ci-dessus provient de nos spécifications produit.