Spacing
A 4px base grid spacing system inspired by IBM Carbon for consistent, dense layouts.
Spacing Scale
| Token | px | rem | Visual |
|---|---|---|---|
| 1 | 4px | 0.25rem | |
| 2 | 8px | 0.5rem | |
| 3 | 12px | 0.75rem | |
| 4 | 16px | 1rem | |
| 5 | 20px | 1.25rem | |
| 6 | 24px | 1.5rem | |
| 8 | 32px | 2rem | |
| 10 | 40px | 2.5rem | |
| 12 | 48px | 3rem | |
| 16 | 64px | 4rem | |
| 20 | 80px | 5rem | |
| 24 | 96px | 6rem | |
| 0.5 | 2px | 0.125rem | |
| 1.5 | 6px | 0.375rem | |
| 2.5 | 10px | 0.625rem |
Usage Examples
Tight Density
4–8px gaps
System online
Build pending
Deploy failed
Tests passing
Normal Density
12–16px gaps
Loose Density
24–32px gaps
L
Leucine Pro
Full access to all components