Free design system generator

Turn one color into an entire design system.

Generate accessible palettes, semantic tokens, light and dark themes, and production-ready code in seconds.

Try:

No account. No upload. Everything runs in your browser — or explore the individual tools.

Step 1
One color
HEX, RGB, HSL or a picked swatch
Step 2
Color scale
Perceptual 50–950 in OKLCH
Step 3
Semantic tokens
background → primary → status roles
Step 4
Light + dark
Independent accessible themes
Step 5
WCAG checks
AA / AAA measured, never assumed
Step 6
Production code
CSS, Tailwind v4, shadcn/ui, JSON

Real interfaces, not swatches

This dashboard is rendered live from the default example color #47003A. Open the generator to change it and watch every surface, badge and button follow.

Open in generator

Overview

MRR

$48,210

+12.4% sample

Active customers

1,284

+3.1% sample

Churned

-0.8% sample

Recent invoices

Customer	Amount	Status
Harbor & Co	$1,240.00	Paid
Northwind Labs	$860.00	Pending
Bluepeak GmbH	$2,410.00	Paid
Summit Studio	$310.00	Overdue
Ridgeway LLC	$980.00	Draft

Customer namePlan

Notifications Email None

Built like part of your team's toolchain

Perceptual color engine

Scales are generated in OKLCH so every step is evenly spaced to the eye — not arbitrary white/black mixes. Your brand hue survives end to end.

Semantic design tokens

Stop shipping raw hex values. Get background, surface, primary, border and status roles that map directly onto real component decisions.

Accessibility built in

Every key pairing is measured against WCAG 2.x thresholds for normal and large text. Failing pairs offer a nearest-accessible fix in one click.

Thoughtful dark mode

Dark themes are constructed independently — lighter primaries, tinted neutrals, verified foregrounds — never a mechanical inversion.

Live interface previews

Judge colors where they matter: a SaaS dashboard, marketing page, storefront and mobile app all render with your tokens instantly.

Exports developers can ship

Copy CSS variables, DTCG-style JSON, Tailwind CSS v4 theme output or current-convention shadcn/ui variables straight into your codebase.

Free color & token tools

The same engines behind the generator, available as focused single-purpose tools.

One creative decision. Something you can ship.

Pick a starting color and walk away with scales, tokens, themes, accessibility results and framework-ready code.