Component Catalog
Every reusable SwiftUI component shipped in the WolfWave macOS app. Status chips, cards, action grids, banners. Each entry has API, tokens, accessibility notes, and a do/don't list.
WolfWave's native macOS app ships a library of reusable SwiftUI components under
apps/native/WolfWave/Views/Shared/ and Views/Onboarding/Components/. Every
component has a markdown catalog entry in
design-system/components/
covering its API, the tokens it uses, an anatomy diagram, accessibility notes,
and a do/don't list.
The catalog's README is the live index — it tracks every entry and its status, so it never drifts from the source tree the way a copied table here would.
A few representative entries:
| Component | What it does | Catalog |
|---|---|---|
StatusChip | Capsule indicator (dot + label) for connection state. | entry |
CalloutBanner | Tinted info/success/warning/error callout used across settings. | entry |
NowPlayingHeroCard | Large now-playing card (art + track + artist). | entry |
DSIconButton | Single-glyph bordered button sized to match text-label neighbors. | entry |
SettingsNavRail | Two-column jump-nav rail with scroll sync for long settings panes. | entry |
How to add a component
- Build the SwiftUI view under
Views/Shared/orViews/Onboarding/Components/. - Reference
DSColor/DSFont/DSSpace/DSRadiustokens. No hardcoded numbers. - Add a markdown entry in
design-system/components/<name>.mdfollowing the template. - The catalog README's status table is the index — update it in the same change.
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.
Brand
WolfWave's brand guidelines. Logo usage and clear space, Apple Music / Twitch / Discord / OBS partner colors, and the ADHD-friendly voice that runs through the product.