Un changement de marque ne devrait pas signifier reconstruire le site. Si votre interface stocke ses couleurs, ses espacements et sa typographie sous forme de valeurs nommées plutôt que de codes hexadécimaux éparpillés, changer la marque devient une petite modification plutôt qu'un projet. Ces valeurs nommées s'appellent des design tokens.
Ce qu'est réellement un design token
Un design token est un nom qui représente une décision de design. Au lieu d'écrire #0A0A0A à cinquante endroits, vous définissez color-text-primary une seule fois et vous référencez le nom partout. La même idée s'applique aux espacements (space-4), aux tailles de police (font-size-lead), aux rayons de bordure, aux ombres et aux durées d'animation. Le token est la source unique de vérité ; tout le reste pointe vers lui.
Pourquoi cela compte lors d'un changement de marque
Quand une marque évolue — une nouvelle couleur principale, une échelle typographique un peu plus resserrée, des angles plus arrondis — le travail est désormais concentré dans un seul fichier. Vous mettez à jour les valeurs des tokens, et chaque bouton, carte, formulaire et titre qui les référençait se met à jour avec. Sans tokens, le même changement implique de fouiller les feuilles de style et les composants, et vous en oublierez.
Photo : stefano manzini / Unsplash
Deux couches gardent le système flexible
Les bons systèmes de tokens séparent ce qu'est une valeur de la façon dont elle est utilisée :
- Les tokens primitifs nomment des valeurs brutes :
green-500,grey-950,size-16. Ils changent rarement. - Les tokens sémantiques nomment une intention :
color-action,color-surface,space-section. Ils pointent vers les primitifs et ce sont eux que vos composants utilisent réellement.
Un changement de marque ne touche généralement que la correspondance intermédiaire — vous repointez color-action d'un primitif vers un autre — tandis que les composants restent intacts.
Gardez l'ensemble restreint
L'erreur la plus courante est d'avoir trop de tokens. Si chaque écran introduit une nouvelle valeur d'espacement, vous n'avez pas un système, vous avez une liste. Commencez avec une échelle serrée — une poignée de pas d'espacement, cinq ou six tailles de texte, un petit jeu de couleurs — et n'ajoutez un token que lorsque la même nouvelle valeur apparaît à trois endroits distincts.
Où vivent les tokens
Pour la plupart des sites, les propriétés personnalisées CSS sur :root suffisent, et elles peuvent être thématisées à l'exécution. Les produits plus vastes conservent les tokens dans un fichier indépendant du format (souvent du JSON) et en génèrent des sorties CSS, iOS et Android, pour que chaque plateforme partage une seule définition. Dans les deux cas, la règle est la même : designers et développeurs s'accordent sur les noms, et rien ne code en dur une valeur qu'un token couvre déjà.
En résumé
Les tokens transforment « changer la marque » d'une reconstruction en une modification de configuration. Nous les mettons en place dans le cadre de notre travail de design et de développement web — si vous préparez un rafraîchissement et souhaitez que le site suive, contactez-nous.