Quand on pense à un Design System, on imagine tout de suite des boutons, des cartes, des formulaires… en bref, du visible et du beau !
Mais ce qui fait réellement sa solidité, ce sont les éléments invisibles (eh oui !) : les fondations.
Parmi elles, il en est une souvent méconnue mais essentielle : les design tokens.
Qu’est-ce qu’un design token ?
Un design token, c’est une variable. Mais encore me direz-vous ?
Ce n’est pas n’importe quelle variable : c’est un élément qui stocke une valeur d’interface brute comme la couleur, la taille de police, l’espacement, le rayon de bordure, etc.
C’est une donnée centralisée, réutilisable, qui garantit cohérence et évolutivité.
Primitives vs sémantiques : quelle différence ?
Il existe en réalité plusieurs types de tokens, chacun avec ses spécificités.
On distingue généralement deux types, même si chaque Design System a ses propres nuances :
- les primitives, qui contiennent les valeurs brutes (couleurs, tailles, typographies),
- les sémantiques, qui donnent un sens à ces valeurs selon leur usage dans l’interface.
L’intérêt de ça, c’est que demain, si vous souhaitez que color-primary passe de bleu à violet, vous n’avez qu’à modifier un seul token, et tout s’actualise. Magique, non ? Non, pratique !
Comment UniCore structure ses tokens ?
UniCore s’appuie sur une architecture simple mais flexible, basée sur deux grandes familles de tokens :
Primitives : les valeurs brutes et fondamentales comme nous venons de le voir, donc les couleurs de base, tailles, espaces, typographies, rayons de bordure, etc.
Sémantiques : des tokens qui portent du sens, décrivant l’usage précis dans l’interface, structurés selon une nomenclature modulaire et évolutive.
La nomenclature des tokens sémantiques suit un modèle multi-dimensionnel qui permet de composer des variables très précises, tout en restant lisible et cohérent.
Elle s’organise autour de plusieurs groupes (pas toujours tous utilisés) :
$category-$subcategory-$role-$variant-$accent-$intensity-$scale-$modePar exemple, un token comme :
$color-background-action-primary-defaultse lit ainsi :
color(catégorie primitive : une couleur)background(sous-catégorie sémantique : usage en arrière-plan)action(rôle sémantique : un élément sur lequel on peut agir)primary(variante sémantique : couleur principale de la marque)default(intensité sémantique : état normal, ni atténué ni mis en avant)
Cette granularité permet, par exemple, d’utiliser le même groupe d’intensité ($intensity) pour désigner l’état d’un bouton par exemple, ou l’importance visuelle d’une carte, sans figer les usages.
Elle garantit aussi la scalabilité du système : vous n’êtes pas obligée d’utiliser tous les groupes à chaque token, ce qui laisse une grande liberté dans la définition des variables.
Les design tokens sont peut-être invisibles, mais leur impact est partout.
Ils permettent de bâtir un Design System vivant, centralisé, facile à faire évoluer — exactement ce dont une équipe produit a besoin.
