Spacers, the final frontier.


Spacers are what we use to define the gaps between elements on the page. We use an 8px spacing system. A comprehensive guide to the 8px spacing system by Bryn Jackson can be found here:

Here’s a handy little summary:

Spacer values:

  • tiny: 8px
  • small: 16px
  • medium: 24px
  • large: 48px
  • huge: 72px

The values have been picked so that developers and designers can look at designs and interfaces and know the gaps between elements without the need to measure them.

How we use spacers

Spacer values can be obtained by using the getSpacer($size) function, where $size is the english term for the size required.

  • To add medium padding to an element: padding: getSpacer(medium);
  • To add a tiny negative margin: margin: -1 * getSpacer(tiny);

Utility classes

All our spacing values are available as utility classes for margin and padding:

  • To add a large margin-top to an element: <h1 class="gg-u-mt-large">
  • To add a small padding-left to an element: <h1 class="gg-u-pl-small">

margin: auto is also available as a utility class:

  • To add margin: auto to both left and right: <h1 class="gg-u-mlr-auto">
  • To add margin: auto to all sides of an element: <h1 class="gg-u-m-auto">

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.

Sass JSON Less Variable Value
$gg-grid-unit gg-grid.unit @gg-grid-unit -var(unit) 8px
$gg-spacer-fine gg-spacer.fine @gg-spacer-fine -var(fine) 4px
$gg-spacer-huge gg-spacer.huge @gg-spacer-huge -var(huge) 72px
$gg-spacer-large gg-spacer.large @gg-spacer-large -var(large) 48px
$gg-spacer-medium gg-spacer.medium @gg-spacer-medium -var(medium) 24px
$gg-spacer-small gg-spacer.small @gg-spacer-small -var(small) 16px
$gg-spacer-tiny gg-spacer.tiny @gg-spacer-tiny -var(tiny) 8px