# Spacing Systems

> Mathematical spacing systems, modular scales, and spatial rhythm.

- Skill: `dragoon0x/spacing-systems` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/spacing-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/spacing-systems/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/spacing-systems

---


# Spacing Systems

## Base-4 Scale (Recommended)
```
4  8  12  16  20  24  32  40  48  64  80  96  128
```
Why 4: divisible by 2 (half-pixel precision), works with common grid gutters.

## Base-8 Scale (Alternative)
```
8  16  24  32  40  48  64  80  96  128
```
Coarser, fewer decisions, works well for spacious designs.

## Application
| Context | Typical Values |
|---------|----------------|
| Icon-to-label gap | 4-8px |
| Input padding | 8-12px vertical, 12-16px horizontal |
| Card padding | 16-24px |
| Between form fields | 16-20px |
| Between cards | 16-24px |
| Section margin | 48-96px |
| Page margin (mobile) | 16-20px |
| Page margin (desktop) | 48-96px |

## Rules
1. Use only values from your scale (no magic numbers)
2. More space above headings than below (headings belong to what follows)
3. Related items: tight spacing. Unrelated: loose spacing.
4. Consistent padding within component types
5. Document your scale and enforce it via design tokens