# Whitespace Mastery

> Advanced whitespace techniques, negative space as design element, and breathing room strategies.

- Skill: `dragoon0x/whitespace-mastery` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/whitespace-mastery`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/whitespace-mastery/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/whitespace-mastery

---


# Whitespace Mastery

## Whitespace as Communication

### Macro Whitespace (Between Sections)
- More space = greater separation of ideas.
- Section spacing should be 2-3x component spacing.
- Hero sections use whitespace to convey importance.
- Luxury brands use extreme whitespace (one element per viewport).

### Micro Whitespace (Within Components)
- Padding inside cards, buttons, inputs.
- Line height in text blocks.
- Letter spacing in headlines.
- Icon-to-label spacing.

## Proportional Spacing
- Space above a heading should be MORE than space below.
- This visually connects the heading to its content.
```
Content from previous section

                              ← more space here (32-48px)
## New Section Heading
                              ← less space here (8-16px)
Content for this section
```

## Anti-Patterns
- Uniform spacing everywhere (no hierarchy).
- Cramming elements to "fit above the fold."
- Adding spacing to fill space (whitespace needs purpose too).
- Inconsistent spacing that creates unintended groupings.