Design Starter

Your scales

The outlined step is the color you picked; the rest are generated from it. Status colors are fixed on purpose: red means error everywhere on the internet, so there is nothing to decide.
One family; headings are the same font, heavier. Body is 16px, fixed. Each heading is the one below it × the ratio, rounded to 4px.

Your scale

Prompt for your agent

One prompt, new project or existing. Paste it into Claude Code, Cursor, or whatever builds your UI. It carries every value and tells the agent to set up the tokens, a DESIGN.md it reads before any UI work, a CLAUDE.md rule, a /design page that shows the whole system live, and a check script. On an existing project it inventories what is there first, then migrates it to the tokens one concern at a time.