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 featured product, plan, or option can be physically larger than its peers to signal recommendation

Size differences must be perceptible — a 2px difference reads as inconsistency, not hierarchy. Use your modular scale for type; use meaningful size steps for components.

Colour as Emphasis

Colour is the strongest emphasis signal and therefore the most easily overused.

• One brand colour for primary actions — used sparingly so it retains its signal
• Secondary and tertiary actions should be neutral (grey, outlined) so the primary colour stands out
• Status colours (red, orange, green) should never appear on primary CTAs — they carry their own semantic meaning