Skip to content
Motif
Visual craftLesson 1 of 6Beginner14 min

Visual hierarchy

Hierarchy is how a screen tells you where to look first. Four signals carry it — size, weight, color, and spacing — and you rarely need more than three levels.

Kept on this device only.

In one line: visual hierarchy is the order a screen hands you its content in — what you see first, second, and last — built from just four signals, so that the eye never has to guess where to begin.

What it is

Hierarchy is the ranking of elements by importance, expressed visually. A good layout answers "where do I look first?" before the reader consciously asks it. That answer is carried by four signals working together: size (bigger reads as more important), weight (heavier type pulls focus), color (an accent or a muted tone separates primary from secondary), and spacing (grouping and breathing room tell the eye what belongs together).

You almost never need more than three levels — primary, secondary, tertiary. A page where everything is bold is a page where nothing is.

Why it matters

Without hierarchy, every element competes for attention equally, so the reader has to do the sorting work the design should have done. Flat screens feel slower and more tiring even when every word is legible. Hierarchy is also how a layout survives a glance: a user scanning for the price, the next step, or the headline finds it because the design ranked it for them. Get the ranking wrong — a giant legal disclaimer, a whisper-quiet call to action — and people act on the wrong thing.

See it

Live demo
Tweak it4
Toggle each hierarchy signal off to feel how size, weight, color, and spacing each carry the order.

Toggle each signal off one at a time and watch the card flatten. Turn off size and the title stops shouting; turn off weight and the headline blends into the body; turn off color and the accent CTA and muted meta collapse to one tone; turn off spacing and the elements cram together so the eye can no longer find the groups. With all four off, the card is one undifferentiated paragraph — proof that hierarchy is something you build, not something that comes for free.

How it works

Each of the four signals adds one independent layer of separation, and they compound:

  • Size — a larger element reads as more important. The jump between levels should be obvious; a 2px difference is noise, not hierarchy.
  • Weight — heavier type (semibold, bold) advances toward the reader; regular weight recedes. Weight is especially useful when you can't change size.
  • Color — an accent tone marks the primary action; a muted foreground demotes metadata and supporting text. Color is a powerful signal, but never the only one (see below).
  • Spacing — proximity groups related elements and distance separates unrelated ones. Generous space around a heading gives it room to lead; tight space binds a label to its value.

Build it

CSS
CSS — four signals expressing one hierarchy
.card {
  /* spacing: groups and separates with breathing room */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.card__eyebrow {
  /* size + weight + color all demote the label */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
 
.card__title {
  /* size + weight promote the headline to level one */
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-foreground);
}
 
.card__cta {
  /* color marks the primary action; pair bg + matching text token */
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}
.card__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-accent);
}

Make it yours

Use the controls beside the demo above to change size, weight, color, and spacing — each change updates the example live.

Experiment in the playground
  • Turn off three of the four signals and try to make the card still readable with just one — it teaches you how much each signal actually carries on its own.
  • Find a flat screen in your own product and rank its elements one to three on paper first, then apply only the signals needed to express that ranking.
  • Resist adding a fourth level. If you need one, ask whether two of your existing levels are really the same.

Reproduce it with an LLM

Reproduce it with an LLM

You are a product designer. Here is the content for a screen — 'a pricing card: an eyebrow label, a plan name, a price, three feature lines, a call-to-action button, and a fine-print note'. Rank these elements into a clear visual hierarchy (primary, secondary, tertiary), and for each rank specify which signals carry it: relative size, font weight, color/contrast, and spacing/whitespace. Explain the reasoning in one line per element, and call out the single element that should win the first glance. Avoid using more than three levels. Return a table: element · rank · signals · why.

Run with your key

Pitfalls & accessibility

  • Don't skip heading levels for visual reasons (jumping <h1> to <h3>). If the size you want doesn't match the correct level, override the size in CSS and keep the level correct.

Further reading