Foundations / Spacing
Spacing
The spacing scale: 15 steps, from 2 to 192 px, based on multiples of 4 px. Use it for inner space, gaps and margins on web, slides and pieces.
Version 1.4 · Oct 20, 2026
Scale
The number in the name multiplies 4 px: space-4 = 16 px. The right column is the same value in code (rem).
space-0-5
2 px
0.125 rem
space-1
4 px
0.25 rem
space-2
8 px
0.5 rem
space-3
12 px
0.75 rem
space-4
16 px
1 rem
space-5
20 px
1.25 rem
space-6
24 px
1.5 rem
space-8
32 px
2 rem
space-10
40 px
2.5 rem
space-12
48 px
3 rem
space-16
64 px
4 rem
space-20
80 px
5 rem
space-24
96 px
6 rem
space-32
128 px
8 rem
space-48
192 px
12 rem
Which step to use
Where
Step
What for
Inside cards and grids
space-6 · 24 px
Inner space of cards and the gap between them.
Between blocks in a section
space-8 · 32 px
Separates title, content and notes.
Between sections
space-24 · 96 px
Separates sections of a page.
Slide margins (1920 × 1080)
space-32 · 128 px
Side margins of the slide grid (grid-deck).
Rule
Always use a step from the scale for inner space, gaps and margins. If a value is not in the scale, round it to the nearest step.
What to do and what to avoid
8 · 16 · 24 px
10 · 21 · 30 px