How to Use the 60-30-10 Rule in UI Design

The 60-30-10 rule is one of the most fundamental principles in color theory, borrowed from interior design and adapted perfectly for digital interfaces. It's simple, elegant, and creates visually balanced designs that feel professional without overthinking.

What is the 60-30-10 Rule?

The 60-30-10 rule is a color distribution guideline that divides your design into three portions:

• 60% Dominant Color: Your primary background color that sets the overall tone
• 30% Secondary Color: A supporting color that creates contrast and structure
• 10% Accent Color: A bold color used sparingly for calls-to-action and emphasis

Why It Works

This ratio isn't arbitrary—it's rooted in how our visual system processes information. Here's why it creates balance:

Visual Hierarchy

The unequal distribution creates natural focal points. Your eye knows where to look first (accent), understands the structure (secondary), and rests comfortably in the dominant space.

Prevents Overwhelm

Using three colors in equal amounts creates visual chaos. The 60-30-10 split gives your design breathing room while maintaining interest.

Professional Polish

This ratio has been refined over decades across interior design, fashion, and digital interfaces. It's a shortcut to designs that feel intentional.

UI Applications

Let's break down how this translates to actual interface elements:

60% - Dominant Color (Backgrounds)

This is typically your main background color. In light mode designs, this is often white or a very light neutral. In dark mode, it's a dark gray or true black.

Apply this to:

• Page backgrounds
• Large content areas
• Whitespace and padding

30% - Secondary Color (Structure)

This color creates contrast against your dominant color and typically appears in:

• Text and headings
• Navigation bars
• Card backgrounds
• Borders and dividers
• Secondary buttons

10% - Accent Color (Action)

Use this sparingly for high-impact elements:

• Primary call-to-action buttons
• Links and interactive elements
• Important notifications
• Selected states and highlights

Practical Examples

Common Mistakes

1. Making Everything 33-33-33

Using three colors equally creates visual confusion. Your eye doesn't know where to focus. The hierarchy is what makes this rule effective.

2. Using Your Accent Color Too Much

A common beginner mistake is overusing the accent color because it's exciting. Remember: the 10% is what makes it powerful. If everything is highlighted, nothing is.

3. Forgetting About Neutrals

The rule refers to your color scheme, but neutrals (grays, whites, blacks) don't count toward your percentages. They're the foundation.

4. Ignoring Context

A landing page might use different proportions than a dashboard. Marketing pages can be bolder (maybe 50-30-20), while data-heavy apps need more restraint.

5. Choosing Colors That Don't Play Well

The rule only works if your colors complement each other. Use color theory (complementary, analogous, triadic) to select your base colors first.

Advanced Variations

The 70-20-10 Split

For cleaner, more minimalist designs, push the dominant color to 70% and reduce the secondary to 20%. This works beautifully for meditation apps, portfolios, and content-focused sites.

Multiple Accent Colors

You can split the 10% accent across two colors (5% each) for more variety. Common in dashboards where you need success/error states:

Seasonal Adjustments

Keep your structure but rotate accent colors seasonally. Your 60-30 stays consistent (brand recognition), but the 10% keeps things fresh.

The 80-15-5 Rule for Data Apps

When building analytics dashboards or data visualization tools, consider going even more minimal:

• 80% neutral background
• 15% text and structure
• 5% accent for critical actions

This lets your data visualizations be the star.

Implementation Checklist

1. Choose your three core colors using color theory principles
2. Assign roles: Which is dominant? Secondary? Accent?
3. Apply the 60-30-10 split across your design system
4. Test on actual UI mockups—adjust proportions if needed
5. Check accessibility (WCAG contrast ratios) for all combinations
6. Document your usage in a style guide

Real-World CSS Implementation

Here's how to structure your CSS variables following the 60-30-10 rule:

Conclusion

The 60-30-10 rule is a powerful starting point for any UI design project. It takes the guesswork out of color distribution and creates instant visual hierarchy. While you can (and should) adjust these ratios based on your specific needs, understanding this foundation will level up your color decisions immediately.

Remember: rules exist to be understood, then thoughtfully broken. Master the 60-30-10 rule first, then experiment with variations that serve your unique design goals.