Visual Hierarchy
01 Why Hierarchy Is EverythingFree preview Visual hierarchy is the deliberate ranking of elements by importance — the difference between a screen that explains itself and one that has to be read. 02 Size Is Not the Only LeverFree preview Emphasis comes from three primary levers — size, weight, and color contrast — and size is usually the most expensive one to pull. 03 Emphasize by De-emphasizing When something needs to stand out, muting its neighbors is usually cheaper, calmer, and more effective than amplifying it. 04 Text on Colored Backgrounds Gray text belongs on neutral backgrounds. On colored surfaces, de-emphasize inside the background's own family — reduced-opacity white or a hand-picked tint. 05 Labels Are a Last Resort Most data self-identifies through format and context. Reach for a label only after both have failed — and try folding it into the value first. 06 Visual Hierarchy vs Document Hierarchy Heading levels are structure; type styles are attention. Keep them independent so any tag can speak at any volume. 07 Actions Have Hierarchy Too Rank actions in three tiers — one solid primary per view, outlined secondaries, link-quiet tertiaries — and let context set the volume. 08 Balancing Weight and Contrast Weight and contrast trade against each other — mute solid shapes below their text, darken hairlines instead of thickening them. 09 Building a Hierarchy System (+ AI Prompt) Three text tiers, three action tiers, one primary per view, and an escalation ladder that reaches for size last — as tokens, a prompt, and a five-question audit.