Three-tier design token generator
One brand colour, a few rules, and you leave with a complete token set: colour scales, roles for light and dark themes, component settings. Export to CSS, Tailwind v4 or W3C JSON.
Scales
Preview
Your brand, as tokens
Every colour, radius and spacing comes from the tokens below: change a setting, everything follows.
/* Generated with Maxime Breynat's design token generator: https://www.maximebreynat.com/tools/design-tokens */
:root {
/* Tier 1 · reference: raw values */
--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;
/* Tier 2 · system: roles (light) */
--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);
/* Tier 3 · component */
--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);
}
/* Dark theme: only roles change */
.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);
}
These tokens are a starting point.
A complete design system also means components, documentation, governance and a team that adopts it. That is what I do.
How to use it
- 1
Set your rules
Your brand colour, token prefix, spacing base and radii: square for what you click, rounded for what you look at, or the other way round.
- 2
Export
CSS for any web project, Tailwind v4 to wire utilities, W3C JSON for Figma (Tokens Studio) and Style Dictionary.
- 3
Plug it in
Import tokens.css, then put the dark class on <html> for the dark theme: only roles change value, components follow.
Why three tiers
Reference
--brand-ref-color-brand-600Raw values: the brand scale, neutrals, spacing scale, radii. Never used directly.
System
--brand-sys-color-text-mutedWhat a value is for: subtle background, secondary text, media radius. The only tier that changes with the theme.
Component
--brand-comp-button-radiusA component’s settings, wired to roles. To adjust a button, you change a token, not the button’s CSS.
FAQ
What is a design token?
A named design decision stored on its own: a colour, a spacing, a radius, a typeface. Components read the token’s name, never its value. Changing the value updates everything that uses it.
Why three tiers instead of a list of variables?
Because each tier answers a different question. Reference says what exists (blue 600), system says what it is for (the brand colour), component says who uses it (the button background). You can then change the blue, add a dark theme or adjust a component without touching the rest.
How are the colour scales computed?
In OKLCH, a colour space where perceived lightness is even from one step to the next. Your exact colour sits on the closest step, the others are derived around it. Text on the brand, white or ink, is picked by WCAG contrast (4.5:1 minimum), and a “brand text” role stays readable on white, even for a yellow brand.
Which format should I pick?
CSS works everywhere. The Tailwind v4 file goes after the CSS and creates utilities (bg-brand, rounded-control, py-section). The JSON follows the W3C Design Tokens Community Group format: import it into Tokens Studio for Figma or Style Dictionary to generate other platforms.
Can I use these tokens in a commercial project?
Yes, freely. The credit comment at the top of the file can be removed.
What comes after tokens?
A complete design system also means components, documentation, governance and a team that adopts it. That is the work I do with teams, from startups to large companies.
Going further: the practical three-tier design tokens guide