// Use systematic spacing with 25% minimum jumps, start with excess whitespace
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
Create helpful, actionable zero-content states
| name | apply-consistent-spacing |
| description | Use systematic spacing with 25% minimum jumps, start with excess whitespace |
| domain | ui-design |
| skill-type | generative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | [] |
Use a systematic spacing scale to create rhythm, group related elements, and separate distinct sections while starting with generous whitespace and removing as needed.
Generative + Evaluative
Maps spatial relationships to a systematic spacing scale with minimum 25% differences between values, ensuring clear grouping and breathing room.
Base: 16px (browser default)
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
Why these values:
| 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 |
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.
Ensure there is more space around the entire group than within the group.
Example - Form Labels:
Just because you have 1200-1400px of canvas doesn't mean content should stretch to fill it.
Instead of using borders to separate elements:
| 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 |
establish-visual-hierarchy (spacing reinforces hierarchy)group-related-elements (proximity shows relationships)Input: Form with: Title (margin-bottom: 16px), Label (margin-bottom: 12px), Input (margin-bottom: 12px), next Label (margin-top: 12px)
Evaluation: FAIL - Ambiguous spacing
Recommendation:
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]