Design System
WolfWave's visual language. Design tokens, reusable SwiftUI components, and brand assets. One source of truth powering the native app, docs, widget, and marketing.
WolfWave's design system is the single source of truth for how the product looks and feels across:
- The native macOS app (Swift / SwiftUI, macOS 26 Liquid Glass)
- This docs site (Fumadocs / Tailwind 4)
- The OBS widget overlay (vanilla HTML / CSS / JS)
- Marketing videos (Remotion / React)
Canonical source
All tokens live in design-system/tokens.json at the repo root. A bun script (bun run tokens) generates per-platform outputs that are committed alongside the source. Consumers never need to run the generator unless they're editing tokens.
design-system/tokens.json ← edit this
│
├─→ Tokens.generated.swift (DSColor, DSFont, DSSpace, DSRadius, …)
├─→ tokens.generated.css (--ds-* custom properties)
├─→ widget-tokens.generated.js (window.WW_TOKENS)
└─→ tokens.generated.ts (typed Remotion export)In this section
- Foundations. Colors, type, spacing, radius, motion, shadows.
- Components. Catalog of reusable SwiftUI views and their Tailwind/CSS equivalents.
- Brand. Logo usage, partner colors, voice.
Changelog
Every WolfWave release. New features, fixes, and breaking changes. Auto-updating via Sparkle. macOS menu bar app for Apple Music streamers.
Foundations
WolfWave's core design tokens. Brand color scale, type ramp, spacing, radius, motion, and shadows. Generated from one tokens.json into Swift, CSS, JS, and TS.