Design Principle
The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.
Principle
The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.
Design action
Assign one primary focal point and at most two secondary focal points per viewport; push other content back with size, lower contrast, and spacing.
Examples
Positive example: Hero views, detail pages, dashboard summaries, and decision areas need clear priority. Counterexample: Every section uses oversized headings, bright buttons, and heavy shadows.
Apply when
Hero views, detail pages, dashboard summaries, and decision areas need clear priority. Users need to judge state, scope, risk, or next action quickly.
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
Assign one primary focal point and at most two secondary focal points per viewport; push other content back with size, lower contrast, and spacing.