Spacing is calculated from minimum, 17, and maximum, 21, font sizes times a modifier. The spacing responds by a scale of 1.2 between viewport widths of 320 and 1100.

Size Modifier Min size @320 Max size @1100
xxs 0.25 4.25 5.25
xs 0.50 8.50 10.50
s 1.00 17.00 21.00
m 2.00 34.00 42.00
l 3.00 51.00 63.00
xl 4.00 68.00 84.00
xxl 5.00 85.00 105.00

Spacing classes

Spacing classes are available for all sizes and directions for padding and margin, in the following pattern:


For example, if you wanted to add m margin-top to an element, use the class:


There’s also a special all direction, which adds margin or padding to the whole element. For example,


The following example gives a visual representation of the scale, using padding.

Open this example in a new tab
View the code for this example
<div class="space--padding-bottom-xxs"></div>
<div class="space--padding-bottom-xs"></div>
<div class="space--padding-bottom-s"></div>
<div class="space--padding-bottom-m"></div>
<div class="space--padding-bottom-l"></div>
<div class="space--padding-bottom-xl"></div>
<div class="space--padding-bottom-xxl"></div>

Spacing variables

Spacing variables are availabe for all sizes.

Size Variable
xxs var(--space-xxs)
xs var(--space-xs)
s var(--space-s)
m var(--space-m)
l var(--space-l)
xl var(--space-xl)
xxl var(--space-xxl)