Our spacing scale is based on 4px baseline grid. It includes small increments needed to create appropriate spatial relationships for detail-level designs.
We have 13 defined values that will help you to compose different components together, so they are well aligned.
|
Token |
Value |
Preview |
|---|---|---|
|
space.space0 |
0 |
|
|
space.space2 |
2px |
|
|
space.space4 |
4px |
|
|
space.space6 |
6px |
|
|
space.space8 |
8px |
|
|
space.space12 |
12px |
|
|
space.space16 |
16px |
|
|
space.space20 |
20px |
|
|
space.space24 |
24px |
|
|
space.space32 |
32px |
|
|
space.space44 |
44px |
|
|
space.space56 |
56px |
|
|
space.space72 |
72px |
|
Usage
Space
We can help merchants navigate the UI by grouping related information together. One way to do this is to use space to create relationships between elements on a page.
Ambiguous spacing can cause confusion and make it hard to understand the content.