The 60-30-10 Distribution Rule in Interface Design

Borrowed from interior architecture, the 60-30-10 Rule provides an actionable formula for balancing chromatic weight across digital screens:

• 60% Dominant Base: Neutral background surface (e.g., deep charcoal in dark mode, crisp off-white in light mode). Anchors the layout without competing for cognitive attention.
• 30% Secondary Supporting Tonal Layer: Surface containers, navigation bars, sidebars, cards, and secondary typographic layers.
• 10% High-Impact Accent Color: Reserved exclusively for actionable elements: primary buttons, active tab indicators, progress bars, and critical status badges.

When designers violate this rule by splashing the accent color across 40% of the screen, the accent loses its semantic signaling power.