Guide couleur pratique
Design tokens couleur : nommer les variables CSS pour une UI evolutive
Organisez les tokens de palette, semantiques et composants pour CSS, design systems, themes et interfaces accessibles.
Ouvrir l outil lieSeparer la palette du sens
Les tokens primitifs decrivent des valeurs comme blue-600 ou gray-100. Les tokens semantiques decrivent une intention comme action-primary, text-muted ou status-danger. Les composants doivent consommer les tokens semantiques.
Utiliser un modele en trois couches
Un systeme evolutif peut utiliser couches primitive, semantique et composant. Tous les projets n ont pas besoin des trois, mais cette separation aide quand plusieurs themes partagent une base.
- Primitif : --blue-600
- Semantique : --color-action-primary
- Composant : --button-primary-background
Nommer les roles et non l apparence
Un token blue-button devient trompeur lorsque le theme change. action-primary communique le role et reste valable en mode clair, sombre ou contraste eleve.
Documenter les relations entre etats
Regroupez valeurs default, hover, active, focus et disabled. Ajoutez les exigences de contraste et des exemples pour eviter la creation de nouvelles couleurs par composant.
Versionner les tokens avec prudence
Ajoutez les nouveaux tokens semantiques avant de retirer les anciens, publiez une migration et testez les captures sur chaque theme.
References techniques
Ce guide a ete verifie avec les sources primaires suivantes.
Questions frequentes
Qu est-ce qu un token couleur semantique ?
C est une valeur nommee selon son role, comme text-primary ou status-success, plutot que selon une couleur precise.
Les composants doivent-ils utiliser la palette brute ?
Preferez les tokens semantiques. Les tokens bruts restent la fondation et servent aux exceptions controlees.