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-*.