color
three primaries, ink and paper. flat, saturated and used in a fixed ratio.
the core palette
six values and nothing else in the interface.
usage ratio
a typical screen. paper carries half of it, ink a fifth, and the three primaries share the rest. if red is more than a tenth of what you see, there is more than one call to action.
semantic roles
build with the roles, not the raw colors, so a change in one place carries everywhere.
| token | value | use |
|---|---|---|
--bg | paper | page background |
--surface | white | cards, fields, bars |
--text | ink | all body and heading text |
--border | ink | every rule and outline, 3 px |
--action | red | the primary button, destructive confirms |
--on-action | white | text on red |
--emphasis | yellow | selected, hover, highlight |
--on-emphasis | ink | text on yellow |
--structure | blue | focus ring, progress, info |
--on-structure | white | text on blue |
--inverse-bg | ink | dark panels and footers |
--inverse-text | white | text on ink |
--inverse-accent | yellow | headings and links on ink |
--muted | grey | disabled borders only, never text |
.button-primary { background: var(--action); color: var(--on-action); border: var(--rule); }
.card { background: var(--surface); border: var(--rule); }
.selected { background: var(--emphasis); color: var(--on-emphasis); }contrast
| pair | contrast | verdict |
|---|---|---|
| ink on paper | 15.05 : 1 | aa text |
| ink on white | 17.31 : 1 | aa text |
| ink on yellow | 10.10 : 1 | aa text |
| white on red | 4.37 : 1 | large text only |
| white on blue | 7.49 : 1 | aa text |
| white on ink | 17.31 : 1 | aa text |
| yellow on ink | 10.10 : 1 | aa text |
| ink on red | 3.96 : 1 | large text only |
| ink on blue | 2.31 : 1 | decorative only |
| yellow on blue | 4.37 : 1 | large text only |
| red on paper | 3.81 : 1 | large text only |
| blue on paper | 6.52 : 1 | aa text |
| yellow on paper | 1.49 : 1 | decorative only |
| grey on paper | 1.69 : 1 | decorative only |
computed with the wcag 2.1 formula. text needs 4.5 : 1, or 3 : 1 at 24 px and larger. red and blue on paper work for large display type and for shapes, not for body text. grey is never used for text.
the studio wheel
the twelve-step wheel lives in the color studio and in illustration. it is not a ui palette: interface color stays with the six core values.
the inner triangle marks the three primaries. secondaries sit between them, tertiaries between those. the hexes are in tokens.json under color.studio.
rules
- one accent per element.a button is red, or yellow, or ink. never two of them on one object.
- red is for the one thing to do.one red button per screen. if two things compete, one of them is not primary.
- yellow says selected, hovered or important.it is the only color allowed to change on interaction.
- blue is structure.focus rings, progress, meters and informational panels.
- no gradients, no tints, no opacity in ui.if a surface needs to recede, make it paper; if it needs to come forward, give it a border.
- inverse panels are ink.a dark block uses ink with white text and yellow accents. there is no separate dark theme in version 1.