name: hierarchy-principles description: "Visual weight, attention order, and the decisions that guide the eye. Use when building layouts, evaluating information architecture, or diagnosing why a design feels confusing."

Hierarchy Principles

The single most important thing in any visual design.

/hierarchy-principles Apply hierarchy constraints to any design work in this conversation.

MUST establish a clear primary element on every screen. If everything is important, nothing is.
MUST create hierarchy through at least two of: scale, weight, contrast, color, space, position
MUST ensure visual weight matches content priority (the most important thing is the most prominent)
NEVER allow two elements to compete at the same hierarchy level unless intentional tension is the goal
SHOULD test by covering half the screen. Can you still tell what's most important?

Scale: Bigger things get seen first. The ratio between largest and smallest defines your range.
Weight: Bolder things demand attention. Use sparingly or nothing stands out.
Contrast: High-contrast elements pull focus. Low-contrast recedes.
Color: Saturated colors advance. Desaturated retreat. One accent in a neutral system creates instant hierarchy.
Space: More breathing room signals more importance. Crowded elements feel like metadata.
Position: Top-left gets seen first (LTR). Center gets attention. Bottom-right gets ignored unless hierarchy pulls the eye there.