Visual Hierarchy
Visual hierarchy is how a layout tells the eye where to look first, second, and third. Color, contrast, type weight, and spacing all carry that signal — used deliberately, they guide attention; used carelessly, they compete for it.
Color is one of the strongest levers. Start from a single brand color and build a coherent scheme — complementary for punchy contrast, triadic for balanced vibrance, analogous for calm, cohesive surfaces. Try it below, then check your pairings against WCAG contrast so the hierarchy reads for everyone.
Color palette generator
Open full tool →Color is one half of visual hierarchy — contrast and weight do the rest.
Then check any text-on-background pairing against WCAG AA/AAA — if the contrast fails, the hierarchy you built only reads for some of your users.
Contrast & WCAG checker
Open full tool →Contrast is one check. A full audit scores the whole experience for accessibility and risk — then tells you what to fix first.
Run a full accessibility audit →12 articles
UX Writing
HBO Max UX Teardown: The R$22.90 Headline Is an Annual Price
A UX teardown of HBO Max's signed-out browse flow in Brazil: the catalog is easy to evaluate without an account, but the 'plans from R$22.90/month' line on both catalog heroes is the twelve-installment annual price, and the monthly price only appears after a toggle at the bottom of a title page.
TYPENORMLabs · 5 min · October 7, 2026
Navigation Design
The Guardian UX Teardown: Color-Coded Stories and a $12 Ask at Both Ends of the Visit
A UX teardown of The Guardian's signed-out reading flow: kicker colors that follow the type of story, a $12 reader-support ask above every page we opened, and a header where the only visible 'Search' is a jobs link.
TYPENORMLabs · 6 min · October 1, 2026
Visual Hierarchy
The Atlantic UX Teardown: Two Red Buttons and No Price in View
A UX teardown of The Atlantic's signed-out reading flow: section fronts that open below a fixed advertising band, a 665-pixel reading column, and a subscription gate that offers two equal red buttons without a price in view.
TYPENORMLabs · 6 min · October 2, 2026
Design Principles & Laws
Gestalt Principles in UI Design: Which One Wins When Two Disagree
The gestalt principles describe how people group what they see: proximity, similarity, common region, closure, continuity, figure-ground, common fate. On a real screen several apply at once, and the layout bugs come from two of them giving different answers.
TYPENORMLabs · 10 min · September 30, 2026
Visual Hierarchy
Visual Design Principles for Product Teams: A Check for Each One
Visual design principles are hierarchy, contrast, proximity, alignment, repetition, scale, and whitespace. For a product team they are most useful as checks you can run on a screenshot in a review, so a disagreement about a screen ends with a measurement instead of a vote.
TYPENORMLabs · 9 min · September 29, 2026
Information Architecture
Axios UX Teardown: Read Time Everywhere Except the Front Page
A UX teardown of Axios' signed-out read flow: search results priced to the minute, section fronts that give their lead story nothing but a headline and a face, and a newsletter gate that states its price out loud.
TYPENORMLabs · 5 min · September 12, 2026
Visual Hierarchy
Washington Post UX Teardown: An Honest Offer, Parked on the Headline
A UX teardown of The Washington Post's signed-out reading flow: the subscription card publishes both prices and the renewal terms, then centres itself over three lines of the headline it's selling.
TYPENORMLabs · 5 min · September 9, 2026
Design Principles & Laws
The Principles of Design, Explained: What Each One Claims About Your Reader's Eye
The principles of design are usually taught as a list of nouns to admire. They are better read as testable claims about what a viewer's visual system decides before conscious thought, and each one fails in a specific, recognizable way.
TYPENORMLabs · 12 min · August 31, 2026
Visual Hierarchy
User Interface Design: Principles & Patterns
The principles of user interface design aren't matters of taste. Each one traces back to something measurable about how people see, decide, and mis-click — including the two numbers WCAG will actually hand you.
TYPENORMLabs · 8 min · August 1, 2026
Visual Hierarchy
Nike UX Teardown: Two Storefronts Wearing One Logo
A UX teardown of Nike's public shop pages: one interface hides every price to manufacture desire, the next admits it has 16,794 products, and the seam between them is where the brand story stops working.
TYPENORMLabs · 6 min · August 15, 2026
Visual Hierarchy
Iconography in UI Design: A Practical Guide
Most icons are less legible than the teams shipping them believe. What a usable icon set requires: labels, a drawing grid, three accessibility numbers with right answers, and a way to test recognition before launch.
TYPENORMLabs · 8 min · August 4, 2026
Visual Hierarchy
Choosing Between Different Fonts: A Typography Guide
A typeface gets picked once and every screen after that inherits it. The measurable part of the choice: legibility properties, four WCAG numbers, and what the file costs on load.
TYPENORMLabs · 9 min · August 2, 2026
In the TYPENORMSchool library
- Law of Proximity · UX laws
- Check colour contrast · How-tos
Explore the map
Related industries
Related interfaces