Spacing Utilities Preview

Spacing tokens are predefined values used to maintain consistent distances between elements such as margins, padding, and gaps, particularly within auto layout settings. They provide a standardised system for spacing, ensuring uniformity and harmony across different components within a design project.

Gap Utilities

Gap .gap-*

Token Name
Value, rem
Value, px
Class
Spacing Preview
--spacing-0
0
0
.gap-0
--spacing-2
0.125
2
.gap-2
--spacing-4
0.25
4
.gap-4
--spacing-6
0.375
6
.gap-6
--spacing-8
0.5
8
.gap-8
--spacing-12
0.75
12
.gap-12
--spacing-16
1
16
.gap-16
--spacing-20
1.25
20
.gap-20
--spacing-24
1.5
24
.gap-24
--spacing-32
2
32
.gap-32
--spacing-40
2.5
40
.gap-40
--spacing-48
3
48
.gap-48
--spacing-56
3.5
56
.gap-56
--spacing-64
4
64
.gap-64

Row Gap .row-gap-*

Token Name
Value, rem
Value, px
Class
Spacing Preview
--spacing-0
0
0
.row-gap-0
--spacing-2
0.125
2
.row-gap-2
--spacing-4
0.25
4
.row-gap-4
--spacing-6
0.375
6
.row-gap-6
--spacing-8
0.5
8
.row-gap-8
--spacing-12
0.75
12
.row-gap-12
--spacing-16
1
16
.row-gap-16
--spacing-20
1.25
20
.row-gap-20
--spacing-24
1.5
24
.row-gap-24
--spacing-32
2
32
.row-gap-32
--spacing-40
2.5
40
.row-gap-40
--spacing-48
3
48
.row-gap-48
--spacing-56
3.5
56
.row-gap-56
--spacing-64
4
64
.row-gap-64

Column Gap .column-gap-*

Token Name
Value, rem
Value, px
Class
Spacing Preview
--spacing-0
0
0
.column-gap-0
--spacing-2
0.125
2
.column-gap-2
--spacing-4
0.25
4
.column-gap-4
--spacing-6
0.375
6
.column-gap-6
--spacing-8
0.5
8
.column-gap-8
--spacing-12
0.75
12
.column-gap-12
--spacing-16
1
16
.column-gap-16
--spacing-20
1.25
20
.column-gap-20
--spacing-24
1.5
24
.column-gap-24
--spacing-32
2
32
.column-gap-32
--spacing-40
2.5
40
.column-gap-40
--spacing-48
3
48
.column-gap-48
--spacing-56
3.5
56
.column-gap-56
--spacing-64
4
64
.column-gap-64