Spacing
Spacing controls the amount of space for details within a component or detailed UI.
Also known as:
Grid units
Guidelines
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.
| Grid Units | Pixels | Rem | Code |
|---|---|---|---|
| 0.25 (Minimum spacing) | 6px | 0.375rem | $kz-var-spacing-xs |
| 0.5 | 12px | 0.75rem | $kz-var-spacing-sm |
| 1 | 24px | 1.5rem | $kz-var-spacing-md |
| 1.5 | 36px | 2.25rem | $kz-var-spacing-lg |
| 2 | 48px | 3rem | $kz-var-spacing-xl |
| 2.5 | 60px | 3.75rem | $kz-var-spacing-xxl |
| 3 | 72px | 4.5rem | $kz-var-spacing-xxxl |
| 3.5 | 84px | 5.25rem | $kz-var-spacing-xxxxl |
| 4 | 96px | 6rem | $kz-var-spacing-xxxxxl |
Examples
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: