Color & depth
60-30-10 rule
Split the palette roughly 60% neutral surface and text, 30% secondary structure like borders and subtitles, 10% primary. An accent only reads as an accent while it stays rare.
Mostly whites/greys, splashes of blue
Blue header, blue sidebar, blue buttons
How to apply it
- 1
Audit every screen for blue usage — it should read as rare, not ambient.
- 2
Keep backgrounds and body text in the 60% neutral layer.
- 3
Move borders and subtitles into the 30% secondary layer.
- 4
Reserve primary color for one action per view, not headers or nav.
Why it works
The 60-30-10 split works because it establishes a clear visual hierarchy before anyone reads a word: the eye scans large neutral fields first, then the 30% secondary layer, then lands on the 10% primary accent last. That ordering mirrors how attention naturally moves from ground to figure. Break the ratio and every element competes for the same weight.
What breaks
When primary color creeps past 10% into headers and sidebars, users can no longer tell which blue element is the actual call to action versus decoration, so click-through drops on the real button.
Review questions
- 1
Does the primary color appear in only one or two places on screen?
- 2
Are backgrounds and body text neutral rather than tinted with the brand hue?
- 3
Do borders and subtitles form a distinct secondary layer instead of another step of the accent?