Design Tokens Generator

Design Tokens Generator

Tu produis un jeu de tokens cohérent, accessible et prêt à coder. On ne juge jamais un contraste à l'œil : on le mesure.

Quand l'utiliser

• Tu lances un nouveau thème ou une nouvelle marque et tu pars d'une ou deux couleurs.
• Tu ajoutes un dark mode à un projet existant.
• Tu veux vérifier que ta palette passe WCAG AA partout.
• Tu veux une seule source de vérité partagée entre Figma, CSS et Tailwind.

Ce que le skill produit

1. tokens.css** : variables CSS sur :root et [data-theme="dark"].
2. tailwind.config.ts** : colors, spacing, fontSize, borderRadius, boxShadow qui lisent ces variables.
3. tokens.json** : source au format W3C DTCG, importable dans Figma via un plugin.
4. Rapport de contraste : liste de chaque paire testée avec son ratio, statut AA et correction proposée si échec.

Méthode

1. Récupère les couleurs de marque, l'ambiance voulue et les contraintes (fond noir, texte sur image, etc.).
2. Génère une rampe de 12 pas par famille (1 le plus clair, 12 le plus sombre), interpolée en OKLCH pour une luminosité perçue régulière.
3. Construis la couche sémantique pour le thème clair, puis reconstruis-la pour le sombre avec les mêmes noms.
4. Calcule le ratio WCAG de chaque paire sémantique. Corrige en ajustant la luminosité L en OKLCH, pas la teinte.
5. Génère l'échelle typographique fluide, les espacements, les rayons, les ombres et les animations.
6. Écris les trois fichiers et le rapport de contraste. Aucun échec ne part sans être signalé.

Couleurs et alias sémantiques

• Familles : neutral, accent (marque), success, warning, danger.
• Alias : bg, bg-elev, fg, fg-dim, fg-faint, line, line-2, accent, accent-fg, success, warning, danger, card-bg, card-fg.
• Nommage : kebab-case, rôle avant variante (fg-dim, pas dim-text).
• Dark mode : fonds entre L 0.14 et 0.22 plutôt qu'un noir pur si tu empiles des surfaces, accents éclaircis de 1 à 2 pas.

Règles de contraste

• Texte normal : 4.5:1 minimum (fg, fg-dim sur bg, bg-elev, card-bg).
• Texte large (24 px, ou 18.66 px gras) : 3:1 minimum.
• Éléments d'interface et bordures porteuses de sens (champs, focus ring) : 3:1 contre le fond adjacent.
• fg-faint est réservé au texte décoratif ou désactivé, jamais au contenu utile.
• accent-fg doit passer 4.5:1 sur accent (texte des boutons primaires).

Typo, espacement, motion

• Typo fluide : clamp(min, calc(a + b * 1vw), max) entre 400 et 1440 px de largeur. Pas : xs 12, sm 14, base 16, lg 18, xl 20, 2xl 24, 3xl 30, 4xl 36, 5xl 48, 6xl 60, 7xl 72.
• Seuls les pas 2xl et plus varient en fluide. Le corps de texte reste à 16 px.
• Espacements (px) : 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, alias 1 à 24 façon Tailwind.
• Rayons : 4, 8, 12, 16, full.
• Durées : 100, 150, 250, 400, 600 ms. Courbes : standard cubic-bezier(0.16, 1, 0.3, 1), entrance cubic-bezier(0, 0, 0.2, 1), exit cubic-bezier(0.4, 0, 1, 1).
• Élévation : 3 niveaux d'ombre max. En sombre, préfère une surface plus claire à une ombre.

Checklist avant livraison

• Chaque famille a ses 12 pas et une progression de luminosité régulière.
• Clair et sombre utilisent exactement les mêmes noms d'alias.
• Toutes les paires texte passent 4.5:1, toutes les paires UI passent 3:1.
• Le rapport de contraste liste chaque paire avec son ratio.
• Tailwind lit les variables CSS, aucune couleur en dur dans la config.
• tokens.json valide au format DTCG ($value, $type).
• Les animations sont coupées sous prefers-reduced-motion: reduce.

À éviter

• Inverser la palette claire pour obtenir le dark mode.
• Interpoler en RGB ou HSL : les pas intermédiaires deviennent boueux ou irréguliers.
• Utiliser une couleur fondation directement dans un composant.
• Arrondir un ratio de 4.46:1 à "ça passe".
• Multiplier les pas typographiques "au cas où" : 11 suffisent.

Exemple

:root {
  --accent: oklch(0.55 0.18 255);   /* sur --bg : 4.8:1 */
  --accent-fg: oklch(0.99 0 0);
  --fg: oklch(0.21 0.01 255);       /* sur --bg : 17.2:1 */
  --fg-dim: oklch(0.48 0.01 255);   /* sur --bg : 6.3:1 */
  --bg: oklch(0.99 0 0);
  --text-4xl: clamp(1.875rem, 1.731rem + 0.577vw, 2.25rem); /* 30 à 36 px */
}
[data-theme="dark"] {
  --accent: oklch(0.72 0.14 255);
  --bg: oklch(0.17 0.01 255);
}

Ligne du rapport : fg-dim / card-bg (dark) : 4.0:1, ÉCHEC AA, passer L de 0.58 à 0.64 (5.1:1).

Prompts de démarrage

• "Génère les tokens pour une marque minimaliste chaude, accent terracotta, cartes noires pures."
• "Audite ce tokens.css : liste les échecs de contraste et propose des corrections en OKLCH."
• "Ajoute un dark mode à ces tokens en gardant les mêmes noms d'alias."
• "Crée une échelle typographique fluide de 12 à 72 px et branche-la dans Tailwind."
• "Convertis ces variables CSS en tokens.json au format DTCG pour Figma."