Skip to content
UX Atlas
UI foundationCraft conventionFoundational

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 page
  1. Definition
  2. Pure grey is rarely the right choice
  3. What a neutral ramp needs to cover
  4. In practice
  5. Continue from here

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.

In practice

One temperature per product

Design systems

A 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.

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.