Chaque interface commence par une impression visuelle et dans celle-ci, la couleur joue un rôle central : hiérarchie, accessibilité, identité, émotion.
Pourtant, beaucoup de systèmes la traitent comme une simple valeur hexadécimale qu’on applique au fil des composants.
Dans UniCore, j’ai choisi une autre voie : construire une palette fondation riche et inspirée notamment de la logique utilisée par Tailwind CSS.
Chaque couleur est déclinée par nuance de 50 à 950, ce qui offre un nuancier dense, pensé pour créer des interfaces cohérentes.
Ces couleurs ne portent aucun rôle en elles-mêmes. Ce sont des valeurs primitives.
Mais c’est justement ce qui les rend puissantes : elles servent de base à toute la couche sémantique du Design System, là où les vraies décisions de design prennent sens.
Dans cet article, je vous emmène dans les coulisses de cette palette, pour comprendre comment et pourquoi elle a été pensée ainsi — et ce qu’elle rend possible pour vous.
Structurer sa palette de couleurs change tout !
La couleur est l’un des outils les plus puissants du design d’interface.
Elle guide, attire, hiérarchise, rassure.
Cependant, mal gérée, elle devient vite source d’incohérences : un bleu trop clair ici, un rouge trop vif là… et le produit fini par perdre sa cohésion visuelle.
C’est précisément pour éviter ce type de dérive qu’UniCore repose sur une palette fondation claire et normalisée.
Elle n’a pas pour but d’imposer un style, mais d’offrir un socle fiable, réutilisable et évolutif, sur lequel chaque projet peut s’appuyer.
Une logique inspirée de Tailwind adaptée à UniCore
Tailwind CSS a popularisé une approche très efficace de la couleur sur laquelle j’ai choisi de m’inspirer pour la structure dans UniCore : chaque teinte est découpée en une échelle régulière, du plus clair au plus foncé.
Concrètement, chaque couleur est déclinée en neuf niveaux d’intensité :colorname-50 → colorname-950.
Cela permet une lecture intuitive de la hiérarchie chromatique ainsi qu’une utilisation fluide aussi bien en design qu’en développement.
Les couleurs primitives
Comme nous l’avons vu dans un précédent article, les couleurs de la palette ne portent aucune fonction en elles-mêmes.
Ce sont des valeurs primitives qui ne désignent ni un rôle, ni un état, ni un usage dans l’interface.
Par exemple, $color-blue-500 est simplement un bleu d’intensité moyenne.
Il pourrait tout aussi bien servir à un fond, un bouton actif, une icône… ou rien de tout ça.
Ce sont des valeurs de base, pas encore des éléments d’interface.
Les couleurs sémantiques
Une fois cette palette définie, elle alimente toute la couche sémantique du Design System via une nomenclature rigoureuse.
Par exemple :
$color-text-neutral-default: #303549;
$color-text-neutral-elevated: #0B0E17;Cette séparation entre valeur et fonction permet de changer une teinte à un endroit sans impacter toute l’interface, de créer des thèmes alternatifs (sombre, haute lisibilité…) ou d’adapter un produit à une nouvelle charte, sans repartir de zéro.
Pour mieux comprendre la logique de nommage utilisée dans UniCore, n’hésitez pas à consulter l’article précédent : Les fondations invisibles : comprendre les design tokens pour comprendre davantage la nomenclature établie.
La palette d’UniCore n’est pas là pour imposer un style.
Elle propose une grammaire visuelle robuste, prête à accueillir vos intentions graphiques.
En structurant la couleur dès la base, elle vous fait gagner du temps, garantit une cohérence naturelle, et prépare votre produit à grandir sans dette graphique.
🎁 C’est cadeau !
Retrouvez ci-dessous un aperçu PDF de la palette UniCore (valeurs primitives), pour explorer chaque teinte et chaque niveau d’intensité.
