Visual Hierarchy: Lessons from DesignSpo

A deep read of DesignSpo's The Complete Guide To Visual Hierarchy (15:28).

Why this analysis exists

This is one of the source layers behind the BuildOS ui-ux-quality-review skill. The skill compresses the operating rules into checkable rules for an agent. This post is the long form — the reasoning, levers, and failure modes — the way DesignSpo teaches them.

Core thesis

Visual hierarchy is the order in which a viewer notices elements in a design, and great hierarchy is the difference between amateur and pro work. It is built from three things working together: contrast (what stands out), uniformity (everything else staying predictable so contrast actually reads), and composition (arranging elements along the audience's natural scan pattern — top-to-bottom, left-to-right, Z, or F).

The operative rule the speaker hammers throughout: "If everything is different, then nothing stands out." Hierarchy is not the question of what is most important — every element is essential — it is the question of what the viewer should see first, second, third.

TL;DR rules

#	Rule	Operating principle
1	Hierarchy is designed to lead the viewer	Decide the rank order (1st, 2nd, 3rd) before touching pixels.
2	Number of elements and primacy are correlated	Only one element can be primary; only a few can be secondary; the rest must be uniform.
3	There is no hierarchy without contrast	Without difference in size/weight/color/space/etc., nothing reads as primary.
4	Uniformity gives structure to the design	Elements of the same type must share the same values (size, font, weight, radius, padding).
5	Composition is key to great hierarchy	Lay elements out along the audience's natural scan pattern: top-to-bottom, left-to-right, Z, or F.

Contrast levers, ranked from highest-attention to lowest

Rank	Lever	When to use
1	Motion	Nudge the eye toward one element; minimize or stop once the user is looking.
2	Task-related information	Make what the user actually wants easy to find (e.g., "jump to recipe", checkout button, price).
3	Focal point via white space	Surround the primary element with breathing room.
4	Humans / faces	Use only when relevant to the offer; avoid generic stock people stealing the headline.
5	Color	Move values apart on the wheel; aim for WebAIM contrast ratio ≥ 4.5 for legibility; red is the universal "pay attention" color.
6	Size	Headline only needs to be a little bigger than body to be read first.
7	Weight	Use bold to guide the eye through paragraphs without breaking hierarchy.
8	Imagery	Strong as a secondary element supporting a headline; weak when irrelevant.
9	Extra elements	Tags like "best value", borders, badges to break a uniform pattern subtly.
10	Misalignment	Nudge one element off-grid to draw the eye; do this rarely.

Operating lessons

1. Decide hierarchy before you decide style

The diagnosis: Beginners style elements first (pick fonts, colors, sizes) and end up with designs where everything competes. The speaker frames hierarchy as a ranking decision the designer makes — what should be seen first, second, third — before any visual treatment.

The fix:

• Mentally list every element in order of primacy (1, 2, 3, 4...) before touching values.
• Only after ranking, apply contrast tools (size, weight, color) to enforce the rank.
• Quote: "Hierarchy is not the decision of what's essential in the design, but simply what visitors should see first, second, third, etc."

2. Primacy is scarce — most of the design must be uniform

The diagnosis: Designs look messy because designers try to make many elements stand out. If everything has high contrast, nothing reads as primary.

The fix:

• One primary element. A few secondary elements. Everything else relatively uniform.
• Quote: "If everything was equally important, then nothing would stand out."
• Quote: "Most of our design, if it's going to be good, has to be relatively uniform."

3. Use the contrast levers in rank order — start with the highest

The diagnosis: Beginners reach for color and size and miss higher-ranked levers like motion, task-relevant information, and white space. They also overuse motion and faces, which steals attention from the actual message.

The fixes per lever:

• Motion: Use to nudge the eye. Once the user is looking, minimize or stop the motion. Flashy persistent motion frustrates people.
• Task-related information: Track what the visitor actually wants (with data if possible) and make that obvious. The eye looks for the unknown first, then for what is known and useful. Example given: people skip the babushka story and click "jump to recipe."
• White space / focal points: Crowding kills hierarchy. Place the primary element in white space — "With space to breathe, the eye naturally knows what to focus on." Counter-example: a Where's Waldo page where the eye has nowhere to land.
• Humans / faces: Only use a face when it is contextually relevant. "If you're selling guitar lessons, your model should be learning guitar or rocking out. But if you're promoting something like a bake sale, it might be best just to use pictures of baked goods instead of chefs." Random stock faces actively steal attention from the headline.
• Color: Create distance on the wheel — light vs dark, or hue distance. Use the WebAIM contrast calculator; target contrast ratio ≥ 4.5 for text legibility. Changing hue alone (without luminance) helps non-color-blind users but reduces accessibility for color vision deficiency. Red is uniquely hard-wired into human attention.
• Size: Relative, not absolute. "A headline only has to be a little bit bigger to be read visually as a headline, and a paragraph only has to be a little bit smaller to be read after the headline."
• Weight: Lower-attention than size, so it's safe for guiding the eye through long-form content (e.g., bolding key terms in a paragraph) without breaking primary hierarchy.
• Imagery: Best as a secondary element supporting a headline (the example: PopSci hero where text is read first, then mockups validate the claim). Irrelevant or excessive imagery destroys focus.
• Extra elements: A "best value" tag on a pricing card, a border, a badge — these are the subtle contrast tool. They break a uniform pattern without breaking the structure.
• Misalignment: A controlled trick. Nudge one element off-grid to add interest. Misalign too many and the design loses flow.

4. Cohesion: same-type elements share every value

The diagnosis: Cards, list items, repeated rows look messy because each one has slightly different values — different padding, different image height, different title weight. The speaker calls this the difference between "perfectly balanced, in harmony" and "messy and all over the place."

The fix (verbatim from the speaker):

• Each image should be the same size.
• Each card title should use the same font, same font size, same font weight.
• Each paragraph should be exactly the same, even taking up the same height.
• Each card should have the same border color and corner radius.
• "If we want to change one value, like the font weight of the card titles, we should change it for each card title."

This practice has a name in the video: cohesion.

5. Composition: lay elements along the audience's natural scan path

The diagnosis: Even with great contrast and cohesion, a design fails if elements are placed against the user's reading habits.

The fixes — choose the pattern that matches the medium and audience:

• Top-to-bottom: Default for letters, cards, and most pages where you control the first read. Most-important on top, supporting context underneath. Example: landing page with a headline above a video — even though the video is "more important," the headline gives the video meaning.
• Left-to-right: For audiences that read left-to-right; reverse for RTL audiences. Most-important to least-important, left to right.
• Z pattern: The hybrid for minimalist designs — primary in top-left (headline + subtitle), supporting image, then cards underneath. Common on posters, billboards, hero sections with little text.
• F pattern: For text-heavy web pages. Top-to-bottom first, then left-to-right at each row. The speaker calls this "the most common on the web where text is likely to take up more of a design than say a poster or a billboard."

The composition workflow (the speaker's literal sequence):

1. Rank every element by primacy.
2. Apply contrast tools to the ranked elements.
3. Group similar elements together (cohesion).
4. Arrange the groups along the chosen scan pattern.

Failure modes

Skip these rules and you get:

• No contrast → no hierarchy. Everything looks equally important; the eye has nowhere to land.
• Too much contrast → Where's-Waldo effect. Every element fights for attention; the user bounces.
• Cohesion broken in repeated elements. Card rows look "off" even when nothing is technically wrong — viewers feel the mismatch as amateur work.
• Stock human face stealing the headline. Visitor reads the random person's face for a second and leaves without absorbing the offer.
• Persistent motion. Once a user is looking, ongoing motion becomes friction. Marketing pages with looping animations often fail here.
• Imagery without context. Hero images that don't support the headline reduce trust instead of building it.
• Wrong scan pattern for the medium. Using a Z layout on a text-heavy article, or a paragraph-style layout on a poster, fights the user's reflexes.
• Color contrast below WebAIM 4.5. Text becomes illegible for parts of the audience; the page fails accessibility audits.
• Designing style before deciding rank. Founder/designer styles each element independently, ends up with a busy design and no clear primary.

How BuildOS uses this

This source informs how the ui-ux-quality-review skill audits hierarchy. Specific applications:

• Marketing landing page hero: Apply the Z pattern. Primary = anti-AI/relief headline (top-left). Secondary = subtitle. Tertiary = supporting image or screenshot. Then cards below. Avoid stock human faces in the hero unless the person is literally using BuildOS for a thinking task — otherwise the face steals attention from "turn messy thinking into structured work."
• In-app dashboard hierarchy: Decide one primary action per surface (e.g., "start brain dump" on the home view). Everything else — recent projects, daily brief preview, calendar peek — must be visibly secondary via smaller size, lighter weight, less saturated Inkprint tones. Resist giving every dashboard module equal visual weight.
• Cohesion across repeated lists: Project cards, task rows, brain-dump history items must share exact values — same image/icon size, same title font weight, same paragraph height, same corner radius, same border color. This is one of the cheapest ways to make BuildOS feel like a designed product instead of a Tailwind template. Inkprint tokens should enforce this; deviations should be reviewed.
• Marketing-page motion budget: Reserve motion for one element per section (e.g., a subtle texture animation in the hero). Once the user scrolls or hovers, motion should minimize or stop. Looping background motion across the whole page is a known failure mode.
• Color contrast accessibility floor: All BuildOS text — both in-app and on the marketing site — must hit WebAIM contrast ratio ≥ 4.5 in both light and dark modes. Inkprint texture overlays (tx-bloom, tx-grain) must be tested against this on top of bg-card and text-foreground because halftone/grain textures can degrade real contrast even when the underlying tokens pass.

Related

• Skill: ui-ux-quality-review — the foundational pass that uses these rules as agent checks for hierarchy.
• Source channel: DesignSpo on YouTube.