Color & Contrast
60-30-10 rule
A balanced palette is roughly 60% neutral, 30% secondary and 10% accent.
See it
Don't
- Every element uses a different bright color
- Nothing neutral for the eye to rest on
- The Export CTA doesn't stand out
Do
Dashboard
SalesUsersLeads
ExportWhy it matters
Roughly 60% neutral, 30% secondary, 10% accent. When every element gets its own bright color, the accent can't guide attention anymore.
How to apply it
- Start with neutral backgrounds and surfaces
- Use a secondary color for structure like nav or cards
- Save the accent for CTAs, links and key states
Common mistakes
- Giving every section its own bright color
- Spending the accent on decoration
Quick answers
What is 60-30-10 rule?
A balanced palette is roughly 60% neutral, 30% secondary and 10% accent. Roughly 60% neutral, 30% secondary, 10% accent. When every element gets its own bright color, the accent can't guide attention anymore.
How do I apply 60-30-10 rule in UI design?
Start with neutral backgrounds and surfaces. Use a secondary color for structure like nav or cards. Save the accent for CTAs, links and key states.
What are common mistakes with 60-30-10 rule?
Giving every section its own bright color. Spending the accent on decoration.