SWR Design System
A single source of truth for the Sainted Word Records visual language — warm cream surfaces, sepia-tinted ink, hot-pink as the single saturated hue. Five named visual languages (Neon, Film, Grid, Smoke, Hallucination) are treated as the system's product identity moments.
Drop a song.
Get a music video.
A browser-based audio-reactive engine. One HTML file. Five visual languages. Zero install.
Warm by default, hot for moments
Cream surfaces, sepia ink. Hot-pink only for product identity, the launch CTA, and the 5 visual languages.
Pills over rectangles
Every button, badge, tab, and input is full-radius. Rectangles live only in data tables, code blocks, and visual-language tiles.
Editorial over generic-AI
Fraunces (display) + Geist (body) + Geist Mono (code). The system leads with a serif hero and a generous body voice.
01 Brand Mark
The SWR monogram is the system's identity. The wordmark is the full label. Three surface variants each: current, black, white.
Monogram
Wordmark
02 Brand Voice
SWR is an audio-reactive video engine that ships in 90 seconds. The voice pairs editorial confidence (Fraunces) with engineer's precision (Geist Mono).
Lead with the product action: "Drop a song. Get a music video." — short, declarative, no qualifiers.
Stack hype adjectives ("revolutionary", "groundbreaking", "next-gen") or generic AI tropes.
Use concrete nouns and numbers: "5 visual languages", "48-hour turnaround", "30-second MP4".
Bury the action. Front-load qualifiers. Three clauses in one sentence.
Talk about audio in music terms — BPM, beat, FFT, chromagram.
Talk about audio in data terms — "audio data", "signal processing", "frequency analysis".
03 Color
33 tokens across 5 groups. 90% warm-monochrome. Saturated hues reserved for product identity.
Surface & Canvas
Ink & Text
Brand & Accent
Saturated hues for product identity. Don't apply to general navigation.
Token Reference
| Group | Token | Value | Use |
|---|---|---|---|
| surface | canvas | #faf7f2 | Page bg |
| ink | ink | #1a1612 | Headlines, CTA |
| brand | hot | #e6306b | Launch CTA, accent |
| brand | orange | #ff8a3a | Film identity |
| brand | cool | #0085b3 | Cool identity, links |
| hairline | hairline | #ddd3c2 | Default border |
04 Typography
Three typefaces mixed by role. Fraunces (display) · Geist (body) · Geist Mono (code).
const engine = new "SWREngine"("song.wav");
05 Spacing
A 4px base scale. Rarely below 4px or above 120px on UI.
06 Radius & Shape
Seven radii. Pill-by-default, 12–16px documentation cards, 24px product identity moments.
07 Shadows
Three shadow systems: subtle card elevation, stronger pop for hovered surfaces, brand-tinted hot-pink glow for featured product cards.
09 Badges & Pills
Tags, status indicators, version labels. Full-radius. Color encodes meaning, never decoration.
10 Cards
12px documentation cards for prose surfaces, 24px vibrant gradient product cards for the 5 visual-language identity moments.
Documentation cards
Drop a song, pick a visual language, hit record. The engine does the rest in 90 seconds.
The engine ships 2 fresh audio-reactive personalities every morning, automatically.
After 3 uses of a single persona, the engine mutates a personalized variant tuned to your BPM.
11 Inputs
Pill-shaped inputs by default. Hairline border, ink focus ring.
12 Iconography
1.6px stroke icons on a 22px box. Single weight.
13 Visual Languages — 5 product identity cards
The system's most important moment. Each visual language is a self-contained engine variant with its own color, motion, and signature. Treat them like products, not themes.
Neon Church
Morning Haunt
Brutalist Grid
Dream Sequence
System Error
How a visual language is specified
Each language is a self-contained .swr-set JSON file with palette, motion, FX chain, and a single signature blob. The engine loads the file, swaps the WebGL uniforms, and the music video takes a new shape.
// 1 of 5 visual languages — the Neon personality { "id": "swr-preset-neon-v1", "name": "Neon Church", "palette": { "a": "#ff2d8a", "b": "#00f0ff", "bg": "#0a0610" }, "motion": "screen-blend", "fx": { "chroma": 0.85, "glow": 0.6, "scanlines": 0.3 }, "signature": "cuts-on-the-beat" }
14 Do & Don't
The rules that hold the system together.
Use cream surfaces and sepia ink for 90% of the system. Let the 5 visual languages and the launch CTA bring the color.
Apply hot-pink or orange to navigation or general UI. They're reserved for the launch CTA and the 5 visual languages.
Default to pill radius (9999px) for buttons, badges, and inputs. Rectangles live only in data tables, code blocks, and the 24px product cards.
Mix a third typeface into the system. Fraunces + Geist + Geist Mono is the trio. Adding more dilutes the brand.
Use the hot-pink brand glow on hero bands, product cards, and the launch CTA. It's the system's "this is the moment" signal.
Push the hero past 80px on desktop or below 40px on mobile. The system tunes for that band.