Most interfaces we are asked to review have the same problem: everything is shouting. Every status has a colour, every button is filled, every card has a coloured top border. After a minute the eye stops reading colour altogether.
We start the other way round. The page is paper, the text is ink, and borders are a single hairline. Then we ask which few things deserve an accent, and we give each of them one meaning that never changes.
A short palette of meanings
Seven accents are enough for almost any product. Blue marks selection and links. Green means done or up. Coral is reserved for emphasis and for things that went wrong. Violet labels anything suggested by a machine, so readers know what a person wrote and what they did not.
selecteddonefailed close to limitexpiringsuggestedneutral
Colour is a promise. Use it only where you can keep it.
Tints, not fills
An accent rarely appears as a solid area. Instead it is mixed into the card colour at around thirteen percent, and the text on top is the accent pulled towards the ink. The result reads clearly in both light and dark themes without ever turning into a warning sign.
- Solid fills only for the single primary action on a screen.
- Hairline borders instead of heavy outlines.
- Soft, warm shadows that suggest depth rather than draw edges.
color-mix().
One serif, used sparingly
Display headings use a single serif at regular weight. Everything else, from buttons to body copy, is set in a quiet sans. A single italic word in coral is the only ornament a heading gets.
Read more in our notes on typography.