The design toolkit
that compiles.

Hero.swift

// 19 tools · 0 dependencies · works offline

let kit = DevDesign() // no account, no backend

let palette = try await kit.ai.generate("your color below")

kit.apply(palette, to: .thisLandingPage) // watch the page ↻

output - live palette

#6366f1#d27af3#63adf1#f4f288#1215c3

base:← try it - the whole page re-themes, and the token export below updates.

git clone ↗cat case-study.md

DevDesign generating an AI palette from a text prompt

zsh - Tools/

$ ls Tools/ | wc -l

$ ls Tools/

AIPalette.swiftPaletteGenerator.swiftColorPicker.swiftContrastChecker.swiftSavedPalettes.swiftGradientBuilder.swiftTypeScale.swiftFontPairing.swiftSpacingSystem.swiftSFSymbolsBrowser.swiftComponentSnippets.swiftShadowPlayground.swiftLayoutInspector.swiftAppIconGenerator.swiftAnimationPlayground.swiftMetalSymbols.swiftSymbolEffects.swiftBorderDecoration.swiftTokenExporter.swift

Tools/AIPalette.swift

Prompt in, palette out

Describe a mood - "indigo dusk", "terminal green" - and get a structured palette with roles and usage hints. Claude, Gemini, and OpenRouter sit behind one protocol; OpenRouter is the zero-setup default, so it works the moment you install.

AI palette generation from a text prompt

Tools/TokenExporter.swift

Tokens that leave the app

Any saved palette exports as a Swift enum, W3C design-token JSON, or CSS custom properties - straight from SwiftData into your codebase. The section below runs on exactly that output.

Design token exporter emitting Swift, JSON, and CSS

Tools/TypeScale.swift

Typography, computed

Eight modular-scale ratios generate a full type ramp with live preview, and Font Pairing combines Google Fonts with system faces - CoreText loading runs on an actor so the UI never blocks.

TypeScale.playground

ratio: 1.250

39.1pxDesign is math
31.3pxDesign is math
25pxDesign is math
20pxDesign is math
16pxDesign is math

Modular type scale generator with live preview

Tools/ContrastChecker.swift

WCAG math, verified

AA and AAA compliance with suggested passing alternatives when a pair fails. The contrast algorithms are covered by unit tests - part of the ~771 that guard this codebase.

Contrast.playground

Aa 14px

text#ffffffbg #6366f1 · following page accent

4.47:1

✗ AA✗ AAA✓ AA large

WCAG contrast checker with pass and fail states

Symbols that move.

Two tools cover SF Symbol motion from both ends. Metal Symbols runs four [[stitchable]]shaders on the GPU; Symbol Effects wraps Apple’s six native .symbolEffect animations. Both emit the SwiftUI you’d actually paste.

Motion.swift

// MetalSymbols.swift - shimmer · gradientFlow · noise · liquidMetal

Image(systemName: "bolt.fill")

.colorEffect(ShaderLibrary.shimmer(.boundingRect, .float(t)))

// SymbolEffects.swift - bounce · pulse · variableColor · wiggle · breathe · rotate

Image(systemName: "bell.fill")

.symbolEffect(.wiggle, isActive: true)

This page ships its own tokens.

DevDesign’s Token Exporter emits Swift enums, W3C JSON, and CSS custom properties from live palettes. These are this page’s actual tokens - including the palette you generated in the hero - in all three formats. Change the base color up there and watch these update.

:root {

--dd-bg: #0b0d16;

--dd-surface: #12141f;

--dd-border: #232739;

--dd-fg: #e6e8f0;

--dd-muted: #8b93a7;

--dd-accent: #6366f1;

--dd-accent-alt: #d27af3;

--dd-analogous: #63adf1;

--dd-pop: #f4f288;

--dd-deep: #1215c3;

}