The design system uses multiples of
8px for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.
- Use the margin and padding utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds
16pxof spacing would be
ds-u-margin--2. We can calculate this by looking at the class's modifier (
2) and multiplying that by our multiple:
2 × 8px = 16px
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format
*is a number between 1–7 (i.e.