Spacing & Radius
A consistent spacing and radius scale keeps layouts rhythmic. Use the
--ziom-space-* tokens for margins, padding, and gaps, and the
--ziom-radius-* tokens for rounded corners.
Spacing Scale
| Token | Value | Visual |
|---|---|---|
--ziom-space-1 |
4px | |
--ziom-space-2 |
8px | |
--ziom-space-3 |
12px | |
--ziom-space-4 |
16px | |
--ziom-space-5 |
20px | |
--ziom-space-6 |
24px | |
--ziom-space-8 |
32px | |
--ziom-space-10 |
40px | |
--ziom-space-12 |
48px |
Border Radius
Z-Index Scale
Layering tokens keep stacking predictable across components.
| Token | Value |
|---|---|
--ziom-z-dropdown | 100 |
--ziom-z-sticky | 200 |
--ziom-z-modal-backdrop | 300 |
--ziom-z-modal | 400 |
--ziom-z-toast | 500 |