Outil gratuit

Générateur de design tokens en 3 niveaux

Une couleur de marque, quelques règles, et vous repartez avec un jeu de tokens complet : gammes de couleurs, rôles pour le thème clair et le thème sombre, réglages des composants. Export en CSS, Tailwind v4 ou JSON au format W3C.

Neutres
Base d’espacement
Rayon des contrôles
Rayon des médias

L’aperçu utilise les polices installées sur votre appareil.

99 tokens générésref 54 · sys 26 · comp 19Contraste de la marque sur blanc 9.0:1 · Texte sur la marque blanc

Gammes

50
100
200
300
400
500
600
700
800
900
950
0
50
100
200
300
400
500
600
700
800
900
950

Aperçu

Nouveau

Votre marque, en tokens

Chaque couleur, rayon et espacement vient des tokens ci-dessous : changez un réglage, tout suit.

Action principaleSecondaire
Adresse email
/* Généré avec le générateur de tokens de Maxime Breynat : https://www.maximebreynat.com/tools/design-tokens */

:root {
  /* Niveau 1 · référence : les valeurs brutes */
  --brand-ref-color-brand-50: #f1f5ff;
  --brand-ref-color-brand-100: #dfe7ff;
  --brand-ref-color-brand-200: #bfd0ff;
  --brand-ref-color-brand-300: #97b0ff;
  --brand-ref-color-brand-400: #708fff;
  --brand-ref-color-brand-500: #5270ed;
  --brand-ref-color-brand-600: #3a52dd;
  --brand-ref-color-brand-700: #272dcb;
  --brand-ref-color-brand-800: #1e1bb0;
  --brand-ref-color-brand-900: #130088;
  --brand-ref-color-brand-950: #0a005c;
  --brand-ref-color-neutral-0: #ffffff;
  --brand-ref-color-neutral-50: #f8faff;
  --brand-ref-color-neutral-100: #f0f3fc;
  --brand-ref-color-neutral-200: #e1e4ed;
  --brand-ref-color-neutral-300: #ced1d9;
  --brand-ref-color-neutral-400: #9ea1a9;
  --brand-ref-color-neutral-500: #71747c;
  --brand-ref-color-neutral-600: #52555c;
  --brand-ref-color-neutral-700: #3d4046;
  --brand-ref-color-neutral-800: #24262c;
  --brand-ref-color-neutral-900: #14161c;
  --brand-ref-color-neutral-950: #090b10;
  --brand-ref-space-0: 0px;
  --brand-ref-space-1: 4px;
  --brand-ref-space-2: 8px;
  --brand-ref-space-3: 12px;
  --brand-ref-space-4: 16px;
  --brand-ref-space-6: 24px;
  --brand-ref-space-8: 32px;
  --brand-ref-space-10: 40px;
  --brand-ref-space-12: 48px;
  --brand-ref-space-16: 64px;
  --brand-ref-space-24: 96px;
  --brand-ref-space-32: 128px;
  --brand-ref-radius-0: 0px;
  --brand-ref-radius-4: 4px;
  --brand-ref-radius-8: 8px;
  --brand-ref-radius-16: 16px;
  --brand-ref-radius-full: 9999px;
  --brand-ref-font-family-display: "Ancizar Serif", Georgia, serif;
  --brand-ref-font-family-body: "Syne", system-ui, sans-serif;
  --brand-ref-font-size-12: 0.75rem;
  --brand-ref-font-size-14: 0.875rem;
  --brand-ref-font-size-16: 1rem;
  --brand-ref-font-size-18: 1.125rem;
  --brand-ref-font-size-20: 1.25rem;
  --brand-ref-font-size-24: 1.5rem;
  --brand-ref-font-size-30: 1.875rem;
  --brand-ref-font-size-36: 2.25rem;
  --brand-ref-font-size-48: 3rem;
  --brand-ref-font-size-60: 3.75rem;
  --brand-ref-font-size-72: 4.5rem;
  --brand-ref-font-size-96: 6rem;

  /* Niveau 2 · système : les rôles (clair) */
  --brand-sys-color-bg-default: var(--brand-ref-color-neutral-0);
  --brand-sys-color-bg-subtle: var(--brand-ref-color-neutral-100);
  --brand-sys-color-bg-inverse: var(--brand-ref-color-neutral-950);
  --brand-sys-color-text-default: var(--brand-ref-color-neutral-950);
  --brand-sys-color-text-muted: var(--brand-ref-color-neutral-600);
  --brand-sys-color-text-inverse: var(--brand-ref-color-neutral-0);
  --brand-sys-color-text-on-brand: var(--brand-ref-color-neutral-0);
  --brand-sys-color-brand-default: var(--brand-ref-color-brand-700);
  --brand-sys-color-brand-hover: var(--brand-ref-color-brand-800);
  --brand-sys-color-brand-subtle: var(--brand-ref-color-brand-50);
  --brand-sys-color-brand-text: var(--brand-ref-color-brand-700);
  --brand-sys-color-border-default: var(--brand-ref-color-neutral-200);
  --brand-sys-color-focus-ring: var(--brand-ref-color-brand-400);
  --brand-sys-radius-control: var(--brand-ref-radius-0);
  --brand-sys-radius-surface: var(--brand-ref-radius-0);
  --brand-sys-radius-media: var(--brand-ref-radius-8);
  --brand-sys-radius-round: var(--brand-ref-radius-full);
  --brand-sys-font-family-display: var(--brand-ref-font-family-display);
  --brand-sys-font-family-body: var(--brand-ref-font-family-body);
  --brand-sys-font-size-body: var(--brand-ref-font-size-16);
  --brand-sys-font-size-title: var(--brand-ref-font-size-24);
  --brand-sys-font-size-heading: var(--brand-ref-font-size-48);
  --brand-sys-font-size-display: var(--brand-ref-font-size-72);
  --brand-sys-space-gutter: var(--brand-ref-space-6);
  --brand-sys-space-section: var(--brand-ref-space-24);
  --brand-sys-space-section-lg: var(--brand-ref-space-32);

  /* Niveau 3 · composant */
  --brand-comp-button-radius: var(--brand-sys-radius-control);
  --brand-comp-button-padding-x: var(--brand-ref-space-6);
  --brand-comp-button-padding-y: var(--brand-ref-space-3);
  --brand-comp-button-color-bg-primary: var(--brand-sys-color-brand-default);
  --brand-comp-button-color-bg-primary-hover: var(--brand-sys-color-brand-hover);
  --brand-comp-button-color-text-primary: var(--brand-sys-color-text-on-brand);
  --brand-comp-button-color-border-secondary: var(--brand-sys-color-text-default);
  --brand-comp-button-color-text-secondary: var(--brand-sys-color-text-default);
  --brand-comp-badge-radius: var(--brand-sys-radius-control);
  --brand-comp-badge-color-bg: var(--brand-sys-color-brand-subtle);
  --brand-comp-badge-color-text: var(--brand-sys-color-brand-text);
  --brand-comp-card-radius: var(--brand-sys-radius-surface);
  --brand-comp-card-padding: var(--brand-ref-space-8);
  --brand-comp-card-color-bg: var(--brand-sys-color-bg-subtle);
  --brand-comp-card-color-border: var(--brand-sys-color-border-default);
  --brand-comp-media-radius: var(--brand-sys-radius-media);
  --brand-comp-input-radius: var(--brand-sys-radius-control);
  --brand-comp-input-color-border: var(--brand-sys-color-border-default);
  --brand-comp-input-color-focus: var(--brand-sys-color-focus-ring);
}

/* Thème sombre : seuls les rôles changent */
.dark,
[data-theme="dark"] {
  --brand-sys-color-bg-default: var(--brand-ref-color-neutral-950);
  --brand-sys-color-bg-subtle: var(--brand-ref-color-neutral-900);
  --brand-sys-color-bg-inverse: var(--brand-ref-color-neutral-50);
  --brand-sys-color-text-default: var(--brand-ref-color-neutral-50);
  --brand-sys-color-text-muted: var(--brand-ref-color-neutral-400);
  --brand-sys-color-text-inverse: var(--brand-ref-color-neutral-950);
  --brand-sys-color-text-on-brand: var(--brand-ref-color-neutral-950);
  --brand-sys-color-brand-default: var(--brand-ref-color-brand-400);
  --brand-sys-color-brand-hover: var(--brand-ref-color-brand-300);
  --brand-sys-color-brand-subtle: var(--brand-ref-color-brand-900);
  --brand-sys-color-brand-text: var(--brand-ref-color-brand-300);
  --brand-sys-color-border-default: var(--brand-ref-color-neutral-800);
  --brand-sys-color-focus-ring: var(--brand-ref-color-brand-300);
}
Partager sur LinkedIn

Ces tokens sont un point de départ.

Un design system complet, ce sont aussi des composants, une documentation, une gouvernance et une équipe qui l’adopte. C’est mon métier.

Comment s’en servir

  1. 1

    Posez vos règles

    Votre couleur de marque, le préfixe de vos tokens, la base d’espacement et les rayons : carré pour ce qui se clique, arrondi pour ce qui se regarde, ou l’inverse.

  2. 2

    Exportez

    CSS pour n’importe quel projet web, Tailwind v4 pour brancher des utilitaires, JSON W3C pour Figma (Tokens Studio) et Style Dictionary.

  3. 3

    Branchez

    Importez tokens.css, puis posez la classe dark sur <html> pour le thème sombre : seuls les rôles changent de valeur, les composants suivent.

Pourquoi trois niveaux

Référence

--brand-ref-color-brand-600

Les valeurs brutes : la gamme de la marque, les neutres, l’échelle d’espacement, les rayons. Elles ne servent jamais directement.

Système

--brand-sys-color-text-muted

Le rôle d’une valeur : fond discret, texte secondaire, rayon d’un média. C’est le seul niveau qui change avec le thème.

Composant

--brand-comp-button-radius

Les réglages d’un composant, branchés sur des rôles. Pour retoucher un bouton, on touche un token, pas le CSS du bouton.

Questions fréquentes

Qu’est-ce qu’un design token ?

Une décision de design nommée et stockée à part : une couleur, un espacement, un rayon, une police. Les composants lisent le nom du token, jamais la valeur. Changer la valeur met à jour tout ce qui l’utilise.

Pourquoi trois niveaux plutôt qu’une liste de variables ?

Parce que chaque niveau répond à une question différente. La référence dit ce qui existe (le bleu 600), le système dit à quoi ça sert (la couleur de marque), le composant dit qui l’utilise (le fond du bouton). On peut alors changer de bleu, ajouter un thème sombre ou retoucher un composant sans toucher au reste.

Comment les gammes de couleur sont-elles calculées ?

En OKLCH, un espace colorimétrique où la luminosité perçue est régulière d’un échelon à l’autre. Votre couleur exacte est placée sur l’échelon le plus proche, les autres sont dérivés autour. Le texte posé sur la marque, blanc ou encre, est choisi par le contraste WCAG (4,5:1 minimum), et un rôle « texte de marque » garantit la lisibilité sur fond blanc, même pour une marque jaune.

Quel format choisir ?

Le CSS fonctionne partout. Le fichier Tailwind v4 se place après le CSS et crée des utilitaires (bg-brand, rounded-control, py-section). Le JSON suit le format du W3C Design Tokens Community Group : il s’importe dans Tokens Studio pour Figma ou dans Style Dictionary pour générer d’autres plateformes.

Puis-je utiliser ces tokens dans un projet commercial ?

Oui, librement. Le commentaire de crédit en tête de fichier peut être retiré.

Et après les tokens ?

Un design system complet, ce sont aussi des composants, une documentation, une gouvernance et une équipe qui l’adopte. C’est le travail que je mène avec les équipes, de la startup au grand groupe.

Pour aller plus loin : le guide pratique des design tokens en trois niveaux