Space is a key component of design, not an accidental gap which appears between components. It helps users understand how components relate to each other, and find and focus on the content they want to consume.

A series of space values enables more efficient design decision making. The space palette comprises multiples of the body font size of 18px.

These values can be combined to create fluid spaces whose size depends on the browser’s current viewport width. This is a very code-efficient way to ensure designs always make the most of the available screen space and feel at home on any device.

To see this in action, resize your browser window and watch the red squares below scale at different rates.

Base sizes

Example Name Size
3xs 4.5px
2xs 9px
xs 13.5px
s 18px
m 27px
l 36px
xl 54px
2xl 72px
3xl 108px
4xl 144px

Interpolated sizes

Example Name From To
3xs-2xs 4.5px 9px
2xs-xs 9px 13.5px
xs-s 13.5px 18px
s-m 18px 27px
m-l 27px 36px
l-xl 36px 54px
xl-2xl 54px 72px
2xl-3xl 72px 108px
3xl-4xl 108px 144px
s-l 18px 36px
s-xl 18px 54px
m-xl 27px 54px
l-2xl 36px 72px
l-3xl 36px 108px
xl-3xl 54px 108px
l-4xl 36px 144px

CSS custom properties

Underpinning the fluid space system is a set of calculations made by CSS custom properties. Using the CSS lock technique, these fluid space units can be used with the following syntax:

.c-component {
  padding: var(--space-s);

However, this syntax should be avoided if at all possible. Unless there are calc() calculations to be made (calc(var(--space-xs) + 10px)), you should use the SCSS or utility class syntax. This provides a sensible fallback for older browsers.

SCSS mixin

Fluid space is exposed via a number of mixins. As IE support is required and CSS Custom Properties are doing most of the heavy lifting in this fluid system, we need to be able to fallback to sensible defaults, without including an absurd number of media queries, as is usually achieved with CSS locks.

There is a space() mixin that allows you to pass a property and up to four arguments. These map directly to the padding/margin shorthand arguments of top, right, bottom, and left:

.c-component {
  @include padding('s', 0);

There are also mixins for the four direction properties:

.c-component {
  @include margin-left('s');

Space units can also be interpolated to give a sliding scale from smaller to larger screens. This example runs the top margin between 'small' and 'medium', the right & left as 'large', and the bottom as 4rem:

.c-component {
  @include margin('s-m', 'l', 4rem);

Source → Compiled

Source Compiled
@include margin-left('s') margin-left: 18px;
margin-left: var(--space-s);
@include padding('l', 0) padding: 36px 0;
padding: var(--space-l) 0;
@include margin('s-m', 'l', 4rem) margin: 18px 36px 4rem;
margin: var(--space-s-m) var(--space-l) 4rem;

Utility classes

As well as custom properties, space units can be applied using utility classes, with one set for padding and another for margins.

<div class="u-margin-bottom-s"></div> // Small margin bottom
<div class="u-pad-y-l"></div> // Large padding top and bottom
<div class="u-margin-bottom-l-xl"></div> // Large to Extra Large margin bottom