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.
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).
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.
Used in flex and grid layouts. These use t-shirt sizing for consistent spacing across UI elements.
Example of classes that apply spacing using the same variables as above for consistency: