Spacing controls the amount of space for details within a component or detailed UI.

Also known as:
Grid units

AnchorNeed to know

  • 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.

To keep in mind

Grid Units

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.

Grid UnitsPixelsRemCode
0.25 (Minimum spacing)6px0.375rem$kz-var-spacing-xs


To keep in mind

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.

When to use and when not to use

When to use
  • Use spacing tokens to control the positioning of elements that are close together inside a container.
When not to use
  • For optical alignment, you might use custom adjustments or pair spacing tokens with custom adjustments.

See also

External links

Here are some examples from other design systems: