Fundations

Sizing

A guide to the sizing system and how to apply it in your project.

Token	Pixels	REM
1x	4px	0.25rem
2x	8px	0.5rem
3x	12px	0.75rem
4x	16px	1rem
5x	20px	1.25rem
6x	24px	1.5rem
7x	28px	1.75rem
8x	32px	2rem
9x	36px	2.25rem
10x	40px	2.5rem
11x	44px	2.75rem
12x	48px	3rem
13x	52px	3.25rem
14x	56px	3.5rem
15x	60px	3.75rem
16x	64px	4rem
17x	68px	4.25rem
18x	72px	4.5rem
19x	76px	4.75rem
20x	80px	5rem
21x	84px	5.25rem
22x	88px	5.5rem
23x	92px	5.75rem
24x	96px	6rem
25x	100px	6.25rem
26x	104px	6.5rem
27x	108px	6.75rem
28x	112px	7rem
29x	116px	7.25rem
30x	120px	7.5rem
31x	124px	7.75rem
32x	128px	8rem
...

<div class="size:6x">24px, width: 1.5rem; height: 1.5rem</div>

Adapt your user interface to different devices with flexible responsive syntax.

Learn how to use spacing tokens in your design system.

Overview