Amanoba Logo
Back to Course

Spacing as Grammar

Day 12 of 30 · The Playbook 2026 – Masterclass for Designers

Create a spacing scale that provides rhythm and consistency for every component.

Learning Goal

  • Spacing scale (4/8/12/16/24/32) with rules.
  • Vertical rhythm (heading margins) unified.
  • Map tokens to components (card padding md, section lg).
  • Ban random px values.

Why This Matters

  • Spacing creates calm or density.
  • Inconsistency = visual noise.
  • Faster build: known padding/gap tokens.

Explanation

  • Base unit: 4 or 8.
  • Tokens: space.xs=4, sm=8, md=12/16, lg=24, xl=32.
  • Vertical rhythm: fixed margins after headings.

Examples

Bad: 5, 7, 11 px mixed.

Good: Only token-based spacing, documented per component.

Guided Exercise (10–15 minutes)

  1. Create spacing tokens and usage (section padding xl, card padding md).
  2. Set heading margin rules.
  3. Apply to a layout and label source tokens.

Independent Exercise (5–10 minutes)

Audit a page and replace random values with tokens.

Self-Check

  • Spacing scale exists.
  • Vertical rhythm documented.
  • Random px removed.

Optional Deepening