Building a neutral scale that actually works in a design system

Neutral palettes look like the safest part of a design system until they are not. A neutral scale that seems fine in isolation creates visual problems when used at scale: text that feels too cool against warm imagery, backgrounds that make UI controls look pasted-on, and a general sense that the design lacks coherence even though each individual component looks correct. Building a neutral scale with intention — choosing the right undertone, defining the right number of steps, and anchoring it to the system's primary hues — is one of the highest-leverage decisions in a design system.

Design Systems Neutral Colors Typography

Highlights

The undertone of your neutral scale — warm (yellow/red bias), cool (blue/green bias), or true neutral — should be chosen in relation to your brand primary hue, not independently. A cobalt-blue primary with a warm neutral creates a tension that makes the UI feel inconsistent: the primary screams digital and cool, the background mutters warm and analog. The convention in digital design systems is to use a cool-to-neutral gray scale for blue-primary products (Google, Atlassian, Salesforce) and a warm gray scale for products with warmer primaries (Airbnb's warm gray, Mailchimp's warm off-white). This is not a hard rule, but the more saturated and chromatic your brand primary, the more the neutral scale's undertone creates or destroys coherence.

Most mature design systems use 10-12 neutral steps (Gray-50, Gray-100 ... Gray-900, Gray-950 in Tailwind's convention). The density of steps near the ends of the scale (very light and very dark) is more important than steps in the middle. Very light neutrals (50, 100, 200) define the entire range of background surfaces in light mode — getting these three steps right determines whether the UI feels layered or flat. Very dark neutrals (800, 900, 950) define dark mode surfaces and text-on-light contrast. The middle range (400-600) handles borders, disabled states, and placeholder text. If you can only spend time tuning three areas of a neutral scale, tune the light end, tune the dark end, and make sure your mid-tones are monotonically decreasing in lightness (perceptual lightness jumps between adjacent steps create visual discontinuities in gradients and hover states).

Pure HSL grays (hue=0, saturation=0) look artificially flat in interfaces that contain chromatic content because the human visual system adapts to chromatic context and reads pure neutral grays as slightly colored by contrast. The fix — used by almost every major design system — is to add a small amount of chroma to neutral steps (typically 2-6% saturation in HSL, or a chroma of 2-5 in OKLCH). This chroma addition coordinates the gray with the primary hue direction, making the neutral feel like it belongs in the same color world as the chromatic elements. Figma's Gray palette, Apple's system grays, and Google's Material 3 neutral palette all use slightly chromatic neutrals. The effect is subtle at any single step but cumulatively produces a neutral palette that feels unified rather than generic.

Warm vs. cool neutrals: the choice that determines everything

The practical difference between a warm neutral (Gray with a yellow/red undertone) and a cool neutral (Gray with a blue/green undertone) becomes visible at two extremes: very light values (where the undertone tints the background) and very dark values (where the undertone tints the near-black text and dark surfaces). Mid-range grays are close enough to true neutral that the undertone is less perceptible. For choosing undertone direction: analyze the dominant hue of your primary palette (cool primaries → cool neutrals, warm primaries → warm neutrals), analyze the content your UI will display (photography-heavy interfaces often use warm neutrals because warm-tinted backgrounds are more flattering to skin tones), and consider your product's emotional register (warm neutrals feel more approachable and human, cool neutrals feel more technical and precise). When in doubt, slightly warm neutrals are more universally flattering in light mode; slightly cool neutrals work better in dark mode (dark cool grays feel more like genuine darkness, while dark warm grays can feel muddy).

Defining the right number of steps

The minimum usable neutral scale has 5 steps: background (lightest), surface, border, secondary text, primary text. This minimum works for simple products but quickly becomes limiting as UI complexity increases. A 10-step scale (50 through 900 in Tailwind convention) handles almost all use cases. A 12-step scale adds 950 (near-black) and 25 (near-white) for products that need those extremes. Beyond 12 steps, you are more likely creating naming complexity than solving real design problems. The test for whether your scale has enough steps: can you represent all of these states uniquely — default background, elevated surface (card), border, divider, disabled element, placeholder text, secondary text, primary text, and inverse text (white on dark)? If two of these states share the same neutral step, you need more steps in that region of the scale.

Anchoring neutrals to your brand hue

The most cohesive neutral scales have a subtle hue relationship with the product's primary color. The method: instead of hue=0 (pure gray) as the HSL base, use hue=primary_hue with saturation set to 3-8% for light steps and 5-12% for dark steps. This produces grays that are perceptually near-neutral but tonally coordinated. For a cobalt-blue primary (hue≈220), neutral steps built on hue 220 at low saturation produce grays with a slight blue-slate quality — coherent with the primary without being obviously colored. This technique requires working in HSL or OKLCH rather than hex, and verifying that each step meets your contrast requirements against the steps it will appear with. Most design tokens tools (Style Dictionary, Theo) allow you to define neutrals parametrically so the hue relationship is maintained if the primary hue changes.

Testing your neutral scale

The tests that reveal neutral scale problems before they ship: (1) Render all 10 neutral steps in a horizontal bar at full width — look for non-monotonic lightness jumps that will look wrong in hover state transitions. (2) Place body text (typically Gray-900 or Gray-950) on each background step — verify that text on Gray-200 and Gray-300 (common card backgrounds) still meets WCAG AA contrast. (3) Place your primary button color on Gray-50 and Gray-100 — verify it doesn't look pasted-on. (4) Render a UI with the neutral scale in both light and dark mode — check that dark mode neutrals (inverted scale) produce appropriate surface hierarchy. (5) Render a photograph against your lightest neutral background — check that the transition between photograph edge and background reads as a deliberate contrast rather than an accidental color clash.

Newer issue

Color in print vs. screen: what changes and what to do about it

2028-02-04

Older issue

Color and typography: contrast ratios, optical size, and legibility at scale

2028-02-18