Also known as:
Grid units

Spacing

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

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

An image belongs here…

Grid UnitsPixelsRemCode
0.25 (Minimum spacing)6px0.375rem$ca-grid / 4
0.512px0.75rem$ca-grid / 2
124px1.5rem$ca-grid
1.536px2.25rem$ca-grid * 1.5
248px3rem$ca-grid * 2
2.560px3.75rem$ca-grid * 2.5
372px4.5rem$ca-grid * 3
3.584px5.25rem$ca-grid * 3.5
496px6rem$ca-grid * 4

Examples

An image belongs here…

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

  • To control the positioning of elements that are close together inside a container.

See also

External links

Here are some examples from other design systems: