Greys are a design decision

Most of your page is grey

Count the surface area of a finished interface. Text, borders, backgrounds, dividers, disabled states, secondary labels — the overwhelming majority of the pixels are some kind of neutral, and the brand colour appears on perhaps two per cent of them.

Designers spend hours on that two per cent and pick the greys from a default palette. It is the wrong allocation of attention. The neutral ramp is the single most-used part of any palette, and it is where a design either feels coherent or feels like a template.

Pure grey looks dead

#808080 is exactly equal parts red, green and blue, and beside any coloured element it looks lifeless, slightly dirty, and disconnected from the rest of the page.

The fix is to tint the neutrals — to pull them very slightly towards a hue, usually the brand hue or its complement. Very slightly is the operative phrase. In OKLCH terms, a chroma of 0.005 to 0.02 is the useful range: enough that the grey relates to the palette, not enough that anybody would call it blue.

:root {
  --grey-50:  oklch(0.98 0.004 255);
  --grey-100: oklch(0.95 0.006 255);
  --grey-300: oklch(0.85 0.008 255);
  --grey-500: oklch(0.62 0.010 255);
  --grey-700: oklch(0.44 0.012 255);
  --grey-900: oklch(0.22 0.010 255);
}

The hue angle stays constant and the chroma rises slightly through the middle, which is where a tint is most visible and most useful.

Warm and cool, and what they actually do

A neutral tinted towards blue reads as cool, clinical, technical. One tinted towards orange or yellow reads as warm, paper-like, softer. This is one of the few claims in colour folklore that survives contact with practice, probably because it is a comparison within a page rather than an absolute claim about a hue.

What it is not is a rule about your subject matter. A warm neutral on a financial product is not wrong; it is a decision that makes the product feel like a document rather than a terminal. Choose deliberately and stay consistent, because mixing warm and cool greys in one interface produces a specific kind of muddiness that is very hard to diagnose after the fact — the page looks slightly dirty and nobody can say which element is at fault.

The diagnostic: put every grey in the design side by side as swatches, large. Mixed temperatures become obvious immediately and are invisible when the greys are scattered across a layout.

How many steps

Nine or ten is the working standard, usually numbered 50 through 900. That gives you:

• 50-100 — page and card backgrounds.
• 200-300 — borders, dividers, disabled backgrounds.
• 400-500 — placeholder text, disabled text, icons.
• 600-700 — secondary text.
• 800-900 — primary text.

What matters is that the steps are perceptually even, which is exactly what a perceptually uniform space gives you and what an HSL ramp does not. Built in HSL, the steps at the light end are visually almost identical and the steps at the dark end jump.

The dark end needs more room

One practical asymmetry. Near black, small lightness differences are harder to see than the same differences near white — and ambient light in a real room, the flare from the contrast formula, washes out the dark end further.

So a ramp that is even by the numbers may still look compressed at the bottom in practice. In dark interfaces this matters a great deal, because three or four of your surface levels all live down there. Expect to spread the dark end further apart than the arithmetic suggests, and check it in a bright room rather than a dim one.

The borders problem

A specific, common failure: borders set from the neutral ramp at a step that looks right on a large monitor in a dark office, and which disappears entirely on a phone in daylight.

A 1px border needs more contrast than a filled area to remain visible, because it is thin. Interface components carrying information require 3:1 under WCAG 1.4.11, and a decorative divider does not — but a divider nobody can see is not doing its job either. If a border is structural, give it at least 3:1 against both surfaces it separates. If it keeps disappearing, replace it with a change of background, which is the stronger figure-ground device anyway.