Styling & CSS · Visual design
Visual Hierarchy
Also called: Information hierarchy, Hierarchy, Visual weight
Using size, weight, color, position, and whitespace to separate main info from secondary info, so users see at a glance what to look at first, what next, and where to click.
In detail
Not everything on a page is equally important. Visual hierarchy makes the most important things stand out the most: a bigger font size, a heavier weight, a darker or brighter color, a higher position, more whitespace around it. Secondary info gets smaller, lighter, and pushed back.
Buttons have a hierarchy too. An area usually has just one primary button (solid, in the primary color). The others are secondary buttons (outlined or with a light background) and text buttons. If all three buttons are eye-catching solid blue, users don't know which one to click.
A quick self-check is the "squint test." Squint at the page until only blurry blocks of color remain. The thing that stands out most should be the most important content. AI-generated pages often make everything the same size and weight, so tell it clearly what the top priority is.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-visual-hierarchy- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026