Palettes de design tokens au format DTCG : 12 thèmes clair et sombre aux contrastes vérifiés (JSON, CSS, Tailwind v4)

Ces palettes s’adressent aux designers UI et aux développeurs front-end qui utilisent le starter de design tokens DTCG, offert, et veulent changer les couleurs de leur projet sans retoucher leurs composants. Vous obtenez 12 thèmes de couleur complets, chacun en mode clair et en mode sombre, construits sur la même structure sémantique que le starter : fond, surfaces, texte, bordures, accent, états d’erreur, de succès, d’alerte et d’information, anneau de focus et tuile inverse. Vous choisissez un thème, vous remplacez les fichiers de tokens du starter par les siens, et vos composants prennent les nouvelles couleurs. Chaque paire texte et fond déclarée a été mesurée en contraste, dans les deux modes, et le tableau des mesures est livré.

• 12 thèmes, chacun en 2 modes (clair et sombre) : ultramarine, forest, terracotta, ocean, plum, graphite, saffron, rose, moss, lagoon, iris et high-contrast. Le thème high-contrast vise 7:1 pour le texte et 4,5:1 pour les éléments d’interface ; les autres thèmes visent 4,5:1 pour le texte et 3:1 pour les éléments d’interface.
• 210 tokens par thème : 148 primitives et 31 tokens sémantiques présents dans chacun des 2 modes.
• Primitives (themes/<thème>/tokens/primitives.tokens.json) :
  • 6 rampes de couleur par thème : brand, qui porte la couleur du thème, neutral, et les couleurs de statut red, green, amber et blue, soit 816 couleurs de rampe sur l’ensemble des 12 thèmes ;
  • espacements, tailles, rayons, bordures, ombres, durées et 13 styles typographiques identiques à ceux du starter, sur la même échelle de 4 px.
• Tokens sémantiques (light.tokens.json et dark.tokens.json de chaque thème) : les 31 mêmes chemins que dans le starter, en alias vers les primitives du thème.
• Une feuille CSS commune (css/all-themes.css) : les 12 thèmes dans un seul fichier, choisis par l’attribut data-palette, pour comparer les thèmes ou laisser le choix dans une même interface.
• Tableau des contrastes (contrast/contrast-ratios.csv) : 35 paires par mode et par thème, soit 840 mesures, avec pour chacune le ratio, le seuil visé et le résultat.
• Règles pour agents IA (AGENTS.md) : choisir un seul thème, n’utiliser que des tokens, préférer le sémantique au primitif, rester sur l’échelle de 4 px, ne poser du texte que sur les paires mesurées, et la marche à suivre pour ajouter un token dans tous les thèmes.
• Documentation (docs/index.html) : une page qui présente les 12 thèmes en clair et en sombre, avec un sélecteur de thème et de mode.

Fichiers du produit (76 fichiers, dont 48 fichiers JSON) :

AGENTS.md
contrast/contrast-ratios.csv
css/all-themes.css
docs/index.html
themes/<thème>/tokens/primitives.tokens.json
themes/<thème>/tokens/light.tokens.json
themes/<thème>/tokens/dark.tokens.json
themes/<thème>/tokens/theme.resolver.json
themes/<thème>/css/tokens.css
themes/<thème>/tailwind/theme.css

Fabrication et IA

Les palettes, les exports et la documentation ont été produits avec un assistant d’IA, puis relus et contrôlés par une recette indépendante : validation du schéma DTCG, alias et modes, échelle de 4 px, recalcul des 840 mesures de contraste et build reproductible. Les 12 palettes ont été créées pour ce produit : aucune n’est reprise d’une bibliothèque de couleurs existante. Le produit ne contient aucune image générée par IA.

• DTCG 2025.10 JSON : les 4 fichiers de themes/<thème>/tokens/ sont la source de chaque thème. Chaque token porte son $type, sa $value et une $description qui dit où l’utiliser. Ils se lisent avec les outils qui prennent en charge le format DTCG.
• DTCG Resolver 2025.10 : theme.resolver.json charge les primitives, puis applique le mode choisi (clair par défaut, ou sombre), comme dans le starter.
• Variables CSS : themes/<thème>/css/tokens.css place le mode clair dans :root. Le mode sombre suit le réglage du système, sauf si la page pose data-theme="light" sur la balise html ; data-theme="dark" force le sombre. css/all-themes.css réunit les 12 thèmes : data-palette choisit le thème, data-theme le mode.
• Thème Tailwind CSS v4 (themes/<thème>/tailwind/theme.css) : à importer après tailwindcss. Il remplace la palette, les espacements, les rayons, les ombres et l’échelle typographique par défaut, si bien que seules les classes issues des tokens existent (bg-surface, bg-brand-500, bg-accent-solid, p-4, rounded-md, shadow-1).
• CSV : contrast/contrast-ratios.csv s’ouvre dans un tableur ou se lit par un script.
• Documentation HTML : une page autonome, lisible sans défilement horizontal de 375 à 1 440 px de large, en clair comme en sombre.
• AGENTS.md : un fichier Markdown que les agents IA de code lisent avant d’écrire une interface.

Les polices Geist et Geist Mono (licence SIL OFL 1.1) sont référencées par les tokens, pas incluses dans les fichiers : la documentation les charge depuis un service de polices en ligne. Le produit ne contient pas de fichier de variables pour un outil de design, ni de configuration Style Dictionary.

Passer du starter à un thème

• Copiez les dossiers tokens/, css/ et tailwind/ du thème choisi par-dessus ceux du starter : les noms de fichiers, les chemins DTCG, les variables CSS et les classes Tailwind du starter existent tous dans chacun des 12 thèmes.
• Le seul ajout est la rampe brand, 11 pas qui portent la couleur du thème.
• Si votre projet utilisait --color-blue-* ou bg-blue-* pour son accent, ces noms restent valides, mais blue devient la couleur d’information : remplacez-les par --color-brand-* ou bg-brand-*. Les noms sémantiques (--color-accent, bg-accent-solid et les autres accent*) ne changent pas.
• Les couleurs de statut (red, green, amber, blue) sont les mêmes dans les 12 thèmes, c’est voulu : une erreur, un succès, une alerte ou une information gardent la même couleur quel que soit le thème.

Les palettes sont vendues avec la licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même modifiés, comme palettes ou comme jeu de tokens.

• Design tokens : ce que change vraiment le nouveau standard W3C DTCG
• Un outil en ligne pour créer des palettes de couleurs d’interface

1.0.0 (11 novembre 2026) : première version.