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

1. Proximity: Closer elements = related
2. Ambiguity gap: More space around groups than within
3. Breathing room: Generous space = cleaner, more polished
4. 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]