Space Tokens
Spacing token system based on Zeus Design System to create consistent layouts and maintain visual rhythm throughout the application.
| Token | Value | Usage | Visual | Examples |
|---|---|---|---|---|
| --p-space-0 | 0px0rem | Reset spacing, flush layouts | 0px | Border resetsFlush button groupsNo-gap grids |
| --p-space-050 | 2px0.125rem | Micro spacing for fine details | 2px | Icon spacingText decoration gapsFine border adjustments |
| --p-space-200 | 8px0.5rem | Small spacing for component internals | 8px | Button paddingSmall component gapsIcon margins |
| --p-space-300 | 12px0.75rem | Medium spacing for form elements | 12px | Form field spacingCard internal paddingList item gaps |
| --p-space-600 | 24px1.5rem | Large spacing for layout sections | 24px | Section gapsComponent marginsCard external spacing |
| --p-space-800 | 32px2rem | Extra large spacing for major layout | 32px | Page sectionsMajor layout gapsHero section padding |
Zeus Spacing Philosophy
The Zeus system uses a progressive scale based on logical multiples to create visual consistency and facilitate implementation.
Scale Logic
- • 0: Complete reset
- • 050: Micro adjustments (2px)
- • 200-300: Component spacing
- • 600-800: Layout spacing
Implementation
- • CSS Custom Properties
- • Consistent naming
- • Scalable system
- • Responsive ready
Benefits
- • Visual consistency
- • Faster development
- • Easier maintenance
- • Theme flexibility
CSS Implementation
/* Zeus Spacing Scale */
--p-space-0: 0;
--p-space-050: 2px;
--p-space-200: 8px;
--p-space-300: 12px;
--p-space-600: 24px;
--p-space-800: 32px;