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:

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

Brand Colour as Large Areas

Brand primary colours work well as large background regions — hero sections, feature banners, section dividers. This is different from using brand colour on interactive elements.

The rule: pick one role and commit to it per view.

• Brand colour as a large area → buttons and links on that section use white or a high-contrast neutral, not the brand colour again
• Brand colour on interactive elements → backgrounds stay neutral so the colour retains its signal

Used as a bold background, brand colour communicates identity and energy. Used simultaneously on both backgrounds and buttons, it loses all signal — everything blends together.

Contrast and Whitespace as a Focal Point

Emphasis is not just about what you add (colour, size), but also what you remove (distraction).

The "Contrast + Space" Rule: To create a powerful focal point, combine a high-contrast element (or a bold brand colour) with generous whitespace (negative space) around it.

• Isolation: Whitespace acts as a frame, isolating the primary action or message.
• Visual Silence: By removing competing elements nearby, you ensure the user's eye has only one logical place to land.
• Scale: A small high-contrast button in a large empty field can have more "pull" than a giant button in a crowded layout.

Use whitespace deliberately to "push" the user's attention toward the primary goal.

✓ Dark brand-colour hero section + white CTA button
✓ White page + brand-colour primary button
✗ Brand-colour hero section + brand-colour button on top of it

Weight and Contrast

Typography weight communicates importance within text and aids scannability.

• Bold a 2 to 5 word cluster that carries a point. Bold is the second scanning layer after headings. A reader who skims the headings and the bold text alone should collect the claims, not the vocabulary.
• Bold headings and labels. Use weight to distinguish the structure of the information from the information itself.
• Regular weight for supporting content. Keep descriptions and secondary info in regular weight to provide a "rest area" for the eye.
• Light or muted colour for metadata. Use low contrast for timestamps, secondary labels, or "fine print".

In data-heavy UIs (tables, dashboards), bold the primary metric or the row's identifying name. The eye should be able to jump from one bold anchor to the next to quickly locate data.

Where the Cluster Starts and Ends

A single bolded word is a highlighted term, not a point. So is a product name or a piece of jargon lifted from the page.

• Never start the cluster on "the", "a" or "an". The article is wasted emphasis.
• Never end on a fluff word. The last word is where the eye lands, so it has to be the loaded one.
• Bold a claim, not a fragment. If the bolded text cannot be read alone as a statement, move the boundaries or drop the bold.

A single word is bold only when it is a UI element in its own right: a badge, a chip, a table label, a metric in a stat tile. In running prose it is always wrong, because there is no such thing as a one-word claim.

Density is sparse: roughly one per section, never two in a paragraph. A page bolded everywhere has no emphasis, only noise.

This applies to prose the same way it applies to UI: articles, landing page copy, and any long-form markdown an agent generates.

Text Over Imagery

Text legibility is often compromised when placed directly over photographs or complex patterns. To maintain hierarchy and credibility:

• Subtle Text Shadow: Use a soft, high-blur text-shadow (e.g. 0 2px 4px rgba(0,0,0,0.2)) to lift text off the background. It should be felt rather than seen — if the shadow is obvious, it's too heavy.
• Image Tints & Gradients: Apply a subtle dark tint or a linear gradient (e.g. from transparent to 40% black) over the image to increase contrast behind the text.
• Selective Backgrounds: When selecting stock footage, look for images with "negative space" or solid color areas (e.g. a clear sky, a plain wall) where text can sit naturally.
• Scrims: Use a "scrim" (a semi-transparent gradient overlay) specifically in the area where text sits to preserve the image's vibrant colours while ensuring text is readable.

Position as Emphasis

Users in left-to-right reading cultures scan top-left first. Position reinforces hierarchy:

• Primary action: bottom-right of a form or dialog (natural end of the reading flow), or top-right of a page header
• Most important content: top of the page, above the fold
• On a landing page the hero carries one value promise, large and with air around it — for the sequence below it, see the product narrative framework in [[layout-paradigms-and-consistency]]
• Warnings and critical status: top of the affected section, not buried at the bottom
• Destructive actions (Delete, Remove): visually separated from constructive actions, often at the end of an action group

Surface the One Key Thing in Data-Heavy Views

When a view has a lot of data, don't present it all at one flat level of emphasis — that pushes the work of finding the important thing onto the user. Instead, decide the single key figure or fact for this use context and make it large and immediately findable; let everything else sit in a supporting, lower tier.

• Ask what the user came to this screen to know or do, and give that the size, weight, and position (a big headline metric, a prominent status, a clear primary action).