MultiDimensionHierarchy [pattern] v1.0.0

Strong visual hierarchy requires combining at least two of the five hierarchy dimensions simultaneously on primary elements: size, weight, color contrast, position, and surrounding whitespace. Single-dimension hierarchy (size alone, or color alone) is weak and fails the squint test.

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.

MultiDimensionHierarchy [pattern] v1.0.0

Strong visual hierarchy requires combining at least two of the five hierarchy dimensions simultaneously on primary elements: size, weight, color contrast, position, and surrounding whitespace. Single-dimension hierarchy (size alone, or color alone) is weak and fails the squint test.

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.

Sources

Relations

related: [@community/principle-typography-hierarchy, @community/principle-vertical-rhythm, @community/rule-refactoring-ui-hierarchy, @community/rule-no-uniform-spacing-without-variation, @community/fact-gestalt-proximity, @community/fact-contrast-amplification, @community/anti-pattern-thin-weight-body, @anthropic-impeccable/principle-cards-not-required]

Label

Visual Hierarchy Through Multiple Simultaneous Dimensions

Meta

• License: MIT AND Apache-2.0
• License Provenance: package-authorship-claim

Problem

Designers creating hierarchy through only font size create layouts where the visual weight difference between headings and body is insufficient for fast scanning. The squint test reveals this: blur your eyes (or apply a blur filter to a screenshot) — if you cannot identify the most important element, the hierarchy is insufficient.

Five Dimensions

• • Dimension: Size
  • Strong: 3:1 ratio or more between heading and body
  • Weak: Less than 2:1 ratio — close sizes compete rather than separate
• • Dimension: Weight
  • Strong: Bold vs. Regular, or Semibold (600) vs. Regular (400)
  • Weak: Medium (500) vs. Regular (400) — barely perceptible
• • Dimension: Color contrast
  • Strong: High-saturation or dark text vs. muted secondary text
  • Weak: Black text vs. dark gray text — insufficient tonal separation
• • Dimension: Position
  • Strong: Top-left anchor with natural reading-order priority
  • Weak: Centered hierarchy — removes directional reading advantage
• • Dimension: Whitespace
  • Strong: Primary elements surrounded by generous breathing room
  • Weak: Uniform spacing throughout — no element commands attention

Squint Test

Blur or squint at the layout. If you cannot identify: (1) the most important element, (2) the second most important, (3) clear groupings — you have a hierarchy problem. Fix by stacking two or more dimensions on the primary element.