Layout System
Layout system based on Zeus spacing tokens, responsive grid patterns and documented layouts from ZUD components to create consistent interfaces.
| Token | Value | Usage | Visual |
|---|---|---|---|
| --p-space-0 | 0px0rem | Reset spacing, no gap Border resetsFlush layouts | 0px |
| --p-space-050 | 2px0.125rem | Micro spacing Icon spacingFine details | 2px |
| --p-space-200 | 8px0.5rem | Small spacing Button paddingSmall gaps | 8px |
| --p-space-300 | 12px0.75rem | Medium spacing Form fieldsCard padding | 12px |
| --p-space-600 | 24px1.5rem | Large spacing Section gapsComponent margins | 24px |
| --p-space-800 | 32px2rem | Extra large spacing Page sectionsMajor layout gaps | 32px |
Spacing Scale Logic
- • 0: Reset/flush layouts
- • 050: Micro adjustments (2px)
- • 200-300: Component internal spacing
- • 600-800: Layout and section spacing
- • Scale increases for larger gaps
Spacing Applications
- • Use consistent spacing tokens
- • Maintain vertical rhythm
- • Apply responsive spacing
- • Consider content relationships
- • Test across different screen sizes
Spacing Example
Section with --p-space-600 margin
Subsection with --p-space-300 margin