Spacing System

A great spacing system can provide a meaningful relationship between elements, divide clear sections and group things together without using separators, and provide a consistent look and feel across the site and create excellent visual hierarchy.

By adjusting the $base-space variable, we generate a list of spacings that ideally would cover most of the use cases for padding margin gap and grid-gap , avoid using percentage unless it’s necessary. the multipliers are not restricted, more defined multiplier can be introduced in between the list.

Avoid using those values for letter-spacing word-spacing radius border-width etc. Those needed to be defined separately.

There are always exceptions to the rule, but we should use those variables whenever possible.

Here’s the sample code:

$base-space: 1rem;  //16px

$space-min: $base-space / 4; //4px
$space-xs: $base-space / 2;  //8px
$space-s: $base-space; //16px
$space-m: $base-space * 2; //32px
$space-l: $base-space * 4;  //64px
$space-xl: $base-space * 8; //128px
$space-xxl: $base-space * 16; // 256px

A great example of properly implemented spacing:

Other things to consider:

Responsive spacing based on breakpoints?
Minimal tap areas for mobile devices?
Text line-height conflicts?

Reference:

Google Material design spacing methods - https://material.io/design/layout/spacing-methods.html#baseline-grid

IBM Carbon Design spacing system - https://www.carbondesignsystem.com/guidelines/spacing/overview/#spacing-scale

Spacing Units - U.S. Web Design System - https://designsystem.digital.gov/design-tokens/spacing-units/#spacing-unit-tokens

Space in Design Systems -