Shape, Rhythm, Emotional Cues

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

Map how shape (round vs angular) and rhythm (repeat/spacing) convey meaning, and avoid visual noise.


Learning Goal

  • Assign meaning to shapes (trust, technical, playful).
  • Create rhythm: repetition, modules, consistent gaps.
  • Define affordance signals (shadow, border, radius).
  • Avoid noise: consistent radii, modular grid.

Why This Matters

  • Shape carries emotion.
  • Rhythm guides navigation.
  • Inconsistent radius/shadow erodes trust.

Explanation

Shape meaning

  • Round: friendly, safe.
  • Angular: technical, assertive.
  • Radius scale: xs, sm, md, lg, full — with usage rules.

Rhythm

  • Modular unit (e.g., 8px), consistent gaps.
  • Shadow/border only when signaling affordance.

Examples

Bad: Every card with a different radius, random shadows.

Good: Radius scale: cards md, buttons lg, chips full; shadow only on interactive elements.


Guided Exercise (10–15 minutes)

  1. Define the radius scale (xs/sm/md/lg/full) and map to components.
  2. Set rules for when to use shadow/border (affordance rule).
  3. Create a meaning table: round ↔ friendly, angular ↔ tech.

Independent Exercise (5–10 minutes)

Apply to a card grid: radius, shadow, gaps, modular rhythm.


Self-Check

  • Radius scale exists and is mapped to components.
  • Shadow/border rules documented.
  • Meaning table exists.
  • Good/bad examples documented.

Optional Deepening