About PickStyler

Thirteen either-or picks. One design system document. No account, no cost, no AI guessing what you meant.

The problem it solves

Starting a project means answering dozens of design questions before you write a line of interface code. What is the brand color? Which typeface pairs with it? How round are the buttons? How much air sits between elements? Most people either copy a template wholesale, or stall on the first question and never get to the tenth.

The hard part is not that these questions are difficult. It is that they are hard to answer in the abstract. Nobody can name their brand color from a blank text field. But almost everybody can look at two colors side by side and say which one feels closer.

How it works

PickStyler never asks an open question. Every screen shows exactly two options and asks you to pick one. Your pick narrows the next pair. After thirteen rounds the answers are specific enough to write a full design system document.

Color is the clearest example. The first round shows two hues on opposite sides of the color wheel. Whichever you pick becomes the new center, and the next pair is drawn from half the remaining range. Four rounds of halving take a 360° wheel down to a window of roughly 22° — close enough to call it your color. It is a binary search, but you experience it as looking at two swatches.

The guide walks through all thirteen rounds and explains what each one decides.

What you get

The output is a single Markdown file, DESIGN.md, structured after the Material Design 3 token model. It contains:

• a key color with its full light and dark theme token roll, as hex values and CSS custom properties
• a font pairing with a complete type scale — role, size, weight and line height
• a spacing system on a 4px grid, scaled by the density you chose
• elevation levels with real box-shadow values
• a shape scale — corner radii for buttons, cards and inputs
• component rules for navigation, buttons, cards, inputs, icons and footers
• responsive breakpoints and a collapsing strategy
• do's and don'ts, plus a note on which decisions are still open

It is written to be handed to a coding agent or a developer as-is. That is the point of the format: prose explains the intent, tables carry the values, and code blocks are ready to paste.

What it is not

There is no language model anywhere in this product. Every value in your document is computed — hues from the OKLCH color space, tonal palettes from the Material Design 3 algorithm, scales from fixed ratios. The same picks always produce the same document. Nothing is generated, nothing is guessed, and nothing is sent to a server, because there is no server: the whole wizard runs in your browser.

It also will not replace a designer. Thirteen picks give you a coherent, defensible starting point — consistent tokens, sensible contrast, a real type scale. What they cannot give you is the judgment that comes from knowing your users. Treat the document as a foundation to argue with, not a verdict.

Cost

Free. There is no account, no sign-up, no email capture, no paid tier and no usage limit. You can run the wizard as many times as you like and download every result. The site carries advertising to cover its costs.

Who made it

PickStyler is built and maintained by Geko, an independent design studio. If something is broken, unclear, or you think a pick is asking the wrong question, write to gekodesign@naver.com.