Spacing is an key element to clarify form and hierarchy.
Tokens
Name
Size
Pixels
0
0px
0px
px
1px
1px
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
3.5
14px
4
1rem
16px
5
20px
6
24px
7
28px
8
2rem
32px
9
2.25rem
36px
10
2.5rem
40px
11
2.75rem
44px
12
3rem
48px
14
3.5rem
56px
16
4rem
64px
20
5rem
80px
24
6rem
96px
28
7rem
112px
32
8rem
128px
36
9rem
144px
40
10rem
160px
44
11rem
176px
48
12rem
192px
52
13rem
208px
56
14rem
224px
60
15rem
240px
64
16rem
256px
We align our tokens to Tailwind's default spacing scale, which is based on the 8 point grid and it's subdivisions.
We assign applied spacing tokens to relationships between elements to treat spacing in a more semantic way. This means that the relationship between a subtitle and card on a page will always be the same, creating a sense of familiarity and understanding for anyone using the product. The user comes to know what to expect, gain confidence and infers meaning from visuals alone.
To learn how we use the new Figma Variables to achieve this, check out the article below.