Neutral Color

Accent colors get a meeting; grays don't. Nothing about them attracts discussion, so whoever is building a screen drops in a slightly lighter or darker value as needed. They arrive one at a time, and nobody notices while they accumulate. A design review catches a new blue immediately and a new gray almost never.

Counting the gray values in the Pagedeck code, Noa found seventeen. The count wasn't the problem — the result was. The gray used for secondary text differed screen by screen, so on some screens it read and on others it sank into the background.

That's why neutrals get named and managed separately. They're the most frequently used colors in the product, so when they scatter the whole thing goes muddy, and going muddy is hard to see.

Build steps from light to dark and choose only from within them. Five things get decided.

1. Fix the number of steps first. Six or eight covers most screens. Adding one more is nearly always avoidable with a step that already exists.
2. Assign a step to each role. Body text takes the darkest step, secondary text the one below it, borders a light step, the page background the lightest. Written down, picking a gray stops being a decision on new screens.
3. Decide whether to use pure achromatic gray or tint it slightly. A gray with a trace of blue looks less detached when it sits beside the brand range. Keep one set per product.
4. Measure contrast ratio while choosing the steps, not after. Body text against its background is commonly held to 4.5 to 1 or better, and postponing the check means rebuilding the steps.
5. A dark theme is not the light steps reversed. The brightest white on a dark background makes text look like it's bleeding, so body text uses a step below the top.

Underpinning all of it is the agreement that no gray outside the color palette gets used. Allow the exception once and the next screen is back to seventeen.

"We have seventeen grays. Let's cut to eight steps and assign a number to each role."

Reducing the values and assigning the roles have to happen together.

"That step on secondary text gives a contrast ratio of 3 to 1. It needs to go one step darker."

Choosing a neutral turns into a question of whether text can be read.

"This border color isn't in the palette. Change it to one of the defined steps."

Asking that no exception be created.

Noa's reorganization into eight steps brought seventeen values down to eight. Along the way, four screens where secondary text sank into the background turned up and went one step darker.

There was an unplanned result too. With backgrounds and borders quieted down, the primary color used for key actions stood out more than before. The proposal to make the accent color stronger disappeared on the spot.