apply-consistent-spacing

# 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] ```