Spacing
Foundational predefined REM-based set of variables called Spacing are used for margins, paddings, and gaps of components. This ensures consistent rhythm and layout behavior across the entire system.
Size Variables
All the base spacing values are defined using a simple valuex naming convention. You can think of x as a multiplier of the base unit (1rem = 16px).
Note
Variables can be remapped. For example, 0.25x might be set to 0.5rem based on your project’s scale. To learn more about how rem works and why we use it, see the Units page.
Gap Variables
Used in flex and grid layouts. These use t-shirt sizing for consistent spacing across UI elements.
- gap-xsmall
- gap-small
- gap-medium
- gap-large
- gap-xlarge
- gap-xxlarge
Utility Class Examples
Example of classes that apply spacing using the same variables as above for consistency:
- icon is-small
- flex_horizontal gap-small
- padding-bottom_small
- margin-top_small