Spacing
Base-4 spacing system for consistent rhythm and alignment. All spacing values are multiples of 4px.
Spacing Scale
Use these tokens for margins, padding, and gaps. The scale progresses: 4, 8, 12, 16, 24, 32, 48, 64.
--space-4 4px --space-8 8px --space-12 12px --space-16 16px --space-24 24px --space-32 32px --space-48 48px --space-64 64px Vertical Stack Example
Use consistent spacing between stacked elements.
Item with --space-4 below
Item with --space-8 below
Item with --space-16 below
Item with --space-32 below
Final item
Grid Gap Examples
gap: --space-8
gap: --space-16
gap: --space-24
Spacing Guidelines
Component Internal
Use --space-4 to --space-12 for internal component spacing (padding,
gaps between icons and text).
Component External
Use --space-16 to --space-24 for spacing between related components.
Section Spacing
Use --space-32 to --space-48 for spacing between distinct sections.
Page Margins
Use --space-48 to --space-64 for page-level margins and major layout
spacing.