SpacerScale

Preset Gallery

8 curated spacing scales. Click to load in the builder.

4px Base Grid

System

Classic 4px grid — tight, precise, widely used

1
4
2
8
3
12
4
16
5
24

8px Base Grid

System

Coarser 8px grid — faster decisions, fewer tokens

1
8
2
16
3
24
4
32
5
48

Tailwind Default

Framework

Tailwind CSS spacing scale (0-96)

1
4
2
8
3
12
4
16
5
20

Material Design

Framework

Google Material spacing increments

1
4
2
8
3
16
4
24
5
40

Bootstrap

Framework

Bootstrap 5 spacing utility scale

1
4
2
8
3
16
4
24
5
48

Fibonacci Sequence

Ratio

1, 2, 3, 5, 8, 13, 21, 34 — natural rhythm

1
1
2
2
3
3
5
5
8
8

Major Third (1.25x)

Ratio

Type-ratio-inspired geometric spacing

1
4
2
5
3
6.25
4
8
5
10

T-Shirt Sizes

Semantic

Semantic xs to 4xl sizing convention

xs
4
sm
8
md
16
lg
24
xl
32