How the picks work
Thirteen rounds, each one a single either-or. Here is what every round decides and why it comes where it does.
Why the order matters
The rounds run color first, then type, then shape, then density. That order is not arbitrary. Color is the decision everything else is judged against — a radius that looks friendly on a warm coral reads as childish on a cold slate. Type comes second because it sets the texture of every screen. Shape and density come last because they are adjustments, and adjustments only make sense once there is something to adjust.
Each preview also carries your earlier picks forward. By the time you are choosing a button radius, the buttons in front of you are already in your color and your typeface. You are never judging a decision in isolation.
Rounds 1–4 · Color
Color is decided on three separate axes, because a single one cannot describe a brand. Two rounds narrow the hue, then one round each setssaturation and lightness.
Round one shows six swatches spread evenly around the wheel, round two shows three inside whichever sixth you picked. Every swatch stands for a segment, not a point — the six segments together cover the full 360° with no gap, so nothing is excluded by a pick. Two rounds leave a window of 20°, which is about where two patches stop reading as different colors.
The wheel is rotated by a random amount each time you start, so the six opening swatches differ from run to run. Rotation does not change the segment widths, so the coverage stays complete.
Round three sets saturation — Neutral, Muted, Balanced or Vivid. Neutralis the achromatic option: it reads as gray, and the hue you picked survives only as the gray's temperature, warm or cool. Round four sets lightness across three steps, which shifts the whole palette deeper or lighter.
All of it happens in the OKLCH color space rather than HSL, because OKLCH is perceptually uniform: a fixed lightness value looks equally light at every hue. In HSL, yellow at 50% lightness is visibly brighter than blue at 50%, which would make some pairs unfair.
From those three values the generator derives a full Material Design 3 tonal palette — primary, secondary, tertiary, surface and outline roles, in both light and dark themes. Brand colors double as text on surfaces, so each one is pushed until it clears a contrast margin above WCAG AA before it is written into the file.
Rounds 5–7 · Typography
Three rounds narrow a set of font pairings along three independent axes, each shown as sample text rather than a font name.
| Round | Axis | What it separates |
|---|---|---|
| 5 | Family | Serif or sans-serif — the single biggest fork in how text feels |
| 6 | Character | Dramatic or neutral — high contrast and personality, or quiet and utilitarian |
| 7 | Form | Geometric or humanist — drawn from circles and straight lines, or from the movement of a hand |
The result is a heading font and a body font that are designed to sit together, plus a full MD3 type scale: display, headline, title, body and label roles, each with a size, weight and line height.
Round 8 · Button shape
Corner radius on interactive elements. The scale runs 999px for a full pill, 12px for a soft rectangle, and 0 for a hard square corner. Buttons are the most-touched element in most interfaces, so they get their own round rather than inheriting the card radius.
Round 9 · Card radius
The same decision for containers: 4px is subtle, 16px is friendly, 28px is fully rounded. Buttons and cards are asked separately because the pairing carries meaning — pill buttons on square cards reads very differently from square buttons on pill cards.
Round 10 · Elevation
How much the interface uses depth. Flat leans on borders and background shifts to separate layers; elevated uses real shadows. Whichever you pick, the document ships a six-level elevation scale — from none up to a level-5 shadow — so you have a consistent ladder rather than one shadow value.
Round 11 · Spacing density
A multiplier on a 4px base grid: 0.75× compact, 1.0× cozy, 1.25× spacious. The base steps are 4, 8, 12, 16, 24, 32, 48 and 64px, and every one is scaled by your multiplier. Dense tools and data tables want compact; marketing pages and reading interfaces want spacious.
Round 12 · Icon style
Outline, filled or duotone. This sets the stroke and fill rules for the whole icon set so that icons drawn later still match the ones drawn today.
Round 13 · Input style
Bordered, filled or underline. Form fields are where a design system either holds together or falls apart, so the input treatment is captured explicitly rather than inferred from the card radius.
Reading your DESIGN.md
The download is a single Markdown file with eleven sections. The ones worth reading first:
- Colors — the key color, the full token roll for light and dark, and CSS custom properties you can paste into a stylesheet.
- Components — concrete rules for navigation, buttons, cards, inputs, icons and footers, written as instructions rather than descriptions.
- Do's and Don'ts — the constraints that keep the system coherent once other people start adding to it.
- Known Gaps — what thirteen picks could not decide. Read this before treating the document as complete.
The file is deliberately verbose. It is meant to be handed to a coding agent or a developer who was not in the room when the picks were made, so it explains intent alongside every value.
Starting over
The back arrow at the bottom left steps you back one round at a time, restoring the exact state you were in. The up arrow at the bottom right clears everything and returns to the start. Your progress is kept in the browser tab only, so closing the tab discards it — see the privacy page for what is stored and where.