Visual Hierarchy

Key insights

• Size sets the entry point: make the primary element roughly 2x the size of body text so the eye lands on it before anything else.
• Spend color like currency — keep the interface neutral and reserve one accent for the single most important action. A rainbow of colors flattens everything into noise.
• Contrast separates roles: a bold white heading against muted body copy, or a filled primary button next to a ghost secondary, makes the priority obvious at a glance.
• Whitespace is a signal, not filler. Give the hero element breathing room and keep secondary items compact — intentional spacing reads as importance.
• Font weight builds reading order without changing size: heavy for headings (800), regular for body (400), light for captions (300).
• No single rule carries a layout — size, color, contrast, whitespace, and weight stack to make one clear focal point.

Do / Don't

• Do: Reserve one accent color for the one action you want users to take
• Do: Make the headline about twice the size of the body text around it
• Do: Give the most important element more padding than everything else
• Don't: Color every element differently — it turns hierarchy into visual noise
• Don't: Lean on size alone; combine it with weight, contrast, and spacing
• Don't: Cram everything at equal emphasis so nothing stands out