What Is the 60-30-10 Rule in Design?

The rule

Divide the visible colour on a screen into three roles:

• 60% dominant. The background, the large surfaces, the space. On most websites this is white, off-white or a dark neutral. It sets the mood and lets everything else be read against it.
• 30% secondary. Structure and support: cards, panels, headers, secondary text, borders, illustrations. Usually a second neutral or a muted brand colour.
• 10% accent. The colour that means "act here" or "look here": primary buttons, links, active states, key highlights. Used rarely enough that it keeps its meaning.

The numbers are approximate. The idea is a clear hierarchy of colour use, with most of the design quiet and a small part loud.

Where it came from

Interior designers have used the proportion for decades: walls and floors as the dominant colour, furniture and textiles as the secondary, accessories as the accent. It transferred to graphic and then interface design because the underlying principle is the same: attention is a limited resource, and a colour that appears everywhere directs it nowhere.

Mapping it to an interface

On a typical marketing page: the page background and most of the whitespace (60%); the header, cards, section backgrounds, body text and secondary buttons (30%); the primary call to action, links and the one or two highlighted elements (10%). On a dashboard: canvas and panels (60%); data, labels, table rows, navigation (30%); alerts, selected states and primary actions (10%).

The accent is where the colour system earns its keep. If the brand's signature blue is also the colour of every heading, every icon and every border, the button that needs to be blue is one blue thing among fifty. If the blue appears only on things that can be clicked, the eye learns the rule in seconds.

A worked example

A studio site with a near-white background and dark grey text uses a second neutral for cards and the footer, and a single saturated signal colour for links, the primary button and the active navigation state. Roughly 60% white, 30% neutral surfaces and dark text, under 10% signal. The signal colour is rare enough that a visitor scanning the page sees the button first, which is the intent. This site is built that way, with the accent reserved for interactive elements and nothing else; it is a deliberate constraint rather than a shortage of colour.

Where it bends

Dark mode inverts the neutrals but keeps the proportion: dark dominant, lighter secondary, the same sparing accent, often slightly desaturated so it does not vibrate against the dark background.

Brand-heavy designs. A consumer brand with a bold colour may make it the dominant 60%. That works when the secondary and accent are chosen for contrast against it, and it is tiring when there is no quiet surface anywhere.

Data visualisation. Charts need more than three colours and their own palette rules; the 60-30-10 proportion applies to the interface around them, not to the series inside them.

Interfaces with many states. Success, warning, error and information colours are semantic, not decorative, and sit outside the proportion. They should be as rare as the accent and never used for decoration, or they lose their meaning.

Illustration and photography. Rich imagery brings its own colour; the interface around it should be quieter to compensate, often pushing the neutral share above 60%.

The mistakes the rule prevents

Even distribution. Three colours at a third each, in which nothing is dominant and nothing is accent. The most common failure in amateur palettes.

Accent inflation. The accent used for headings, icons, dividers and backgrounds "to reinforce the brand", until it means nothing.

Two accents. A red button and a green button on the same screen, competing. One accent; the second is a secondary style.

Colour as decoration. Any colour that is not doing a job, whether structural, semantic or directional, is noise.

How to apply it

Start with the neutrals: a background and a text colour with sufficient contrast, then a secondary neutral for surfaces. Add one accent, and list what it is allowed to touch: links, primary buttons, active states, focus rings. Add the semantic colours with the same discipline. Check a screenshot with the colours desaturated: the hierarchy should survive as light and dark. Then look at the screen and ask where the eye lands first; if the answer is not the primary action, the accent has leaked.

The rule is a check, not a recipe. If a design already has a clear hierarchy of colour, it is following the rule whatever the percentages are. If you would like a palette reviewed against it, book a call; it is a quick review with a short list of places the accent has escaped.

Common questions