Spacing
A rhythm, not a ruler.
Consistent spacing creates visual harmony without conscious effort. These ten values — drawn from a 4px base grid — are the preferred palette for all YMF design work across screen and print. Reach for the step that fits the intent. Values are given in px for screen and Figma, and mm for print tools.
Preferred steps
4px1mmHairline — icon nudge, border offset
8px2mmTight — icon gaps, badge padding
12px3mmCompact — dense list rows, tag gaps
16px4mmBase — default padding, inline gaps
24px6mmComfortable — card padding, field spacing
32px8mmRelaxed — between related elements
48px12mmOpen — between content sections
64px16mmGenerous — major section breaks
96px24mmPage-level — top and bottom padding
128px32mmDisplay — hero and title vertical rhythm
Quick reference
| px | mm | Use for |
|---|---|---|
| 4 | 1 | Hairline — icon nudge, border offset |
| 8 | 2 | Tight — icon gaps, badge padding |
| 12 | 3 | Compact — dense list rows, tag gaps |
| 16 | 4 | Base — default padding, inline gaps |
| 24 | 6 | Comfortable — card padding, field spacing |
| 32 | 8 | Relaxed — between related elements |
| 48 | 12 | Open — between content sections |
| 64 | 16 | Generous — major section breaks |
| 96 | 24 | Page-level — top and bottom padding |
| 128 | 32 | Display — hero and title vertical rhythm |