Les design tokens expliqués, avec un convertisseur JSON vers CSS en direct
Les design tokens expliqués
Design tokens expliqués avec exemples (JSON, CSS, Tailwind) | We.Inc
Ce que sont les design tokens, comment le format JSON du groupe communautaire W3C les écrit, et un convertisseur en direct qui transforme le JSON de tokens en variables CSS et en bloc @theme Tailwind v4.
Les design tokens sont des décisions de design nommées, comme color.primary ou space.md, stockées sous forme de données pour que chaque plateforme lise les mêmes valeurs. Le format du Design Tokens Community Group les écrit en JSON avec $value et $type, et permet à un token d'en référencer un autre avec des accolades. Des outils transforment ensuite ce JSON en variables CSS, en thèmes Tailwind ou en code d'application.
Les niveaux de tokens utilisés par la plupart des équipes
Niveau
Exemple de nom
Contient
Base (primitif)
Une valeur brute : une couleur, une taille ou une police
Sémantique (alias)
Un rôle qui pointe vers un token de base
Composant
Un rôle limité à un seul composant
La plupart des explications s'arrêtent à la définition. Collez ou modifiez ci-dessous du JSON de tokens au format du groupe communautaire et voyez, pendant la saisie, les propriétés personnalisées CSS et le thème Tailwind v4 obtenus, avec les alias résolus en références var().
Modifiez le JSON à gauche. Un groupe peut définir $type une seule fois pour tous les tokens qu'il contient.
Référencez un autre token en entourant son chemin à points d'accolades, par exemple {color.blue-500}.
Consultez l'onglet CSS pour les variables :root, ou l'onglet Tailwind pour un bloc @theme.
Copiez le résultat dans votre feuille de style. Corrigez d'abord tout message d'erreur affiché sous l'éditeur.
Nommez les tokens sémantiques d'après leur fonction (text, surface, danger) plutôt que leur apparence (red, dark), pour qu'un changement d'identité visuelle ne modifie que le niveau de base.
Gardez les tokens de base hors des composants. Les composants doivent lire des noms sémantiques pour que le mode sombre et les thèmes puissent changer les valeurs en dessous.
Stockez les tokens dans un seul fichier sous contrôle de version et générez à partir de lui le résultat pour chaque plateforme.
Utilisez l'extension recommandée .tokens ou .tokens.json pour que les outils reconnaissent les fichiers.
Questions fréquentes
Qu'est-ce qu'un design token ?
Un design token est un nom associé à une valeur de design, par exemple color.text contenant une couleur presque noire. Le code et les fichiers de design utilisent le nom, si bien que modifier la valeur à un seul endroit met à jour chaque bouton, page et application qui y fait référence.
Existe-t-il un format standard pour les design tokens ?
Oui. Le Design Tokens Community Group du W3C a publié le Format Module 2025.10 comme rapport final de groupe communautaire le 28 octobre 2025 et le décrit comme stable. Il s'agit d'un rapport de groupe communautaire, pas d'une Recommandation du W3C.
Quelle différence entre design tokens et variables CSS ?
Les tokens sont les données sources, indépendantes de toute plateforme. Les propriétés personnalisées CSS ne sont qu'un résultat possible. Le même fichier de tokens peut aussi générer des constantes Swift, Android ou JavaScript, ce que les variables CSS seules ne permettent pas.
Comment les design tokens fonctionnent-ils avec Tailwind CSS ?
Dans Tailwind v4, vous déclarez les variables de thème dans @theme, par exemple --color-primary. Tailwind en tire des utilitaires comme bg-primary et les émet aussi comme variables CSS normales sur :root, ce qui garde tokens et utilitaires synchronisés.
Comment les couleurs s'écrivent-elles dans le format de tokens ?
Dans le format 2025.10, une valeur de couleur est un objet avec un colorSpace, comme srgb, et un tableau de composantes de 0 à 1, avec un alpha facultatif. Le convertisseur proposé ici accepte aussi de simples chaînes pour que vous puissiez coller d'anciens fichiers de tokens.
Pourquoi les équipes adoptent les tokens
Sans tokens, le bleu de la marque existe sous forme de code hexadécimal collé à des centaines d'endroits dans le CSS, les applications mobiles et les fichiers de design. Le changer impose un rechercher-remplacer qui en oublie toujours un.
Avec les tokens, ce bleu a un seul nom et un seul emplacement. Designers et développeurs parlent de color.primary, et une étape de build écrit la valeur dans le format propre à chaque plateforme.
Lire le format JSON
Tout objet doté d'une $value est un token ; tout autre objet est un groupe. Les propriétés qui commencent par un signe dollar sont réservées par le format : $value, $type, $description, $deprecated et $extensions.
La spécification définit des types simples comme color, dimension, fontFamily, fontWeight, duration, cubicBezier et number, ainsi que des types composites comme shadow, border, transition, typography, strokeStyle et gradient. Les dimensions et les durées sont des objets avec une valeur numérique et une unité.
Des tokens à un thème fonctionnel
Un petit site peut garder ses tokens directement en CSS sous forme de propriétés personnalisées. Dès que vous livrez sur plus d'une plateforme, ou que vous concevez dans un outil qui exporte des tokens, générez plutôt le CSS à partir du JSON afin d'avoir une source unique.
Le mode sombre devient un second jeu de valeurs sémantiques. Les couleurs de base restent identiques, et le niveau sémantique change la base vers laquelle pointe chaque rôle, dans une media query de thème sombre ou via un attribut data.
Tokens sémantiques avec un thème sombre
Changer les valeurs sémantiques, garder les valeurs de base
La carte ne lit que --surface et --text. Le bloc sombre réaffecte ces deux noms, et la carte suit sans aucune modification de ses propres règles.
Un token composite
Token d'ombre au format du groupe communautaire
Les tokens composites regroupent plusieurs valeurs. Ici, la couleur est elle-même un alias, et les décalages utilisent des objets dimension.
Aucun token trouvé. Un token est un objet doté d'une propriété $value.
Ce n'est pas encore du JSON valide : {message}
Convertisseur de JSON de tokens vers CSS
Modifiez le fichier de tokens : les variables CSS et le thème Tailwind se mettent à jour pendant la saisie. Le fichier de départ donne :