Design tokens for developers who don't design

You do not need to be a designer to make a UI feel consistent. You need fewer choices.

Start with five decisions

• One spacing scale.
• Two font families, at most.
• A type scale with six steps.
• One accent colour.
• One border radius.

Name by purpose

--color-muted survives a rebrand; --color-grey-500 does not. Tokens should describe intent, not appearance.

@theme {
  --color-ink: #070707;
  --color-paper: #ecebe6;
  --color-accent: #c6ff3d;
}

Delete the exceptions

Every one-off margin is a small inconsistency the eye picks up. When a design needs a new value, add it to the scale or do not use it.

Ship it as code

Tailwind's @theme turns these tokens into utilities, so the system is the path of least resistance.