Neutrals
Most of an interface is neutral, which makes the grey ramp the most used and least discussed part of a palette.
Definition
Neutrals are the low-chroma colours that carry text, surfaces, borders and dividers. A well-built neutral ramp does more visible work than any other part of a palette.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Building any palette.
- Auditing contrast on secondary text.
- Defining surface and border tokens.
- Defining the greys, which is usually done last and carries most of the screen.
Common mistakes
- Mixed warm and cool neutrals.
- Secondary text below 4.5:1.
- Too many nearly identical neutral steps, which nobody can choose between.
Pure grey is rarely the right choice
Neutrals with a slight hue tint feel deliberate and cohere with the rest of the palette. Warm neutrals, tinted towards orange or yellow, read as approachable and human. Cool neutrals, tinted towards blue, read as technical and precise.
The important rule is to pick one temperature and hold it. Mixing warm and cool greys in the same interface is a subtle, persistent source of visual discomfort that is difficult to diagnose because each individual colour looks fine.
What a neutral ramp needs to cover
- Page background and one or two elevated surface levels.
- Border and divider values, which need 3:1 against their adjacent surface when they carry meaning.
- Three text levels: primary, secondary and disabled, with the first two meeting contrast requirements.
- Hover and pressed surface tints.
- Overlay and scrim values, usually defined with alpha rather than as solid steps.
What a neutral ramp has to cover
Neutrals occupy most of the screen, so gaps here cause more trouble than a missing accent ever does.
| Role | Requirement |
|---|---|
| Page background | The base everything else is measured against |
| Raised surface | Distinguishable from the page without a border |
| Sunken surface | For wells and insets, still able to hold body text |
| Border | At least 3:1 against both adjacent surfaces |
| Strong border | For form controls, which are functional boundaries |
| Primary text | Comfortably past 4.5:1 on every surface above |
| Secondary text | Still past 4.5:1. This is where most systems fail |
In practice
- i.
One temperature per product
Design systemsA product mixing a warm grey background with cool grey borders looks subtly wrong in a way nobody can name. Standardising the ramp resolves it immediately.
- ii.
Secondary text as the recurring failure
Where ramps fall shortTeams choose a quiet grey for metadata against white, then reuse it on a tinted surface where it drops below the threshold. Defining the quiet step against the darkest surface it can land on removes the whole class of bug.
Local chart
FND·025 · Region II · Grid D2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Related concept
Connected closely enough to change how you apply this.
- Design TokensSYS·001 · Design system
- Borders and DividersFND·047 · UI foundation
- Color SystemsFND·026 · UI foundation
- Color Theory for InterfacesFND·019 · UI foundation
- ContrastFND·002 · UI foundation
- Dark ModeFND·027 · UI foundation
- ElevationFND·048 · UI foundation
- LightnessFND·022 · UI foundation
- ReadabilityFND·036 · UI foundation
- SaturationFND·021 · UI foundation
- ShadowsFND·049 · UI foundation
- Typographic HierarchyFND·032 · UI foundation