The 60-30-10 ratio is a heuristic, not a law — but it points at something real

Interior designers talk about color distribution as 60% dominant, 30% secondary, 10% accent. The specific numbers are not sacred, but the underlying logic — that a small high-saturation color should be balanced by a large neutral — applies cleanly to interface design.

Systems Palette UI

Highlights

The 60-30-10 heuristic works because high-saturation colors are perceptually heavy — they attract attention regardless of size. A small accent dot can visually dominate a large neutral surface if the saturation gap is large enough.

In interface design, the ratio translates roughly to: background surfaces (60%), content surfaces and borders (30%), interactive and semantic accents (10%). Violations look like accent overuse — too much high-saturation color reduces its ability to signal importance.

The practical implication: if everything in the interface feels loud, the fix is rarely to reduce the accent color — it is to increase the neutral surface area so the accent has breathing room.

Why proportional color logic exists

Color has perceptual weight. A highly saturated color demands attention with a force disproportionate to its area — a small red button will draw the eye before a large gray panel, even though the panel occupies ten times the space. Proportional color logic exists to manage this asymmetry: by limiting the area of high-weight colors, designers preserve their ability to signal importance. When everything is saturated, nothing can signal importance. The 60-30-10 framework describes a distribution that preserves this signal — the 10% accent exists to be noticed precisely because 90% of the composition is quieter.

Translating the heuristic to interface design

The exact ratios shift between interior design and screen design, but the logic transfers. Backgrounds and large content surfaces should be low-saturation — near-white, warm gray, or deeply desaturated in dark themes. Secondary elements like cards, borders, dividers, and secondary text take a slightly more present tone, still restrained but visually distinct from the background. Interactive elements — buttons, links, highlights, status indicators — get the accent color, applied sparingly enough that every instance of it reads as intentional. The Quiet Luxury collection is designed around this distribution: a pale warm neutral anchors the surface, a muted mid-tone handles secondary depth, and a slightly richer warm accent provides the interactive signal without ever becoming loud.

Accent overuse and how to identify it

Accent overuse is easy to diagnose: convert the screen design to a hue map — a view that shows only the saturation and hue of each element, ignoring lightness. In a well-balanced design, most of the map will be gray or near-gray, with the accent color appearing in small, deliberate clusters around interactive elements. In an overloaded design, the saturated color will appear everywhere — in decorative backgrounds, illustration fills, progress indicators, chips, tags, and banners. Each individual use may seem justified, but the collective effect dilutes the accent's ability to guide attention. The fix is to reduce accent usage in decorative and non-interactive contexts, not to change the accent color itself.

Newer issue

Value contrast does more work than hue contrast — and most palettes get this backwards

2026-06-18

Older issue

Why semantic color tokens are worth the extra naming effort

2026-07-02