Visual hierarchy
Using size, weight, color, and position to decide what the eye hits first, second, and third. Importance made visible.
See it
What it is
Visual hierarchy is the ranking your eye performs before you read a word. Size, weight, color, contrast, position, and the space around an element decide what gets noticed first, second, and third. Designers build it on purpose; when nobody builds it, the page picks its own order and it is usually wrong.
The practical move is contrast between levels, not loudness. One headline much larger than everything else, body text quiet, a single high-contrast button, and real space separating the groups. Squint at the screen or blur the screenshot: whatever still reads is your actual hierarchy.
Gotcha: hierarchy is relative, so making the important thing bigger fails if you also bolded the label, colored the badge, and boxed the sidebar. Every emphasis you add taxes every other one. Three levels is plenty. Also keep the visual order in step with heading levels (h1, h2, h3), or screen reader users get a different page than everyone else.
Ask AI for it
Rework this section for clear visual hierarchy in exactly three levels: one primary element (largest type, heaviest weight, highest contrast), supporting text at roughly half that size in a muted color, and metadata smallest and quietest. Use a type scale with a real jump between steps (not 16px vs 18px), leave one high-contrast button as the only saturated color, and separate groups with spacing rather than borders. Remove any bold or accent color that is not carrying a level.