All spacing values in our style guide are derived from the following spacing tokens. Our spacing system is built on an 8pt soft-grid, with a few additional sizes (namely at smaller sizes) added to add flexibility. Whenever you want to add white space
between elements, you should use on of these values.
| Name | Value (px) | Value (rem*) | Variable | Usage Notes |
| space-0 | 0 | 0 | $ref-space-0 | Zero-value, meant for instances when no space is needed. |
| space-50 | 2 | 0.125 | $ref-space-50 | |
| space-100 | 4 | 0.25 | $ref-space-100 | |
| space-200 | 8 | 0.5 | $ref-space-200 | |
| space-300 | 12 | 0.75 | $ref-space-300 | |
| space-400 | 16 | 1 | $ref-space-400 | |
| space-500 | 24 | 1.5 | $ref-space-500 | |
| space-600 | 32 | 2 | $ref-space-600 | |
| space-700 | 40 | 2.5 | $ref-space-700 | |
| space-800 | 48 | 3 | $ref-space-800 | |
| space-900 | 56 | 3.5 | $ref-space-900 | |
| space-1000 | 64 | 4 | $ref-space-1000 | |
| space-1100 | 88 | 5.5 | $ref-space-1100 | |
| space-1200 | 96 | 6 | $ref-space-1200 | |
| space-1300 | 128 | 8 | $ref-space-1300 | |
For general layout and utility spacing, a set of utility classes have been implemented to help provide designers flexibility in their layouts while also giving developers an efficient way to apply or update spacing between various elements on the page.
Basic spacing utility classes are static and apply the same across all breakpoints. Spacing utilities only apply to the following CSS rules: margin-top/bottom/left/right/x/y-space padding-top/bottom/left/right/x/y-space
Implementation
Use prefix for classes:
'x' for left and right
'y' for top and bottom
'sm' for mobile
'md' for tablet
'lg' for desktop
Static rules (applies to all breakpoints)
<p class="margin-x-700"></p>
<p class="margin-top-700"></p>
Responsive spacing classes, applies at specific breakpoints only
<p class="margin-top-lg-1200 margin-top-md-900 margin-top-sm-600"></p>
Static and responsive spacing classes, applies at specific breakpoints
<p class="padding-top-200 padding-top-lg-600"></p>