taewoongheo/spatial-design

Spatial Design — Spacing & Layout Principles

Spacing Scale

Use a consistent scale based on 8pt increments. Never use arbitrary values.

| Token | Value | Use | |-------|-------|-----| | xs | 4px | Tight inline gaps, icon-to-label | | sm | 8px | Related element spacing | | md | 16px | Section padding, standard gaps | | lg | 24px | Group separation | | xl | 32px | Major section breaks | | 2xl | 48px | Page-level separation |

Proximity

• Related elements close together — label and its input, icon and its text
• Unrelated groups far apart — use at least 2x the inner spacing as outer spacing
• If two elements look related but aren't, increase the gap
• If two elements are related but look separate, decrease the gap

Optical Alignment

• Align to visual center, not mathematical center — rounded shapes and text descenders need optical compensation
• Icons next to text: align to x-height, not baseline
• Leading icons in lists: consistent left edge, not center-aligned

Density Control

• One primary action per screen — if multiple CTAs compete, the hierarchy is broken
• Progressive disclosure — show only what's needed now, reveal more on demand
• 5-7 items max in any ungrouped list before cognitive overload
• Squint test — blur your eyes. If the hierarchy doesn't read, spacing/sizing is wrong

Touch Targets

• Minimum 44x44pt for all interactive elements
• Spacing between touch targets: at least 8pt to prevent mis-taps
• Thumb-reachable zones: primary actions in bottom 1/3 of screen

Grouping

• Use spacing, not lines, to separate groups (lines add visual noise)
• Background color change is stronger separation than spacing alone
• Consistent group structure: if one section has header + content + action, all sections should follow