The 60-30-10 Color Rule in Modern UI Design: Proportions and Visual Hierarchy
Apply the classic 60-30-10 interior design rule to web UI and design systems. Learn how to balance dominant backgrounds, secondary surfaces, and accent CTAs.
The 60-30-10 rule states that 60% of an interface should be a dominant neutral background, 30% a secondary structure (cards, sidebars, typography), and 10% a high-contrast accent reserved exclusively for call-to-actions, focus rings, and active states to direct visual attention.
Solve this problem now with our free Color Palette Generator
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Proportion | UI Role | Typical Design Elements |
|---|---|---|
| 60% Dominant | Base Neutral canvas | Application background, empty space, main canvas area |
| 30% Secondary | Structural support | Cards, navigation bars, modals, tables, body typography |
| 10% Accent | Intentional focal point | Primary CTA buttons, badges, notifications, active tabs, progress bars |
Why Interfaces Feel Cluttered
When user interfaces feel chaotic, the issue is rarely the individual colors chosen—it is the **proportion** in which they are applied. Distributing five bright brand colors equally across cards, headings, borders, and buttons creates visual competition that overwhelms users.
Borrowed from interior architecture, the **60-30-10 rule** provides a structured formula for visual hierarchy.
1. The 60%: Dominant Base Canvas 60% of visual surface area belongs to neutral tones. - In light mode: clean whites (`#ffffff`), off-whites (`#f9fafb`), or subtle cool slates. - In dark mode: deep charcoals (`#09090b`) or midnight tones. This provides breathing room for content and prevents cognitive fatigue.
2. The 30%: Structural Support The 30% layer creates physical depth and organizes information architecture: - Card surface backgrounds (`#ffffff` on `#f3f4f6` backgrounds) - Side navigation bars, headers, and footer blocks - Primary headings, body copy, and subtle border dividers (`border-border/60`)
3. The 10%: Accent Focus The remaining 10% is your primary visual anchor. Reserve it for: - Primary Conversion Actions ("Sign Up", "Deploy", "Checkout") - Interactive states (active tab pills, selected radio rings) - Notification badges and progress indicators
If every element is emphasized with your brand accent, nothing stands out. Restricting the accent color ensures users instinctively know where to click.
Build balanced palettes that conform to the 60-30-10 rule using Mickytool's **Color Palette Generator**.
Solve this problem now with our free Color Palette Generator
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Can I have two accent colors in the 10% budget?
Yes, but split the 10% allocation—for example, 7% primary brand accent (indigo) and 3% semantic highlight or destructive warning (amber/rose).
Does the 60-30-10 rule apply to illustrations and charts?
Data visualizations and illustrations operate within their own sub-palette, but they should still harmonize with the surrounding neutral canvas.