Visual Hierarchy

Establish clear importance through size, weight, color, and spacing. Every screen should have one obvious focal point — the primary action or content the user came for.

• One primary action per screen — there MUST be a single focal point; if everything is bold, nothing is bold
• Use size and weight (not just color) to distinguish heading levels
• Group related content with proximity; separate unrelated content with whitespace
• Interactive elements MUST be visually distinguishable from static content
• Disabled elements SHOULD be visually muted but still discoverable

See agentic-cookbook://guidelines/accessibility/accessibility for accessibility requirements (contrast, labels, focus order).

References:

• NNGroup: Visual Hierarchy
• Apple HIG: Layout
• Material Design: Applying Layout
• Fluent Design: Layout

Change History