Pick fonts, colours and a style preset, and get a full set of design tokens — type scale, colour scales and WCAG contrast — with a live preview. Everything runs in your browser.
01 Typography
02 Presets
03 Colours
04 Live preview
05 WCAG contrast
06 Export · configuration
Pick fonts, colours and a style preset, and get a full design-token system. Type scale, colour scales, WCAG contrast and a live preview — exported as CSS, Tailwind, JSON tokens, a Figma file or an AI prompt.
Type scale
Pick heading and body fonts from Google Fonts, then a base size and a modular ratio.
50–700 scales
Choose a primary, accent and neutral; the tool builds full light-to-dark shade scales.
Style + font presets
Click a label like “Fintech” or “Editorial” for a matching colour and font theme. Everything stays editable.
Seven outputs
CSS variables, Tailwind config, W3C JSON tokens, a Figma token file, an accessibility report, an AI prompt, and “Apply with AI”.
A design system is one set of decisions, not a gallery. The generator picks a coherent scale, but the value is keeping it consistent across the product — use “Share configuration link” to send your exact system to a teammate. Everything runs in your browser.
Frequently asked questions
Is this free?
Yes — no account, no limits, no watermark.
Does anything get uploaded?
No. Your tokens and colours never leave the device.
How do the presets work?
Each style label maps to a curated colour and typography theme, and font presets swap the heading and body pairing. Change any font, colour or ratio and the tokens update live.
Which export should I use?
CSS variables for hand-written CSS, Tailwind config for Tailwind, JSON tokens for a W3C pipeline, Figma for design tooling, or the AI prompt to generate components.
Can I share my design system?
Yes — “Share configuration link” copies a URL that recreates your exact fonts, colours and tokens.
Related tools
Check a specific colour pair with the colour contrast checker, build your palette on the colour wheel & palette generator, or blend into a CSS gradient. For full-featured design software, browse the directory of 697 tools.