01 Typography
02 Presets
03 Colours
04 Live preview
05 WCAG contrast
06 Export · configuration
Pick fonts, colours and a label preset, and get a full design-token system. Typography scale, colour scales, WCAG contrast and a live component preview — exported as CSS, Tailwind, JSON tokens, a Figma file or an AI prompt.
Type scale
Pick a heading and body font from Google Fonts, set a base size and a modular ratio (Major Second to Perfect Fifth) for a consistent type scale.
50–700 scales
Choose a primary, accent and neutral; the tool builds full light-to-dark shade scales, integrated with the palette generator’s colour model.
Style + font presets
Click a style label like “Fintech” or “Editorial” and the generator applies a matching colour + font theme. Separate font-pairing presets too. Everything stays editable.
Seven outputs
CSS variables, a Tailwind config, W3C JSON tokens, a Figma token file, an accessibility report, an AI prompt, and “Apply with AI” — copy ready to paste.
A design system is one set of decisions, not a gallery. The generator picks a coherent scale, but the real value is keeping every colour and size consistent across the product — a system only helps if the team actually uses it. Use the “Share configuration link” button to send your exact system to a teammate.
Everything runs in your browser. Nothing is uploaded or stored on our servers.
Frequently asked questions
Is this free?
Yes — no account, no limits, no watermark.
Does anything get uploaded?
No. It runs entirely in your browser. Your tokens and colours never leave the device.
How do the presets work?
Each style label maps to a curated colour and typography theme, so picking “Fintech” or “Editorial” instantly applies a matching starting point. Font presets swap the heading/body pairing. You can then change any font, colour or ratio and the tokens update live.
Which export should I use?
CSS variables for hand-written CSS, the Tailwind config for Tailwind, JSON tokens for a W3C-compatible pipeline, Figma for design tooling, the accessibility report to check the key contrast pairs, or the AI prompt to generate components with a design AI.
Can I share my design system?
Yes — “Share configuration link” copies a URL that recreates your exact fonts, colours and tokens when opened.
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 524 tools.