The size scale provides a consistent approach to sizing smaller UI elements across all components.
This scale is designed to cover the most commonly used sizes in design for smaller UI elements.
Sizing / core / size
0px
0px
0
2px
2px
1
0.125rem
4px
4px
2
0.25rem
6px
6px
3
0.325rem
8px
8px
4
0.5rem
10px
10px
5
0.625rem
12px
12px
6
0.75rem
14px
14px
7
0.875rem
16px
16px
8
1rem
18px
18px
9
1.125rem
20px
20px
10
1.25rem
24px
24px
11
1.5rem
28px
28px
12
1.75rem
32px
32px
13
2rem
36px
36px
14
2.25rem
40px
40px
15
2.5rem
44px
44px
16
2.75rem
48px
48px
17
3rem
64px
64px
18
4rem
80px
80px
19
5rem
96px
96px
20
6rem
112px
112px
21
7rem
128px
128px
22
8rem