Design System Generator
Pick or randomize one colour. ColorGene derives a complete system from it — scales, harmony, semantic roles, accessibility picks, spacing, radius, type and shadows — and you can watch every step below.
Drift continuously rotates the base hue so you can watch the entire system (and every panel below) re-derive itself in real time.
Fine-tune generation
Each control feeds the engine — see the effect in “How it's built”How it's built — live pipeline
Every number here is computed from your base colour right now. Values flash when they change.
Change feed
Generated palette
Click a swatch to copy. dot = this stop is used by a semantic role; hover a role in the mapping table to see where it comes from.
Semantic token mapping light
Role → scale step → resolved colour (auto-picked steps are marked )Design tokens
Radius, spacing, type, leading, tracking and shadow — all derived from the colour's temperature, energy and brightness, then scaled by your sliders. These very panels use the tokens they display.
Accessibility
WCAG contrast of every text/background pair in the current theme, plus colour-blindness simulation of your palette.
Contrast report
Colour-blindness simulation
Pairs whose simulated ΔE falls under 12 are flagged as hard to tell apart — don't rely on colour alone for those.
Live preview
A working dashboard built only from the generated variables. Charts tick in real time.
Revenue +0%
$0
Active users live
0
Server load
0%
Traffic overview
Status alerts
Form & controls
Live activity
streaming| ID | Client | Amount | Status |
|---|
Export
The code below regenerates live as you change anything above — light and dark themes both included.