Density Modes and Responsiveness
Day 13 of 30 · The Playbook 2026 – Masterclass for Designers
Define airy/comfort/dense modes and adjust spacing/type per breakpoint or user setting.
Learning Goal
- 3 density modes: airy/comfort/dense.
- Token-based switching (gap, padding, type size) per breakpoint or user pref.
- Responsive type/spacing table.
- Document examples: table, card grid, form.
- Apply to all courses consistently.
Why This Matters
- B2B/dashboard often needs dense mode.
- Mobile airy, desktop efficient.
- Inconsistent density = chaos.
Explanation
- Mode switch: space tokens and type sizes change.
- Airy: space.lg, type +1; Dense: space.sm/md, type -1.
- Usage: data-heavy → dense; marketing → airy.
Examples
Bad: Same spacing everywhere; tables too airy.
Good: Dashboard dense: smaller padding/gaps, type -1; marketing airy.
Guided Exercise (10–15 minutes)
- Create a density table: airy/comfort/dense → spacing/type values.
- Set examples: table dense, card comfort, hero airy.
- Document switch rules (where to use each mode).
Independent Exercise (5–10 minutes)
Implement one component in two density modes; capture before/after.
Self-Check
- Density table exists.
- Examples documented.
- Switch rules defined.
Optional Deepening
- Fluent density: https://fluent2.microsoft.design/styles/layout#density
- Material responsive layout: https://m3.material.io/foundations/layout/overview