Mastering the 60-30-10 Rule in UI Design

The 60-30-10 rule is often cited as a decorating concept, but in Product Design, it is the fundamental mathematical ratio for visual harmony. It prevents the common “rainbow effect” of novice designs and creates a hierarchy that guides user attention naturally.

The Formula Deconstructed

It is not just about picking three colors. It is about surface area usage.

• 60% (Dominant): The neutral foundation.
• 30% (Secondary): The brand identity.
• 10% (Accent): The action driver.

1. The Dominant Layer (60%)

In modern specific design, this is rarely a pure color. It is your Canvas.

• Light Mode: White (#FFFFFF), Slate-50 (#F8FAFC), or warm Greige.
• Dark Mode: Rich Black (#0F172A), Deep Charcoal (#18181B).

Usage:

• Page Backgrounds
• Card containers (often a slightly lighter/darker shade of the background)
• Negative space

Crucial: Your text color does NOT count towards the 60%. Typography is a utility layer that sits on top of the scheme.

2. The Brand Layer (30%)

This is where your product’s personality lives. It binds the interface together without screaming for attention.

• Usage: Sidebar navigations, Headers, Active state backgrounds, Footer blocks, Secondary buttons, Icons.
• Mistake to avoid: Using your primary brand color (e.g., bright blue) for everything. If your brand color is vibrant, use it sparingly. If it’s subtle (navy, forest green), you can use it more freely as the 30%.

3. The Action Layer (10%)

This is the most critical layer for conversion. It should be reserved strictly for the “One Key Action” per screen.

• Usage: Primary CTA buttons (“Sign Up”, “Buy Now”), Notification badges, Success states, Links in text.
• Contrast is Key: This color must pass WCAG AA (4.5:1) against the 60% background.

Advanced Application: The “Split” Technique

In complex dashboards, 3 colors aren’t enough. You can split the 10% into two 5% accents (e.g., Success Green and Error Red) or split the 30% into two shades of the same hue.

Example: The 60-30-5-5 Rule

• 60%: Light Gray Background
• 30%: Dark Blue (Sidebar)
• 5%: Bright Blue (Primary Buttons)
• 5%: Teal (Secondary Highlights)

Visualizing the Balance

Conclusion

The 60-30-10 rule isn’t a constraint; it’s a sanity check. If your design feels cluttered or overwhelming, check your ratios. You likely have too much “Accent” fighting for attention. Return to the formula, reduce the noise, and let the hierarchy speak.