---
type: Design Foundation
title: Visual Hierarchy
description: Rules for emphasis, priority, focal point, and avoiding noisy over-emphasis.
tags: [hierarchy, emphasis, focus, whitespace]
---

# Purpose

Use this concept when deciding what should dominate, what should recede, and how users scan the artifact.

# Hierarchy Levers

- Size.
- Weight.
- Color.
- Contrast.
- Position.
- Whitespace.
- Repetition.
- Motion.

# Rules

- Each page, screen, or graphic should have one primary visual focus.
- Each section usually has one primary action.
- Emphasis must serve information priority.
- Do not emphasize one element with large size, high saturation, heavy weight, shadow, and motion all at once.
- Micro-contrast can look accidental; make differences clear or remove them.
- Repetition creates system; variation creates rhythm.

# Common Failure Modes

- Everything is equally loud.
- Primary CTA competes with secondary actions.
- Cards repeat the same hierarchy until the page becomes flat.
- Decoration is mistaken for importance.
- Mobile type scale causes heading overflow.

# Done Check

The hierarchy pass is done when the primary, secondary, and tertiary layers can be identified at a glance.
