CSS Visual Hierarchy

—how a layout expresses importance through size,
position, contrast, and rhythm

Visual hierarchy is the way a page quietly tells us
what matters first, what matters next, and what can wait.

It is not a rule or a technique
— it is the order of attention.

Every interface has a hierarchy,
even when we don’t design one.

CSS simply gives us the tools to shape it.

Visual hierarchy emerges from:

• size — larger elements speak first
• position — top and left carry natural priority
• contrast — stronger contrast pulls the eye
• spacing — more breathing room signals importance
• weight — boldness, color, and density shift attention
• rhythm — repeated patterns create predictable scanning

Hierarchy is the architecture of meaning.

When we understand it,
we can describe intentions clearly.

Examples of what to say:

“Make this element visually primary.”

“Lower the visual weight of this section.”

“Keep this heading quiet.”

“Let the spacing express the hierarchy.”

Hierarchy is how we guide the reader
without saying a word.

AI can generate correct CSS
and still produce a layout that feels wrong.
Hierarchy is how we correct that feeling.

When we name the hierarchy, we tell AI:

• what should stand out
• what should recede
• what should group together
• what should separate
• where the eye should land first

This turns styling from guesswork into collaboration.

• Flow — the natural order that hierarchy builds on
• Spacing — the breathing room that signals importance
• Density — how tightness or openness affects attention
• Tone — the emotional layer that supports hierarchy

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←