Tout le monde parle de design system. Peu parlent de ce qui le tient debout : les design tokens. C'est la couche invisible qui fait qu'un système reste cohérent à 10 écrans comme à 1000. Et en 2026, c'est aussi ce qui rend la génération d'UI par IA réellement exploitable.
C'est quoi un design token ?
Un design token, c'est une décision de design stockée comme une variable nommée. Au lieu d'écrire #FF5B22 partout dans ton code, tu écris --orange. Au lieu de 16px, tu écris --space-md. La valeur vit à un seul endroit ; tout le reste y fait référence.
Bénéfice immédiat : pour changer une couleur sur tout le produit, tu modifies une ligne. Pour passer en dark mode, tu réassignes un jeu de tokens. Pour décliner une seconde marque, tu changes la couche de base.
Les 3 niveaux de tokens
Niveau 1 — Les primitifs
La palette brute, sans signification d'usage : --orange-500: #FF5B22, --grey-900: #0E0E0F, --space-4: 16px. C'est ton inventaire de matériaux. On n'y fait jamais référence directement dans les composants.
Niveau 2 — Les sémantiques (la clé)
Ils donnent un sens d'usage aux primitifs : --color-accent: var(--orange-500), --color-text: var(--grey-900), --color-surface: var(--cream). C'est ici que se joue tout. Les composants ne parlent qu'aux tokens sémantiques. Pour passer en dark mode, tu réassignes ces sémantiques — sans toucher un seul composant.
Niveau 3 — Les tokens de composant
Spécifiques à un composant : --button-bg: var(--color-accent). Optionnel, utile sur les gros systèmes. Trop tôt, c'est de la sur-ingénierie.
Les composants ne connaissent que le sens, jamais la valeur brute. C'est tout le secret.
Pourquoi ça change tout pour le dark mode
Sans tokens sémantiques, faire un dark mode = repasser sur chaque composant. Avec, c'est un seul bloc qui réassigne : --color-surface passe de cream à near-black, --color-text s'inverse, et l'accent orange reste identique. Tout le produit suit. C'est exactement le système qu'on utilise sur nos pages sombres comme RYA Research.
Le multi-marque sans douleur
Si tu sers plusieurs marques (ou plusieurs clients sur une même base), les tokens primitifs deviennent ta couche de personnalisation. Tu changes la palette de base, la structure sémantique reste, et chaque marque hérite d'un produit cohérent. C'est ce qui nous permet de décliner un système, par exemple pour un design system de PME.
Tokens et génération IA
Voici le lien avec 2026 : pour qu'une IA génère des écrans à ta marque et non du générique, elle doit s'appuyer sur tes tokens. Un système tokenisé proprement, c'est ce qui transforme la génération IA de "joli jetable" en "production-ready". Sans tokens, l'IA invente des valeurs ; avec, elle compose dans ton langage. On détaille ça dans l'IA dans le design produit.
Comment démarrer (sans tout casser)
1. Recense tes valeurs réelles (couleurs, espacements, typo, rayons) — tu en as souvent 3× trop. 2. Réduis à une échelle propre (primitifs). 3. Crée la couche sémantique (text, surface, accent, border…). 4. Migre les composants vers les sémantiques, un par un. 5. Documente. Pas besoin d'outil exotique : des variables CSS suffisent pour démarrer.
L'erreur classique
Créer 400 tokens dès le départ "au cas où". On finit avec un système que personne ne comprend. La bonne approche : commencer minimal (20-30 tokens sémantiques), grossir au besoin. Un token qui ne sert pas est du bruit.
Tu veux un design system qui tienne la route et fasse gagner du temps à chaque feature ? C'est un de nos cœurs de métier — on en parle en 20 minutes.