Spacing

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.

Usage

• 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 16px of 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 CSS file, you can also use the spacer CSS variables, which follow the format --spacer-* where * is a number between 1–7 (i.e. --spacer-4)

Learn more

• The 8-Point Grid