Style guide
The system, rendered rather than described.
Every value on this page comes from packages/design/src/tokens.css.
If a component needs something that is not here, a token is added first — not a hex value.
Colour
Two surfaces, one language. The marketing site is warm paper; the product is dark and quiet. There is no light theme in the app and no dark theme on the site.
Marketing
-
--wh-paper
Page background
-
--wh-surface
Cards, elevated blocks
-
--wh-inset
Quiet panels, code
-
--wh-rule
Hairlines
-
--wh-rule-strong
Emphasised borders
-
--wh-ink
Primary text
-
--wh-ink-2
Secondary text
-
--wh-ink-3
Metadata
-
--wh-accent
Primary action, links
-
--wh-accent-hover
Hover / active
-
--wh-accent-tint
Badges, highlights
-
--wh-live
Live capture
-
--wh-warn
Caution
-
--wh-danger
Error
Cue · app surface
-
--cue-bg-0
Canvas base
-
--cue-bg-1
Panel background
-
--cue-bg-2
Raised element
-
--cue-bg-3
Hover / pressed
-
--cue-text
Primary text
-
--cue-text-2
Secondary text
-
--cue-text-3
Metadata
-
--cue-accent
Listening, action
-
--cue-accent-tint
Accent background
-
--cue-live
Live capture
-
--cue-warn
Reconnecting
-
--cue-danger
Error, stop
Type
Geist for everything, Geist Mono for identifiers and numbers. Display weight is 450 — confidence is quiet.
Keep interviewing.
Keep interviewing.
Keep interviewing.
Keep interviewing.
Keep interviewing.
Keep interviewing.
Keep interviewing.
Body measure
Body copy stops at 65 characters. A paragraph that runs the width of a 1200 px container is a paragraph nobody finishes. Measure is a token, not a preference.
Numbers
01:14:32 · 42% · 1.4s
Timers, latency and counts use tabular numerals so they do not jitter.
Space and shape
A 4 px base scale. Radii are 8 / 12 / 16 px on the site and 10 / 14 / 18 px in the Cue.
Components
Every interactive component is keyboard reachable and shows a visible focus ring. Tab through this page to check it.
Buttons
One accent per screen. If two things are vermillion, neither is important.
Tags
Colour is never the only signal. Every state carries a word or a shape beside it.
Field
We only use this to reach you about the beta.
Table
| State | Meaning |
|---|---|
| Listening | Capture is live |
| Paused | Nothing is captured |
FAQ disclosure
Does this count as a component state?
Yes — expanded and collapsed are both states, and both are tested.
Motion
Motion explains a change; it never decorates one. With prefers-reduced-motion,
every duration collapses to zero — the token file handles it, so components must not hard-code
transitions.
--wh-dur-120
Hover, press
--wh-dur-180
Fade, small reveal
--wh-dur-240
Panel transition
--wh-dur-340
Suggestion arrival
Copy
How the product speaks.
Write this
"Microphone permission was denied. Enable it in Windows Settings, then press Resume."
Not this
"Oops! Something went wrong 😅 Please try again."