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 - https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
Â
Â