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)
- Define the radius scale (xs/sm/md/lg/full) and map to components.
- Set rules for when to use shadow/border (affordance rule).
- 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
- IBM Carbon Shape: https://carbondesignsystem.com/elements/shape
- Affordance basics: https://www.nngroup.com/articles/affordances-heuristics/