Recipe

Design Token Pipeline

Single-source design tokens → multi-platform output. One JSON spec drives iOS, Android, Web, and Figma.

Architecture

tokens/
├── core.json          # primitives (spacing, radii, type scale)
├── semantic.json      # intent tokens (surface, text, border)
├── component.json     # component-level overrides
└── themes/
    ├── violet.json    # brand theme
    └── dark.json      # dark mode palette

Build Outputs

CSS Custom Properties — :root variables injected at build time via Style Dictionary
Tailwind v4 theme — generated tailwind.config.ts from token spec
SwiftUI / Compose — platform-specific color sets and typography scales
Figma plugin sync — tokens pushed to Figma Variables API on merge to main

CI Guardrails

Token changes trigger visual diff snapshots. Breaking contrast ratios or removed tokens block the PR. Style Dictionary validates JSON schema before any artifact is emitted.

Brand lock: violet #8B5CF6 and pink #F472B6 are defined once in core.json. Every surface, every platform, every theme derives from those two primitives.