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.

Padding Utilities

Paddings — All sides .p-*

Token
rem
px
Class
Preview
--spacing-0
0rem
0px
.p-0
--spacing-2
0.125rem
2px
.p-2
--spacing-4
0.25rem
4px
.p-4
--spacing-8
0.5rem
8px
.p-8
--spacing-12
0.75rem
12px
.p-12
--spacing-16
1rem
16px
.p-16
--spacing-24
1.5rem
24px
.p-24
--spacing-32
2rem
32px
.p-32
--spacing-40
2.5rem
40px
.p-40
--spacing-48
3rem
48px
.p-48
--spacing-56
3.5rem
56px
.p-56
--spacing-64
4rem
64px
.p-64

Padding — Top .pt-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.pt-0
--spacing-2
0.125
2
.pt-2
--spacing-4
0.25
4
.pt-4
--spacing-8
0.5
8
.pt-8
--spacing-12
0.75
12
.pt-12
--spacing-16
1
16
.pt-16
--spacing-24
1.5
24
.pt-24
--spacing-32
2
32
.pt-32
--spacing-40
2.5
40
.pt-40
--spacing-48
3
48
.pt-48
--spacing-56
3.5
56
.pt-56
--spacing-64
4
64
.pt-64

Padding — Bottom .pb-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.pb-0
--spacing-2
0.125
2
.pb-2
--spacing-4
0.25
4
.pb-4
--spacing-8
0.5
8
.pb-8
--spacing-12
0.75
12
.pb-12
--spacing-16
1
16
.pb-16
--spacing-24
1.5
24
.pb-24
--spacing-32
2
32
.pb-32
--spacing-40
2.5
40
.pb-40
--spacing-48
3
48
.pb-48
--spacing-56
3.5
56
.pb-56
--spacing-64
4
64
.pb-64

Padding — Left .pl-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.pl-0
--spacing-2
0.125
2
.pl-2
--spacing-4
0.25
4
.pl-4
--spacing-8
0.5
8
.pl-8
--spacing-12
0.75
12
.pl-12
--spacing-16
1
16
.pl-16
--spacing-24
1.5
24
.pl-24
--spacing-32
2
32
.pl-32
--spacing-40
2.5
40
.pl-40
--spacing-48
3
48
.pl-48
--spacing-56
3.5
56
.pl-56
--spacing-64
4
64
.pl-64

Padding — Right .pr-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.pr-0
--spacing-2
0.125
2
.pr-2
--spacing-4
0.25
4
.pr-4
--spacing-8
0.5
8
.pr-8
--spacing-12
0.75
12
.pr-12
--spacing-16
1
16
.pr-16
--spacing-24
1.5
24
.pr-24
--spacing-32
2
32
.pr-32
--spacing-40
2.5
40
.pr-40
--spacing-48
3
48
.pr-48
--spacing-56
3.5
56
.pr-56
--spacing-64
4
64
.pr-64

Padding — Horizontal .px-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.px-0
--spacing-2
0.125
2
.px-2
--spacing-4
0.25
4
.px-4
--spacing-8
0.5
8
.px-8
--spacing-12
0.75
12
.px-12
--spacing-16
1
16
.px-16
--spacing-24
1.5
24
.px-24
--spacing-32
2
32
.px-32
--spacing-40
2.5
40
.px-40
--spacing-48
3
48
.px-48
--spacing-56
3.5
56
.px-56
--spacing-64
4
64
.px-64

Padding — Vertical .py-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.py-0
--spacing-2
0.125
2
.py-2
--spacing-4
0.25
4
.py-4
--spacing-8
0.5
8
.py-8
--spacing-12
0.75
12
.py-12
--spacing-16
1
16
.py-16
--spacing-24
1.5
24
.py-24
--spacing-32
2
32
.py-32
--spacing-40
2.5
40
.py-40
--spacing-48
3
48
.py-48
--spacing-56
3.5
56
.py-56
--spacing-64
4
64
.py-64