07 間
Spacing
Every measurement snaps to multiples of 4px.
Philosophy
Space is not the absence of content. In Ma (間), the emptiness is the substance. The spacing scale is built on a 4px base unit — a rhythm that is mathematically clean, perceptually coherent, and deeply influenced by the Japanese ken, the modular unit from which all architecture grows.
Spacing Scale
Every token is a fluid clamp() value. Small values (spacing-1, spacing-2) are fixed; larger values scale with viewport width, capped at their maximum.
spacing-1Tight gaps — icon + label, inline
4px
spacing-2Default gap — tags, metadata
8px
spacing-3Compact component padding
12px
spacing-4Standard padding, mobile margins
16px
spacing-5Component internal spacing
20px
spacing-6Tablet gutters, list item gap
24px
spacing-7Medium component gap
28px
spacing-8Desktop gutters and margins
32px
spacing-10Section padding (small)
40px
spacing-12Typographic block separation
48px
spacing-16Major section breaks
64px
spacing-20Hero sub-section spacing
80px
spacing-24Hero whitespace
96px
spacing-32Maximum vertical ma — Seijaku
128px
| Token | Max | CSS Variable | Use |
|---|---|---|---|
spacing-1 | 4px | --spacing-1 | Tight gaps — icon + label |
spacing-2 | 8px | --spacing-2 | Default gap — tags, metadata |
spacing-3 | 12px | --spacing-3 | Compact component padding |
spacing-4 | 16px | --spacing-4 | Standard padding |
spacing-6 | 24px | --spacing-6 | Tablet gutters, list gaps |
spacing-8 | 32px | --spacing-8 | Desktop gutters, margins |
spacing-12 | 48px | --spacing-12 | Typographic block separation |
spacing-16 | 64px | --spacing-16 | Major section breaks |
spacing-24 | 96px | --spacing-24 | Hero whitespace |
spacing-32 | 128px | --spacing-32 | Maximum vertical ma |
Spacing Picker
Adjust gap and padding to preview how spacing tokens compose in a container.
Element A
Element B
Element C
gap: 24pxpadding: 16px
Decision Rules
- Never invent a spacing value. If it is not in the scale, question whether it belongs.
- Prefer larger spacing for section breaks. The emptiness between sections is the design.
- Never use margin for rhythm within a component. Use gap (Flexbox/Grid) instead — it is reversible and does not collapse.
- Logical properties only. Use
margin-block,padding-inline,gap— nevermargin-top,padding-left. The system includes custom Tailwind utilities:mbe-*,mbs-*,mis-*,mie-*,pbe-*,pbs-*,pis-*,pie-*.