Home

Spacing

A set of defined spacing helps with creating consistent user interfaces. For spacing under 48 px a 4 px incrament is used. The spacing is applicable for both horizontal and vertical spacing.

TokenValueExample
--r-spacing-025 0.25rem
--r-spacing-050 0.5rem
--r-spacing-075 0.75rem
--r-spacing-100 1rem
--r-spacing-125 1.25rem
--r-spacing-150 1.5rem
--r-spacing-175 1.75rem
--r-spacing-200 2rem
--r-spacing-225 2.25rem
--r-spacing-250 2.5rem
--r-spacing-275 2.75rem
--r-spacing-300 3rem
--r-spacing-350 3.5rem
--r-spacing-400 4rem
--r-spacing-450 4.5rem
--r-spacing-500 5rem