Five pigments that never move.
Ink, petrol, chalk, ochre and claret. Taken off a wheat-pasted farm-shop poster and used for every piece of interface on this site. The season changes around them and they do not change at all, which is the only reason the site still looks like itself in January.
The five, with their values.
The pigments
- Ink #23211E
- Body copy, dark grounds, every headline12.9:1 on chalk
- Petrol #1D5C72
- Brand ground, links, the chapter accent6.0:1 on chalk
- Chalk #EDE6D6
- The default page ground. Never pure white—
- Ochre #E2871B
- The primary call to action, as a ground only2.1:1 on chalk — guarded
- Claret #B0292B
- Scarcity, destructive actions, the pub accent5.3:1 on chalk
The supporting steps
- Ink 2
- #35322DRaised surface on an ink ground
- Ink 3
- #4A463FBorders on an ink ground
- Chalk deep
- #E3DAC6The alternating band
- Chalk soft
- #F6F1E6A raised card on chalk
- Paper
- #FBF8F1The whitest this build goes. Never pure white
- Ochre deep
- #8F4F07The text-safe ochre, at 5.1:1 on chalk
Contrast, measured.
| Pairing | Ratio | Verdict |
|---|---|---|
| Ink #23211E on chalk #EDE6D6 | 12.9:1 | Passes AAA. This is body copy |
| Chalk #EDE6D6 on ink #23211E | 12.9:1 | Passes AAA. This is every dark band |
| Petrol #1D5C72 on chalk | 6.0:1 | Passes AA. Links and the chapter accent |
| Claret #B0292B on chalk | 5.3:1 | Passes AA. Scarcity and destructive actions |
| Chalk on petrol | 6.0:1 | Passes AA |
| Ink on ochre #E2871B | 5.9:1 | Passes AA. This is how ochre is used — as a ground |
| Ochre on chalk | 2.1:1 | Fails. Refused by the guard |
| Ochre deep #8F4F07 on chalk | 5.1:1 | Passes AA. The substitute the guard reaches for |
Why the interface refuses to follow the season.
It would be very easy to make the buttons go green in spring and orange in autumn. It would also be a mistake, and the reason is not taste.
An interface is a set of learned positions and colours. If the primary action is ochre in August and moss in March, nobody learns it, every page needs re-reading, and the accessible contrast pairings have to be re-derived four times a year — which is four times as many opportunities to ship something illegible.
So the poster palette is fixed, the field palette moves, and the boundary between them is the boundary between the thing you use and the thing you look at.
The furniture stays where it is. The weather changes outside the window.
The poster palette in numbers.
What the poster palette covers.
Poster palette
- Every button, field, border and rule
- All body copy, every headline, every caption
- Every legal notice and every price
- The header rail, the navigation and the footer
- Focus rings, error states and disabled states
Field palette
- The seasonal grounds
- The illustration plates
- The beast marks
- Chart series and data fills
- Anything that is allowed to be pretty rather than legible
Fixed
It does not move with the season.
Measured
Every pairing has a ratio, published.
Ochre is a ground
Never a text colour, anywhere.
Five plus six
Five pigments, six supporting steps.
Where it goes wrong, and what stops it.
Two pairings fail, both of them are tempting, and both are refused.
