Spacing Calculator
Calculate, visualize, and learn about spacing values in our design system
Spacing Calculator
Calculate spacing values based on our design system tokens
p-4padding: 16px;Spacing Best Practices
- Use consistent spacing to create visual rhythm
- Increase spacing for separation between unrelated elements
- Decrease spacing for related elements to show their connection
- Use the 8px grid system (multiples of 4 or 8) for consistency
- Consider content density needs when choosing spacing values
Spacing Preview
Visualize the selected spacing value
Content
Padding: 4 (16px)
Spacing Scale
Our design system uses an 8-point grid system as a base
2px (0.5)
4px (1)
8px (2)
16px (4)
24px (6)
32px (8)