Spacing throughout our design system utilizes ‘Grid Units’ to inform spacing, including margins and padding for both horizontal and vertical rhythms. It aligns with our 24px baseline grid, providing a single measurement unit that works holistically across our design assets.
|0.25 (Minimum spacing)||6px||0.375rem||$ca-grid / 4|
|0.5||12px||0.75rem||$ca-grid / 2|
|1.5||36px||2.25rem||$ca-grid * 1.5|
|2||48px||3rem||$ca-grid * 2|
|2.5||60px||3.75rem||$ca-grid * 2.5|
|3||72px||4.5rem||$ca-grid * 3|
|3.5||84px||5.25rem||$ca-grid * 3.5|
|4||96px||6rem||$ca-grid * 4|
Spacing helps to relate elements together through proximity. Grid units give us a uniform scale of whitespace sizes that creates a visual cadence that engenders a perception of quality flowing from polish and consistency.
Here are some examples from other design systems: