Spacing controls the amount of space for details within a component or detailed UI.
- Use Grid Units. Culture Amp’s Grid Unit is 24px. E.g. margin: $ca-grid;
- As a general rule, we use 12px (½ Grid Unit) or 24px (1 Grid Unit) for most spacing requirements.
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||$kz-spacing-xs|
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.
- As a general rule, we use 12px (½ Grid Unit) or 24px (1 Grid Unit) to separate elements within a container.
- Use spacing tokens to control the positioning of elements that are close together inside a container.
- For optical alignment, you might use custom adjustments or pair spacing tokens with custom adjustments.
Here are some examples from other design systems: