UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Visual Weight and Balance

Color, area, weight, position, and shadow create visual weight that must serve task priority.

visual-weightbalancehierarchy

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.

Agent Directive

Limit strong colors and large shadows; make the main focus strong while secondary areas recede through whitespace, thin borders, and lower saturation.

Apply When

  • Key metrics, alerts, CTAs, and important form steps.
  • The page has competing focal points.

Avoid

  • Every card has heavy shadow and saturated buttons.
  • Destructive and ordinary actions receive equal emphasis.

Knowledge Metadata

Category
Visual Foundations
Quality
82%
Version
v1
Published
6/6/2026