Generate a coherent starter token system — two color scales, spacing, radius and a modular type scale — exported as CSS variables, SCSS, Tailwind v4 @theme, JSON or DTCG draft tokens.
Settings
Generated locally in your browser — your settings and results never leave this page.
Primitives that hang together
A token system is more than a color list: spacing on one rhythm, radii from one base, type sizes from one ratio, color scales that share a generation method. This generator produces exactly that coherent core — two OKLCH-generated 11-shade color scales (brand + neutral), a nine-step spacing scale, four radii and a six-step modular type scale — and previews swatches, corners and type live.
Five export formats
- CSS custom properties — framework-free, the universal baseline.
- SCSS variables — for Sass codebases.
- Tailwind v4 @theme — tokens become utilities automatically.
- JSON — nested tree for scripts and pipelines.
- DTCG draft — the Design Tokens Community Group’s $value/$type interchange format (marked draft because the spec is; colors and dimensions only, honestly scoped).
Worked example (CSS)
:root {
--color-primary-500: #6366f1;
--color-neutral-100: #f3f4f6;
--space-md: 16px;
--radius-md: 8px;
--font-size-lg: 20px;
}Best practices
- These are primitive tokens. Layer semantic aliases on top — Semantic Color Tokens for roles, Light/Dark Theme for modes — and reference primitives from them, never the reverse.
- A 1.25 type ratio suits product UI; 1.333 gives editorial contrast. Change the ratio, not individual sizes.
Limitations
- Deliberately a starter: elevation, motion, z-index and component tokens are yours to add on this base.
- Send the same inputs to the Figma Token JSON Generator to keep design and code on one source of truth.
How to use the Design Token Generator
- Pick a primary brand color and a neutral base.
- Set the spacing base, radius base and type-scale ratio.
- Review the live swatches, radii and type samples.
- Export as CSS variables, SCSS, Tailwind v4 @theme, JSON or DTCG tokens.
Frequently asked questions
What tokens are generated?
Two 11-step color scales (primary + neutral, generated perceptually in OKLCH), a nine-step spacing scale from your base unit, four radius steps, and a six-step modular type scale from the ratio you choose — a coherent starter system, not an exhaustive one.
What is the DTCG format?
The Design Tokens Community Group draft specification — tokens as objects with $value and $type. It is the emerging interchange format between design tools; this export follows the draft for colors and dimensions and says so, since the spec is not final.
Why generate spacing and type from ratios?
Consistency: a 4px base makes every gap a multiple of one rhythm, and a modular ratio (1.25, 1.333…) makes heading sizes relate musically instead of arbitrarily. Both are standard design-system practice.
Can I use this as my full design system?
It is deliberately a starter: real systems add semantic aliases (see the Semantic Color Token Generator), dark mode (Light/Dark Theme Generator), elevation, motion and component tokens on top of these primitives.
Turn a palette into design tokens
The same palette as named tokens, as CSS custom properties, and as a Figma token file.
- Color Palette GeneratorProduce the palette the tokens will describe.
- Semantic Color Token GeneratorGive the colours role names rather than colour names.
- Design Token Generator you are hereBuild the token set from those roles.
- CSS Variables GeneratorEmit the tokens as CSS custom properties.
- Figma Token JSON GeneratorEmit the same tokens in the format Figma reads.
