Color Palette

Pick colors on the spot every time a screen gets designed and colors doing the same job start to drift apart. Grey multiplying into seventeen varieties is the classic case. The grey on body text, the grey on helper text, and the grey on borders were each chosen by eye, so later nobody can say which one belongs where.

The same thing happens to the brand color. Three screens have a blue button and the three blues are slightly different. Downstream, twenty color codes end up scattered through the code, so the day someone decides to darken the brand color starts with hunting for the places to change.

A color palette is the agreement to decide the colors in advance and use nothing outside them. It replaces an open choice with a choice among a few steps.

You don't pick one color; you build one family across several lightness steps. Numbering them from the lightest as 100, 200, and so on up to 900 is common. Then colors get discussed as steps rather than values: 100 for a background, 600 for a button, 700 for its pressed state.

The number of families usually stops somewhere between five and eight. One brand family, one set of neutrals, and three or four colors with fixed meanings cover most screens. Each family gets its role written down with it.

1. Specify which family and which step is the primary color, the one that stands for the brand and the main action.
2. Give each semantic color — success, warning, error — one fixed family.
3. For neutral colors, which cover backgrounds, text, and borders, pin the count at six or eight steps and assign a number to each role.

One agreement comes attached: no color from outside the palette. When a new color is needed, the palette changes rather than the screen. Without that rule, the list and the screens stop having anything to do with each other.

Splitting into steps also makes checking easier. Decide once which text steps are readable on a 100 background, and new screens don't have to measure contrast every time.

"That grey isn't in the palette."

A color chosen by eye slipped in, so pick from the defined steps.

"Make the pressed state 700, not 600."

Colors are being discussed as steps instead of values.

"Eleven families isn't a palette, it's a list."

The point was to narrow the choice and it isn't doing that.

When Noa rebuilt the palette at Pagedeck, she cut the grey steps from fourteen to eight and pinned body text to 800, helper text to 600, and borders to 300.

Theo carried those numbers straight across as the value names in code. Six months later, darkening the brand color meant editing one place: the palette.