Foundations/Design Tokens

Design Tokens

SwiftDS uses a centralised token system defined in DSTokens.swift. Typography is defined alongside it in DSTypography.swift. Components consume these package foundations instead of duplicating values locally.

Colors

`DSColor` combines warm sand brand tones, neutral surfaces, semantic states, and explicit light and dark variants used by package components.

Primary

DSColor.primary

#C4A882

Warm sand primary brand color

DSColor.primaryHover

#B09872

Hover and pressed state for primary actions

DSColor.primaryMuted

#F5F0E8

Soft tinted background for primary emphasis

DSColor.primaryFG

#FFFFFF

Foreground color placed on top of primary fills

Secondary

DSColor.secondary

#6B6560

Warm slate supporting neutral color

DSColor.secondaryHover

#5A5450

Hover state for secondary actions

DSColor.secondaryMuted

#F1EDE8

Muted background for secondary surfaces

Accent

DSColor.accent

#C4A882

Accent color in the same warm sand family

DSColor.accentMuted

#F5F0E8

Soft accent tint for subtle highlights

Backgrounds

DSColor.background

#FAFAFA

Default app background in light mode

DSColor.backgroundDark

#0E0E0C

Default app background in dark mode

DSColor.surface

#FFFFFF

Base card and sheet surface in light mode

DSColor.surfaceDark

#161613

Base card and sheet surface in dark mode

DSColor.surfaceElevated

#FAFAF9

Elevated surface in light mode

DSColor.surfaceElevatedDark

#1E1E1B

Elevated surface in dark mode

Border

DSColor.border

#E8E8E8

Default border in light mode

DSColor.borderDark

#2C2B28

Default border in dark mode

DSColor.borderSubtle

#F0F0F0

Subtle border in light mode

DSColor.borderSubtleDark

#252420

Subtle border in dark mode

Foreground

DSColor.foreground

#1A1816

Primary text in light mode

DSColor.foregroundDark

#F0EDE8

Primary text in dark mode

DSColor.muted

#5A5650

Muted text and supporting copy

DSColor.subtle

#9A9690

Subtle text, placeholders, and low-emphasis UI

Semantic

DSColor.success

#22C55E

Success and positive confirmation

DSColor.successMuted

#F0FDF4

Muted success background

DSColor.warning

#F59E0B

Warning and attention states

DSColor.warningMuted

#FFFBEB

Muted warning background

DSColor.error

#EF4444

Error and destructive states

DSColor.errorMuted

#FEF2F2

Muted error background

DSColor.info

#3B82F6

Informational and neutral status color

DSColor.infoMuted

#EFF6FF

Muted information background

DSTokens.swift — Colors

// Usage inside package components
.foregroundStyle(scheme == .dark ? DSColor.foregroundDark : DSColor.foreground)
.background(scheme == .dark ? DSColor.surfaceDark : DSColor.surface)

// Adaptive helper
let adaptive = DSColor.adaptive(
    light: DSColor.surface,
    dark: DSColor.surfaceDark
)
Text("Hello").background(adaptive.resolve(in: colorScheme))

Spacing

`DSSpacing` is a 4pt-based scale from `xs` to `xxxl`, reused across package layouts and showcase compositions.

DSSpacing.xs4ptMinimum separation between inline elements

DSSpacing.sm8ptCompact spacing (icon + text)

DSSpacing.md16ptDefault spacing between components

DSSpacing.lg24ptSections and content groups

DSSpacing.xl32ptScreen padding and containers

DSSpacing.xxl48ptSeparation between larger sections

DSSpacing.xxxl64ptHero sections and marketing layouts

DSSpacing usage

VStack(spacing: DSSpacing.md) {
    HStack(spacing: DSSpacing.sm) {
        Image(systemName: "star")
        Text("Favorite")
    }
    .padding(.horizontal, DSSpacing.lg)
}
.padding(DSSpacing.xl)

Border Radius

DSRadius.small

6pt

Badges, Tags, Checkboxes

DSRadius.medium

10pt

Inputs, Buttons (.md)

DSRadius.large

16pt

Cards, Modals, Sheets

DSRadius.xl

24pt

BottomSheet handle, large containers

DSRadius.pill

9999pt

SearchBar, pill Badges, Avatars

Shadows

DSShadow.none

No shadow

Usage: Elements on an elevated surface

DSShadow.sm

rgba(0,0,0,0.06) r:4 y:2

Usage: Resting cards, focused inputs

DSShadow.md

rgba(0,0,0,0.08) r:8 y:4

Usage: Hovered cards, dropdowns

DSShadow.lg

rgba(0,0,0,0.10) r:16 y:8

Usage: Toasts, popovers

DSShadow.xl

rgba(0,0,0,0.14) r:32 y:16

Usage: Modals, command palette

DSShadow.primary

primary(0.30) r:16 y:8

Usage: Highlighted primary button

DSShadow.glow

primary(0.50) r:24 y:0

Usage: Hero elements with glow effect

View modifier .dsShadow()

// Applied via View extension
myView.dsShadow(.md)
myView.dsShadow(.primary)

// Custom shadow
myView.dsShadow(DSShadow(
    color: DSColor.accent.opacity(0.3),
    radius: 20,
    x: 0,
    y: 10
))

Animations

`DSAnimation` provides a compact set of reusable springs and easing curves for interaction, layout, fades, and pulse states.

DSAnimation.interactive

spring(response: 0.3, damping: 0.7)

Buttons, toggles, checkboxes

DSAnimation.smooth

spring(response: 0.45, damping: 0.8)

Modals, sheets, overlays

DSAnimation.gentle

spring(response: 0.6, damping: 0.85)

List insertions, layout changes

DSAnimation.fade

easeOut(duration: 0.2)

Opacity and fade effects

DSAnimation.pulse

easeInOut(1.0).repeatForever()

Skeleton loaders, ping indicators

Animation usage

// Interactive spring
Button(action: action) { label }
    .scaleEffect(isPressed ? 0.96 : 1.0)
    .animation(DSAnimation.interactive, value: isPressed)

// Smooth overlay entrance
if isPresented {
    ModalView()
        .transition(.scale(scale: 0.94).combined(with: .opacity))
        .animation(DSAnimation.smooth, value: isPresented)
}

// Repeating pulse
.opacity(opacity)
.onAppear {
    withAnimation(DSAnimation.pulse) { opacity = 0.9 }
}

Typography

SwiftDS defines text helpers in DSText with DSTextStyle and `DSFont`. The package maps styles to native SwiftUI text styles so Dynamic Type remains intact.

.largeTitleSwiftDS Design System.largeTitle · Bold

.titleBuild polished interfaces.title · Bold

.title2Foundation Overview.title2 · Semibold

.headlineReady to ship.headline · Semibold

.bodyUse body for the main content of a screen or component..body · Regular

.bodyMutedSupporting information uses the same scale with softer emphasis..body · Regular

.calloutCall attention to key supporting text..callout · Medium

.subheadlineUpdated 2 minutes ago.subheadline · Medium

.captionCaption text.caption · Regular

.caption2Secondary caption.caption2 · Regular

.monotoken.primary = #C4A882.footnote · Regular

.labelPrimary Action.callout · Medium

.labelSmallBeta.caption · Medium

DSText usage

DSText("Section title", style: .headline)
DSText("Detailed description.", style: .body)
DSText("2 min ago", style: .caption)

// Direct helper usage when needed
Text("token.primary = #C4A882")
    .dsTextStyle(.mono)
    .foregroundStyle(DSColor.primary)