visual-emphasis-and-hierarchy

# Visual Emphasis and Hierarchy Every screen has a most-important thing. Visual hierarchy is the design work that makes sure the user's eye finds it first — without requiring the user to read everything and decide for themselves. Emphasis is achieved through **size**, **colour**, **weight**, **contrast**, and **position**. These tools work because they are relative: an element looks important because it differs from what surrounds it. ## The Hierarchy Ladder Design every action group and content area with a clear hierarchy: | Level | Role | Visual treatment | |---|---|---| | **Primary** | The one action the user should most likely take | Filled, brand colour, largest button in the group | | **Secondary** | An alternative action of moderate importance | Outlined or ghost, neutral colour, same or slightly smaller size | | **Tertiary** | Rarely needed, destructive, or low-priority | Text link or subtle ghost, smaller, visually recessive | | **Disabled** | Unavailable | Low contrast, no hover state — signals "not yet" | There should be **at most one primary action per view** or per logical section. Two filled buttons side by side cancel each other out — both feel equally important, so neither guides the user. ## Size as Emphasis A larger button, heading, or element draws the eye before a smaller one. Use size deliberately: - The primary CTA is the largest interactive element in its group - Page headings are larger than section headings, which are larger than labels - A f...