nerdsnipe-inc/design-foundation

A SwiftUI design system I built because every new project I started, I was rebuilding the same buttons, inputs, cards, and modals, losing another two weeks to it.

View All Screens

Screenshot Library

Full Example Apps

AICompleteChat is a complete on-device AI chat app built on DesignFoundation Pro and Apple's Foundation Models framework. It wires LanguageModelSession, @Generable structured output, and streaming generation from Apple Intelligence's on-device LLM into a fully themed SwiftUI chat UI — no server round-trip, no API key, private on-device inference. A real reference for building an AI chat / assistant app with SwiftUI, not just a components demo.

BudgetLens is a complete, universal (iOS + macOS) personal finance / budget tracker app built on DesignFoundation Pro's Analytics vertical, SwiftData persistence, and Apple's Foundation Models framework for on-device spending insights. It wires the same LanguageModelSession and @Generable structured output APIs as AICompleteChat, but for a structured-output use case — a natural-language monthly spending summary and suggestion generated fully on-device, no cloud dependency — assembled around real dashboard/chart/activity-feed blocks instead of a hand-built layout. A real reference for building an expense tracker app with SwiftUI and SwiftData, not just a components demo.

ScanLens is a complete, universal (iOS + macOS) document scanner and receipt scanner app built on DesignFoundation Pro's Documents vertical. A scanned photo goes through on-device Vision OCR, then LanguageModelSession and @Generable structured output from Apple Intelligence title, categorize, and summarize it — no server round-trip, no cloud OCR or LLM cost, on either platform — landing in a real folder/tag workspace instead of a hand-built list. A real reference for building an OCR / document scanner app with SwiftUI, not just a components demo.

ClientLens is a complete, universal (iOS + macOS) SwiftUI CRM app built entirely on DesignFoundation Pro's CRM vertical (DFCRMRootView), wired up with real SwiftData-backed clients and deals instead of fixture data. Its AI Follow-Up feature drafts internal call-prep notes fully on-device via Apple's Foundation Models framework, no server round-trip required. A real reference for building a SwiftUI CRM app with SwiftData, not just a components demo.

BookLens is a complete, universal (iOS + macOS) SwiftUI appointment booking app built on DesignFoundation Pro's Booking vertical, with real SwiftData persistence, zero-permission EventKitUI calendar integration on iOS, and an on-device Foundation Models scheduling assistant that runs identically on both platforms. A real reference for building a booking / scheduling app with SwiftUI and EventKit, not just a components demo.

Installation

Add the package via Swift Package Manager in Xcode or Package.swift:

Xcode: File → Add Package Dependencies → https://github.com/NerdSnipe-Inc/design-foundation → from version 1.0.0

Package.swift:

dependencies: [
    .package(url: "https://github.com/NerdSnipe-Inc/design-foundation", from: "1.0.0")
],
targets: [
    .target(name: "YourApp", dependencies: ["DesignFoundation"])
]

Quick Start

import DesignFoundation

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .dfThemePreset(.slate)
        }
    }
}

struct ContentView: View {
    var body: some View {
        DFButton("Get started") { print("tapped") }
    }
}

Five presets ship: .slate, .aurora, .copper, .sage, .garnet. Each swaps automatically for light and dark mode. Build your own from tokens if none of them fit, see the Theme System section below.

Component Reference

Primitives

| Component | Built-in Styles | |---|---| | DFButton | .filled, .outlined, .ghost, .tinted, .glass¹ | | DFText | display, title, headline, body, caption, label | | DFIcon | SF Symbol wrapper with token-driven size and color | | DFBadge | .default, .subtle, .outlined, .glass¹ | | DFAvatar | .circle, .rounded, .ring, .glass¹ (image or initials, presence indicators) | | DFDivider | .solid, .dashed, .gradient (horizontal/vertical, labeled variant) |

Inputs

| Component | Built-in Styles | |---|---| | DFTextField | .outlined, .filled | | DFSecureField | .outlined, .filled (reveal toggle built in) | | DFToggle | .switch, .checkbox | | DFSlider | .standard, .labeled | | DFPicker | .segmented, .menu, .wheel | | DFDatePicker | .compact, .graphical, .wheel | | DFCheckbox | .default |

All input components share DFValidationState (.idle / .valid / .error(String)) so error display looks consistent everywhere.

Layout

| Component | Built-in Styles | |---|---| | DFCard | .elevated, .outlined, .filled, .glass¹ |

Overlays

| Component | Built-in Styles | |---|---| | DFModal | .standard, .glass¹ | | DFSheet | .standard, .compact, .glass¹ | | DFPopover | .arrow, .compact, .glass¹ | | DFTooltip | .bubble, .glass¹ |

Navigation

| Component | Built-in Styles | |---|---| | DFTabBar | .standard, .minimal | | DFNavigationBar | .standard, .transparent | | DFSidebar | .standard, .plain |

Supplementary

| Component | Notes | |---|---| | DFAlert | Convenience wrapper over the native SwiftUI alert | | DFToast | Queue management and auto-dismiss | | DFSkeleton | Shimmer animation | | DFProgressBar | Linear, circular, and indeterminate variants | | DFList | Swipe-delete, reorder, and multi-select | | DFListRow | Leading/trailing slots and disclosure indicator | | DFTable | Sortable columns |

¹ .glass styles require iOS 26+ / macOS 26+.

Theme System

One DFTheme struct sits in SwiftUI's environment and drives every component. Set it at the app root, override it anywhere below.

// Token namespaces: colors, typography, spacing, radius, shadow, animation, components
MyApp()
    .dfTheme(DFTheme(
        colors: DFColorTokens(
            primary: .indigo,
            surface: Color(.systemBackground)
        ),
        spacing: DFSpacingTokens(md: 20),
        radius: DFRadiusTokens(md: 12)
    ))

Every component reads from the nearest DFTheme in the environment. Change a token, everything that uses it updates. No manual wiring.

Preset Themes

Five presets ship in the box. Each one pairs a light and dark DFTheme and switches automatically based on @Environment(\.colorScheme).

MyApp()
    .dfThemePreset(.aurora)

| Preset | Notes | Fits well with | |---|---|---| | .slate | Closest to Apple system defaults, neutral palette | SaaS dashboards, developer tools | | .aurora | Violet primary, larger corner radii, softer shadows | Creative tools, social apps | | .copper | Warm orange-brown palette | Finance, content readers | | .sage | Muted green, calmer contrast | Health, wellness | | .garnet | Bold, saturated deep garnet red (#C8102E), white cards, off-white background | Bold consumer brands, retail, sports |

The differences read better in a preview than in a description, spin them up and see which one feels right for your app.

// Automatic light/dark
MyApp().dfThemePreset(.slate)

// Force a specific variant (previews, sub-tree overrides)
MyView().dfTheme(.copperDark)

// Build a custom preset from named themes
let myPreset = DFThemePreset(light: .slateLight, dark: .auroraDark)

// Mutate one token, keep the rest
var custom = DFTheme.sageLight
custom.colors.primary = .purple
MyView().dfTheme(custom)

Style System

Every component exposes a makeBody(configuration:) style protocol, the same pattern SwiftUI uses for ButtonStyle. Styles compose, propagate through the environment, and apply hierarchically.

// Apply a style to an entire section
VStack { ... }
    .dfButtonStyle(.outlined)
    .dfCardStyle(.glass)

// Override for a single component
DFButton("Delete", role: .destructive) { }
    .dfButtonStyle(.ghost)

// Liquid Glass across your whole UI
ContentView()
    .dfButtonStyle(.glass)
    .dfCardStyle(.glass)
    .dfTooltipStyle(.glass)

Writing a custom style means implementing one function. Built-in styles are concrete structs, copy any of them as a starting point.

Platforms

| Platform | Minimum Version | |---|---| | iOS | 18.0 | | macOS | 15.0 | | visionOS | 2.0 |

Liquid Glass (.glass styles) requires iOS 26+ / macOS 26+. Everything else works on the minimums above.

The DFPlatformVariant enum (automatic / compact / expanded / immersive) lets components adapt their form factor at runtime, or lets you force a specific layout for previews and testing.

Why I built this

Short version: every SwiftUI project I started ended up rebuilding the same primitives. Buttons that needed 40 lines of styling to match brand. Text fields with validation states I always got slightly wrong. The design system would drift within months because there was no single source of truth for spacing, radius, color, or elevation. Six months in, half my app used one theme and half used whatever I shipped in a busy sprint.

DesignFoundation makes the tokens the source of truth. Components read from the environment. Brand refreshes are a theme file edit, not a file hunt.

There's a paid tier at nerdsnipe-inc.github.io/design-foundation/pro that adds pre-built screens for auth, dashboard, CRM, analytics, and other verticals, composed from these same primitives. That's optional. The primitives on this repo stay MIT and get maintained regardless.

Feedback and issues are welcome, especially on the theme API. If something's rough, open an issue.

License

Package Metadata

Repository: nerdsnipe-inc/design-foundation

Default branch: master

README: README.md