Spacing
8-point grid system for consistent spacing
Effective spacing is the strategic use of white space between text, images, buttons, and other interface elements. This ensures visual harmony, readability, and usability across all user experiences you create.
Our design system leverages a global 8-point grid. This system establishes a baseline of 8 pixels and uses multiples of 8 to create a consistent and predictable set of spacing values.
Spacing Scale
Size
Visual
Multiplier (x)
Value (Px)
2XS
0.25
2
XS
0.5
4
S
1
8
M
1.5
12
L
2
16
XL
3
24
2XL
4
32
3XL
5
40
4XL
6
48
5XL
7
56
6XL
8
64
7XL
9
72
8XL
10
80
9XL
11
88
10XL
12
96
11XL
13
104
12XL
14
112
Example Usage
This demonstrates how spacing can be used in a component with consistent 16px (L) spacing.
Constant Contact
Brand
Offer
Description
Description
All spacing in this card uses 16px (spacing.l) for consistent rhythm
Usage in Code
Accessing Spacing Tokens
// In styled-components
const Container = styled.div`
padding: ${props => props.theme.spacing.l};
gap: ${props => props.theme.spacing.m};
margin-bottom: ${props => props.theme.spacing['2xl']};
`
// Using VStack/HStack with gapToken
<VStack gapToken="l">
<Component1 />
<Component2 />
</VStack>
// Direct value access
<div style={{ padding: theme.spacing.xl }}>
Content
</div>Best Practices
• Use spacing tokens instead of arbitrary pixel values
• Stick to the 8-point grid for consistency
• Use smaller spacing (2XS-M) for tight elements like icons and badges
• Use medium spacing (L-2XL) for component padding and gaps
• Use larger spacing (3XL-12XL) for section margins and page layout