Spacing Tokens
The consistent and intentional use of a spacing system creates a harmonious experience for the our users. A spacing system also lays a foundation for responsive design and customisable UI density in the future, which will enhance the overall quality and accessibility of our products.
Spacing Tokens
Our spacing system use rem units so they scale with the base font size. This base unit
determines the spacing scale and ensures visual consistency across products. The pixel values displayed are
based on a 15px font size.
Scale
Building off of the 1rem base unit, the main foundation of our spacing system is the spacing scale. This scale is a limited set of space values that can be used to lay out UI elements in a consistent way.
| Token | Value | Example |
|---|---|---|
--sl-spacing-3x-small |
0rem (0px) | |
--sl-spacing-2x-small |
0.133rem (2px) | |
--sl-spacing-x-small |
0.333rem (5px) | |
--sl-spacing-small |
0.667rem (10px) | |
--sl-spacing-medium |
1rem (15px) | |
--sl-spacing-large |
1.333em (20px) | |
--sl-spacing-x-large |
1.667rem (25px) | |
--sl-spacing-2x-large |
2rem (30px) | |
--sl-spacing-3x-large |
2.33rem (35px) | |
--sl-spacing-4x-large |
2.667rem (40px) | |
--sl-spacing-5x-large |
3rem (45px) | |
--sl-spacing-6x-large |
5rem (60px) |