Spacing
Spacing scale shipped with the Saas UI preset
The spacing scale is a 4px grid (1 = 0.25rem) multiplied by
--scale-factor. Size tokens reuse the same steps, so p="4" and boxSize="4"
stay in sync when you change scale.
theme.tokens.spacing
Name
Value
Pixel
1
calc(0.25rem * var(--scale-factor))
NaNpx
2
calc(0.5rem * var(--scale-factor))
NaNpx
3
calc(0.75rem * var(--scale-factor))
NaNpx
4
calc(1rem * var(--scale-factor))
NaNpx
5
calc(1.25rem * var(--scale-factor))
NaNpx
6
calc(1.5rem * var(--scale-factor))
NaNpx
7
calc(1.75rem * var(--scale-factor))
NaNpx
8
calc(2rem * var(--scale-factor))
NaNpx
9
calc(2.25rem * var(--scale-factor))
NaNpx
10
calc(2.5rem * var(--scale-factor))
NaNpx
12
calc(3rem * var(--scale-factor))
NaNpx
14
calc(3.5rem * var(--scale-factor))
NaNpx
16
calc(4rem * var(--scale-factor))
NaNpx
20
calc(5rem * var(--scale-factor))
NaNpx
24
calc(6rem * var(--scale-factor))
NaNpx
28
calc(7rem * var(--scale-factor))
NaNpx
32
calc(8rem * var(--scale-factor))
NaNpx
36
calc(9rem * var(--scale-factor))
NaNpx
40
calc(10rem * var(--scale-factor))
NaNpx
44
calc(11rem * var(--scale-factor))
NaNpx
48
calc(12rem * var(--scale-factor))
NaNpx
52
calc(13rem * var(--scale-factor))
NaNpx
56
calc(14rem * var(--scale-factor))
NaNpx
60
calc(15rem * var(--scale-factor))
NaNpx
64
calc(16rem * var(--scale-factor))
NaNpx
72
calc(18rem * var(--scale-factor))
NaNpx
80
calc(20rem * var(--scale-factor))
NaNpx
96
calc(24rem * var(--scale-factor))
NaNpx
0.5
calc(0.125rem * var(--scale-factor))
NaNpx
1.5
calc(0.375rem * var(--scale-factor))
NaNpx
2.5
calc(0.625rem * var(--scale-factor))
NaNpx
3.5
calc(0.875rem * var(--scale-factor))
NaNpx
4.5
calc(1.125rem * var(--scale-factor))
NaNpx