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
