Neutral palette

The whites, off-whites, grays, near-blacks and low-chroma browns that do the unglamorous work: page backgrounds, card surfaces, dividers, body text, disabled states. In a typical interface they cover most of the pixels, which is exactly what lets one accent color mean something. Build them as a ramp of 9 to 12 evenly spaced lightness steps so you always have the next step up or down when a surface needs separating.

Good neutrals are rarely pure gray. Pull a small amount of chroma toward your brand hue (0.005 to 0.02 in OKLCH terms) and the whole product stops looking like a default template. Warm neutrals read human and editorial, cool neutrals read technical and clinical, and the choice should match the accent sitting on top of them.

Gotcha: pure #000000 on #ffffff is not wrong, it is the maximum contrast you can buy, and plenty of designs want exactly that. But many people find the glare and vibration tiring over long reading sessions, so a near-black around 15% lightness on an off-white is a common comfort and taste call. Treat it as a choice, not a rule, and re-test contrast after you soften either end. And dark mode is not the light ramp flipped: perceived contrast changes at the dark end, so both the lightness spacing and the chroma need retuning by hand.