Design Principle
Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.
Principle
Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.
Design action
Limit strong colors and large shadows; make the main focus strong while secondary areas recede through whitespace, thin borders, and lower saturation.
Examples
Positive example: Key metrics, alerts, CTAs, and important form steps. Counterexample: Every card has heavy shadow and saturated buttons.
Apply when
Key metrics, alerts, CTAs, and important form steps. The page has competing focal points.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Limit strong colors and large shadows; make the main focus strong while secondary areas recede through whitespace, thin borders, and lower saturation.