Skill: Apply Consistent Spacing
Purpose
Use a systematic spacing scale to create rhythm, group related elements, and separate distinct sections while starting with generous whitespace and removing as needed.
Type
Generative + Evaluative
Input
- UI layout or component structure
- Content grouping (what belongs together)
- Desired density (compact vs. airy)
- Base unit (default: 16px)
Output
- Spacing scale specification
- Margin/padding values for each element
- Pass/Fail assessment of existing spacing
Transformation Performed
Maps spatial relationships to a systematic spacing scale with minimum 25% differences between values, ensuring clear grouping and breathing room.
Decision Criteria
PASS (Good Spacing)
- Uses systematic scale with minimum 25% jumps between values (12px → 16px → 24px → 32px)
- Related elements have smaller gaps (4-16px within groups)
- Unrelated sections have larger gaps (24-64px between groups)
- More space around groups than within groups (ambiguous spacing avoided)
- Consistent internal padding (cards, buttons, inputs)
- White space creates breathing room (doesn't fill entire screen width)
- Uses whitespace instead of borders for separation
FAIL (Poor Spacing)
- Arbitrary values without system (13px, 27px, 41px)
- Values too similar (<25% difference - can't distinguish)
- Related elements too far apart (weakens grouping)
- Unrelated elements too close together (ambiguous relationships)
- Equal spacing everywhere (within groups = between groups)
- Content stretched to fill wide canvas unnecessarily
- Using borders when whitespace would suffice
The Spacing Scale
Systematic Scale (25% minimum jumps)
Base: 16px (browser default)
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
Why these values:
- 4px → 8px = 100% jump (small end needs bigger jumps)
- 8px → 12px = 50% jump
- 12px → 16px = 33% jump
- 16px → 24px = 50% jump
- 24px → 32px = 33% jump
- 32px → 48px = 50% jump
- 48px → 64px = 33% jump
- 64px → 96px = 50% jump
Common Usage Patterns
| Spacing | Usage |
|---|---|
| 4px | Icon gaps, tight internal padding |
| 8px | Small component gaps, tight button padding |
| 12px | Input padding, component internal spacing |
| 16px | Standard gap, card padding |
| 24px | Section internal padding, larger gaps |
| 32px | Major section separation |
| 48-64px | Page section breaks |
| 96px | Hero sections, major page divisions |
The Proximity Principle
- Elements closer together appear related
- Elements farther apart appear unrelated
- More space around groups than within groups
- Use spacing to show relationships without borders
Key Principles
1. Start With Too Much Whitespace
Instead of adding space until something looks okay, start with way too much space and remove until it's right.
Why: Elements given minimum breathing room look "not actively bad" but not great. Starting with excess ensures adequate whitespace in the final design.
2. Avoid Ambiguous Spacing
Ensure there is more space around the entire group than within the group.
Example - Form Labels:
- ❌ Label margin-bottom: 12px, Input margin-bottom: 12px (equal = ambiguous)
- ✅ Label margin-bottom: 4px, Input margin-bottom: 24px (within < around = clear)
3. Don't Fill The Whole Screen
Just because you have 1200-1400px of canvas doesn't mean content should stretch to fill it.
- Give elements exactly the space they need
- If you have extra room, leave it as whitespace
- Paragraph max-width: 600px is fine even if nav is 1200px
- Shrink the canvas if designing small interfaces
4. Whitespace > Borders
Instead of using borders to separate elements:
- Add extra spacing between groups
- Use different background colors
- Use subtle box shadows (less distracting than borders)
Visual/UX Signals Used
- Proximity: Closer elements = related
- Ambiguity gap: More space around groups than within
- Breathing room: Generous space = cleaner, more polished
- Canvas utilization: Don't stretch to fill; use what you need
Common Failure Modes
| Failure | Description | Fix |
|---|---|---|
| Arbitrary Values | 15px here, 17px there | Use systematic scale exclusively |
| Weak Grouping | Equal spacing within and between groups | Make between-group spacing significantly larger |
| Ambiguous Spacing | Label and input have same margin | Reduce within-group, increase between-groups |
| Border-Dependence | Using borders instead of space | Increase gap, remove border |
| Canvas Filling | Content stretched to 1200px unnecessarily | Use only the space needed; let whitespace fill rest |
| Minimal Breathing Room | Adding just enough space to not look bad | Start with excess, remove until right |
| Inconsistent Padding | Some buttons 8px, others 12px | Pick one scale value, apply everywhere |
Prerequisites
- Content grouped by relationship
- Visual hierarchy established
Dependencies
establish-visual-hierarchy(spacing reinforces hierarchy)group-related-elements(proximity shows relationships)
Refactoring UI References
- "Start with too much white space"
- "Establish a spacing and sizing system" (25% minimum jumps)
- "Avoid ambiguous spacing"
- "Don't fill the whole screen"
- "Use fewer borders"
- "White space should be removed, not added"
Example Assessment
Input: Form with: Title (margin-bottom: 16px), Label (margin-bottom: 12px), Input (margin-bottom: 12px), next Label (margin-top: 12px)
Evaluation: FAIL - Ambiguous spacing
- Label to Input: 12px
- Input to next Label: 12px
- No clear grouping - user can't tell which label belongs to which input
Recommendation:
- Title margin-bottom: 24px (separate section)
- Label margin-bottom: 4px (tight coupling to input)
- Input margin-bottom: 24px (clear separation to next group)
- Result: Within-group (4px) << Between-groups (24px) = Clear relationship
Before:
Label A [Input A] Label B <- Ambiguous: belongs to A or B? [Input B]
After:
Label A [Input A] Label B <- Clearly belongs to B [Input B]
