Foundations/Spacing
Spacing System
A consistent spacing scale from 4pt to 64pt ensures visual rhythm and hierarchy across all components and layouts.
Spacing Scale
DSSpacing.xs
Tight spacing, icon padding
4pt
DSSpacing.sm
Compact layouts, chip padding
8pt
DSSpacing.md
Default spacing, card padding
16pt
DSSpacing.lg
Section spacing
24pt
DSSpacing.xl
Large gaps between sections
32pt
DSSpacing.xxl
Page margins
48pt
DSSpacing.xxxl
Hero spacing
64pt
Usage
Example
import SwiftUI
VStack(spacing: DSSpacing.md) {
Text("Title")
Text("Content")
}
.padding(DSSpacing.lg)Guidelines
- •Use consistent spacing values from the scale rather than arbitrary numbers
- •Prefer md (16pt) for default component padding
- •Use lg (24pt) or xl (32pt) for section spacing
- •Reserve xxxl (64pt) for hero sections and major page divisions