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 - Material Design

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

Spacing Units - U.S. Web Design System - Spacing units

Space in Design Systems - Space in Design Systems