Design › Train Your Eye › Build a Palette
Design · Train Your Eye · Lab 3 of 4

Build a palette.

A palette isn't a set of colours you like — it's a set of roles that hold together.

Pick one hue and the system builds the rest by role: a calm surface, readable ink, a primary, a support, and one accent for the action. Watch it paint a real UI, and check the contrast honestly. Then hit Roll chaos and feel what happens when colour has no system.

One hue in. A whole system out.
Drag the hue, choose how the accent relates, and read the contrast — the numbers that decide if text is legible.
New
Ship your ideas faster
The workspace that keeps your whole team in one flow, from first note to launch.
“We stopped losing decisions in chat.” — a team that switched last spring.
Start freeSee how it works

Drag the hue — everything else derives from it. Then read the contrast below.

The one number that matters: contrast. Body text needs a ratio of 4.5 to pass WCAG AA (7 for AAA). A gorgeous palette whose text fails contrast is a broken palette — that's why the check is live, not an afterthought.
← Lab 1 · Squint ← Lab 2 · Kern Lab 4 · Why the Tube map is genius — soon