Spacing System
- Jon Zhang
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