Imagine space as the breathing room between different elements in your design. It plays a vital role in making everything look balanced, organized, and easy to understand. By giving each element its proper place and ensuring a clear hierarchy, space makes the content on a page more user-friendly and enjoyable to explore.
Table of Content
| Design Token Name | Pixel Value | Rem Value |
|---|---|---|
| spacing-05 | 2 | 0.125 |
| spacing-1 | 4 | 0.25 |
| spacing-2 | 8 | 0.5 |
| spacing-3 | 12 | 0.75 |
| spacing-4 | 16 | 1 |
| spacing-5 | 20 | 1.25 |
| spacing-6 | 24 | 1.5 |
| spacing-8 | 32 | 2 |
| spacing-10 | 40 | 2.5 |
| spacing-12 | 48 | 3 |
| spacing-16 | 64 | 4 |
| spacing-20 | 80 | 5 |
| spacing-24 | 96 | 6 |
| spacing-28 | 112 | 7 |
| spacing-32 | 128 | 8 |
| spacing-40 | 160 | 10 |
| spacing-48 | 192 | 12 |
| spacing-56 | 224 | 14 |
| spacing-64 | 256 | 16 |
Usage Guidelines
Use spacing between components
Effective spacing is essential for defining the appropriate distance between components within a design.
It’s important to note that spacing values are meant to regulate the gaps between components, and they do not apply to the internal padding within a single component. For instance, the space between the top of a button and a label should not be governed by a spacing value.
Changelog
| Date | Version | Notes |
| Dec 31, 2023 | 1.0.0 | Initial entry |