Spacing

Spacing tokens for consistent layout and rhythm across the design system.

Spacing Scale

The spacing scale provides values from 0 to 32px in increments that follow a logical progression:

Usage Examples

Here are practical examples of how to use spacing tokens in your components:

Padding Examples

Gap Examples

Margin Examples

Interactive Tool

Use the interactive tool below to test different spacing values and see how they affect component layouts:

CSS Variables

All spacing values are available as CSS variables:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Best Practices

• Use spacing tokens consistently: Always use CSS variables instead of hardcoded pixel values
• Follow the scale: Stick to the predefined spacing values (0, 1, 2, 3, 4, 6, 8) rather than arbitrary values
• Maintain rhythm: Use consistent spacing throughout your application to create visual rhythm
• Consider density: Adjust spacing based on density mode (compact, normal, comfortable)
• Responsive spacing: Use smaller spacing values on mobile devices and larger values on desktop

Density Modes

Spacing can be adjusted based on density mode. See Density documentation for more details.