Design guide — Cadence Voice
Designing a site that sounds like something.
How this showcase encodes a voice AI brand: a two-voice palette, engineered typography, and a hero that literally performs signal analysis in your browser.
01 — Palette
Two voices on a void
Void
#0D0716
Base canvas
Not pure black — a purple-black. Pure #000 reads as 'dark mode default.' The violet cast makes the whole canvas feel tuned, like a stage before the lights come up.
Signal Magenta
#E8449A
Human voice / caller side
Warm, urgent, alive. Magenta carries the human half of every conversation on the site — caller bubbles, the idle waveform's left edge, the primary CTA glow.
Response Cyan
#3EE6D8
Machine voice / Cadence side
Cool, precise, instant. Cyan is the machine answering. Every waveform runs magenta→cyan left to right: a call being answered, encoded as a gradient.
Panel
#150C24
Raised surfaces
One step lighter than the void. Sections alternate between base and panel so the page has depth without a single hairline drop shadow.
02 — Typography
Engineered letterforms
Unbounded
AaBbCc 0123456789 — display
Geometric, wide-stanced, faintly synthetic. Unbounded's letterforms look engineered the way a synthesized voice sounds engineered — which is exactly the association a voice AI brand wants. Used at heavy weights (700–900) for headlines and stat numerals only. Loaded via next/font/google, zero layout shift.
Sora
AaBbCc 0123456789 — body & UI
A humanist-geometric hybrid: open apertures keep 13–15px copy readable on the dark ground, while its geometric skeleton keeps it in the same formal family as Unbounded. All caps + wide tracking for labels gives the interface its “mission control” register without resorting to a monospace cliché.
03 — Signature technique
An audio-reactive voiceprint, running live
The same component from the homepage hero. Idle, it simulates speech with layered sines and noise. Press the button and a synthesized ambient patch plays through a Web Audio AnalyserNode — real FFT data driving the bars.
04 — Rationale
Why it's built this way
01The waveform is the product
A voice AI company's real interface is sound, which a website can't show — so we make the site listen. The hero voiceprint isn't decoration: 96 mirrored bars driven by speech-shaped envelopes (bursts, pauses, mid-spectrum emphasis) so it reads as someone talking, not a screensaver. Press 'hear cadence' and the Web Audio API takes over — a generative ambient patch synthesized in-browser, analyzed by a real AnalyserNode, driving the same bars with real frequency data. The demo is honest: that's actual signal analysis, the same math a voice pipeline runs on callers.
02Two colors, one conversation
The palette is an argument, not a mood board. Magenta is the caller; cyan is the machine. The transcript section colors each speaker's turns accordingly, the waveform sweeps magenta-to-cyan, and the CTA gradient literally blends the two — human and machine voice meeting. Restraint does the rest: two accents on a purple-black void, and nothing else is allowed to be colorful.
03Blobs with a pulse, not a template
The background gradient blobs are generative — three light sources drifting on independent Lissajous orbits, drawn at 160×120 on a canvas and upscaled so the browser's own bilinear filtering provides free blur. No CSS blur() cost, no filter jank, ~0.1ms a frame. They pulse slowly, like something breathing behind the glass, and they pause when offscreen.
04Type treated as sound
Unbounded for display: geometric, wide, slightly synthetic — letterforms that look engineered, the way a synthesized voice sounds engineered. Sora for body: humanist enough to stay readable at 14px on a dark ground, geometric enough to belong to the same family of shapes. The hero headline enters word by word on a stagger, the rhythm of speech rather than a fade-in.
05Transcript over diagram
The 'how it works' section is a real annotated call instead of a boxes-and-arrows architecture diagram. For a voice product, a transcript is the most credible artifact that exists — and latency budgets in the margin ('240ms turn latency') say more than any pipeline illustration could.
05 — Imagery
Generated textures, same key
All imagery is original generative art produced for this brand — abstract sound-wave and frequency forms in the exact palette, used as card art and footer texture at reduced opacity so they support the canvas work instead of competing with it.
