Foundations/Spacing

Spacing System

`DSSpacing` defines a single 4pt-based scale from `xs` through `xxxl`. These values are reused across cards, screens, showcase demos, and layout containers in the package.

Spacing Scale

DSSpacing.xs

Minimum separation between inline elements

4pt

DSSpacing.sm

Compact spacing (icon + text)

8pt

DSSpacing.md

Default spacing between components

16pt

DSSpacing.lg

Sections and content groups

24pt

DSSpacing.xl

Screen padding and containers

32pt

DSSpacing.xxl

Separation between larger sections

48pt

DSSpacing.xxxl

Hero sections and marketing layouts

64pt

Usage

Example

import SwiftUI

VStack(spacing: DSSpacing.md) {
    Text("Title")
    Text("Content")
}
.padding(DSSpacing.lg)

HStack(spacing: DSSpacing.sm) {
    Image(systemName: "star.fill")
    Text("Compact row")
}

Guidelines

•Use `DSSpacing` tokens instead of arbitrary numeric padding
•`md` is the default gap for stacked content and card interiors
•`lg` and `xl` are used heavily for section padding and showcase layouts
•`xxxl` is reserved for the largest hero and marketing separations