Spacing System Generator
Create consistent spacing scales for design systems (4px, 8px base)
Spacing Configuration
Configure your spacing system with base unit
Spacing Scale Preview
Visual representation of your spacing system
0
0px0.000rem
1
8px
8px0.500rem
2
16px
16px1.000rem
3
24px
24px1.500rem
4
32px
32px2.000rem
5
40px
40px2.500rem
6
48px
48px3.000rem
7
56px
56px3.500rem
8
64px
64px4.000rem
9
72px
72px4.500rem
10
80px
80px5.000rem
11
88px
88px5.500rem
12
96px
96px6.000rem
Export Options
Export your spacing system in different formats
How to Use
1. Choose your base unit (8px is the industry standard)
2. Set the maximum number of spacing steps you need
3. Preview the spacing scale visually
4. Export in your preferred format for use in your design system