Spacing
Spacing is a common token used in just about every component.
Padding
There are three types of paddings: standard, productive, emotive
| Visual examples | ||
|---|---|---|
 |
 |
 |
Primary margins
Primary margins are used in any base foundation of elements and components. For example buttons, we have various sizes that uses primary margins according to its size.
| Visual example | Pixels | Rem | Token |
|---|---|---|---|
 |
16px | 1rem | var(-space-xs) |
 |
24px | 1.5rem | var(-space-sm) |
 |
32px | 2rem | var(-space-md) |
Other margins
Other margins are found for more specific and focused designs that require non primary margins.
| Visual example | Pixels | Rem | Token |
|---|---|---|---|
 |
8px | 0.5rem | var(-space-xxs) |
 |
48px | 3rem | var(-space-lg) |
 |
56px | 3.5rem | var(-space-xl) |
 |
64px | 4rem | var(-space-xxl) |
 |
128px | 8rem | var(-space-xxxl) |
 |
256px | 16rem | var(-space-xxxxl) |