The design toolkit
that compiles.

Hero.swift

// 17 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.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 ~741 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

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;

}