---
name: visual-hierarchy
description: Use when setting content emphasis or scan order.
---

# Visual Hierarchy

Out of scope: proofreading, backend changes, or visual polish that leaves content priority and scan order unchanged.

Make the most important content and next action easy to find, based on the user's task and the evidence available.

## Workflow
1. Identify the screen's primary user task, audience, content, and constraints. Separate supplied product evidence from assumptions.
2. Rank content by task relevance and consequence; define the intended first, second, and supporting read.
3. Use a small set of deliberate cues—position, scale, spacing, typography, grouping, contrast, and repetition—to express that order. Preserve established tokens and distinguish links, actions, and status.
4. Check the actual content and rendered screen at supported sizes, including long labels, localization, zoom, and focus order. Ensure visual order does not contradict reading/keyboard order; do not rely on color alone.
5. Describe the proposed sequence and tradeoffs. Label recommendations provisional when the screen, user evidence, or product constraints are missing. When priority remains uncertain, define a small task observation: whether intended users find the primary information/action, what step or hesitation was observed, and the task conditions. Do not invent a success threshold; agree one with the product team before calling the hierarchy validated.

For a concise audit worksheet and source boundaries, read `references/hierarchy-audit.md`. Hand off spacing and page composition to `interface-layout`, color-role decisions to `color-systems`, and type-system changes to `design-systems`.