Spacing
Layout tokens for vertical rhythm and page structure. Current preset: md.
Stack hierarchy
Three tiers of vertical spacing. stack-sm couples related text (title + description). stack separates groups. stack-lg creates visual breaks between header and content.
Web section pattern
Badge → Title → Description → Content grid
Section title
Description text lives close to the title — they form a visual unit.
App layout pattern
Page padding → Header → Cards with stack gap
Page title
Subtitle uses tight coupling
Button spacing
Padding scales per size via tokens. Gap between icon and text is always smaller than side padding — keeps content visually centered.
Button anatomy
Padding scales per size, gap is always smaller than padding
Fluid section spacing
page-x and section-y use clamp() — they scale smoothly with viewport width. Smaller screens get tighter padding, larger screens breathe.
section-y: web section breathing
Fluid vertical spacing between marketing sections — scales with viewport
All spacing tokens
Token reference
--ds-space-page-x
Page horizontal padding
--ds-space-section-y
Web section vertical spacing
--ds-space-stack-sm
Title ↔ description
--ds-space-stack
Default group gap
--ds-space-stack-lg
Section header → content
--ds-space-gap
Grid / inline gap
--ds-space-card
Card inner padding