Layer 01
Palette engineering
Seed colour to full role-based ramp: surfaces, ink, accents, states and borders, checked against WCAG contrast thresholds before anything ships.
- OKLCH ramps
- Role tokens
- Contrast audit
DesignDNA · free system generator
One brief in. A complete website design system out.
Give DesignDNA a topic, an industry, an audience, a mood and a seed colour. It returns a named visual direction with tokens you can paste straight into a stylesheet: palette, type scale, spacing rhythm, button matrix, card architecture, hero structure, navigation pattern, radius ladder, shadow ladder, depth treatment, motion language and responsive rules.
Free Nothing here is for sale. There is no pricing page, no trial clock and no card field — just a sign-in so your briefs and generated systems come back to the right inbox.
- Token groups
- 13
- Export formats
- CSS · JSON
- Cost
- Free
Five layers of a generated system
Every DesignDNA output is assembled from these five layers. Each guide explains what the generator decides, how it decides it, and how to override the result by hand. The guides are open to everyone — no account needed to read them.
Layer 02
Typography & scales
Pairing logic, ratio selection, fluid clamp() steps, measure and line-height rules, plus the loading strategy that keeps the first render honest.
- Modular scale
- Fluid steps
- Variable fonts
Layer 03
Spacing & layout
A 4px base, six named steps, container widths, breakpoint set and the reflow rules that keep a layout intact all the way down to a 320px viewport.
- 4px base
- Grid recipes
- 320px floor
Layer 04
Components & cards
Button matrix, five card archetypes, hero architectures and navigation patterns — with the trade-offs of each and when the generator picks which.
- Button matrix
- Card archetypes
- Hero structures
Layer 05
Motion & depth
Radius ladder, elevation ladder, the 3D aesthetic, easing curves, duration bands and a reduced-motion fallback that is written at the same time as the animation.
- Elevation
- Easing bands
- Reduced motion
Free tool
Sign in and run a brief
Send a topic, an industry, an audience, a mood and a seed colour. You get a named direction and a token file, in English, ready for review — at no cost.
- Named direction
- Token file
- No payment
How a brief becomes a system
The generator is deterministic in structure and opinionated in taste. The same five inputs always produce the same thirteen token groups, so two designers on the same brief can compare outputs line by line.
01
Read the brief
Topic, industry, audience, mood and seed colour are normalised. An optional reference style narrows the search space — for example "editorial print" biases the type pairing toward a serif display with a neutral sans for UI.
02
Fix the constraints
Contrast floors, minimum touch target, spacing base and the breakpoint set are locked before any aesthetic decisions. Constraints first means the pretty layer can never quietly break the readable layer.
03
Name the direction
A two- or three-word name is generated — a shared label a team can argue with. "Ember Glass Architecture" tells you more in a stand-up than "v3-final-blue".
04
Emit the tokens
Output is CSS custom properties plus a JSON mirror, with component notes in plain English: which card archetype, which hero structure, which navigation pattern, and what to do below 768px.
| Group | Emits | Typical count |
|---|---|---|
| Design name | Direction label and one-line rationale | 1 |
| Palette | Surface, ink, accent, state and border roles | 18–26 tokens |
| Typography | Families, weights, fluid size steps, line heights | 8–10 steps |
| Spacing | Base unit and named steps | 6–8 steps |
| Buttons | Variants × sizes × states | 3 × 3 × 4 |
| Cards | One archetype plus density rules | 1 archetype |
| Hero | Structure, media treatment, CTA order | 1 structure |
| Navigation | Desktop pattern and mobile fallback | 2 patterns |
| Radius | Ladder from control to container | 4–5 steps |
| Shadow | Elevation ladder with matched borders | 5 levels |
| Depth / 3D | Layer count, blur, parallax budget | 3 layers |
| Animation | Durations, easings, reduced-motion fallback | 4 bands |
| Responsive | Breakpoints and reflow instructions | 4 breakpoints |
Free, with a sign-in — and that is the whole model
We are not selling a plan, a seat or an upgrade. The only thing standing between you and the generator is an email address, and the only reason we ask for one is so the output has somewhere to go.
01
No price, no tiers
Every one of the thirteen token groups, both export formats and every guide is available to every signed-in account. There is no "pro" version holding back the useful half, and no feature that unlocks later for money.
02
Passwordless sign-in
Enter an email address with your brief and we send a one-time sign-in link. No password to invent, no card details taken, and no payment processor is involved anywhere on this site.
03
The output is yours
Token files, component notes and stylesheets come with a perpetual, royalty-free licence — commercial projects included, no attribution required. Delete the account whenever you like; the files stay with you.
Ready when you are
Free Open the brief form, add an email address, and the generated direction comes back with your sign-in link.