UI Visual Design

The visual layer — type, space, color, hierarchy. Depth in references/.

Essentials

• Type: One ratio-based scale; ≤2 faces; body ≥16px on mobile; measure 45–75ch.
• Space: One grid (default 8pt); proximity groups related items; no one-off pixels.
• Color: Small role set; WCAG AA contrast; never color-only meaning; 60-30-10.
• Hierarchy: Size, weight, color, position, whitespace, depth — pick 2–3, not all at once.

Visual hierarchy (quick)

1. Size → 2. Weight → 3. Contrast/color → 4. Position → 5. Isolation (whitespace) → 6. Elevation

Western scanning often follows a Z-pattern — place key signals on the Z corners.

Reference Map