· Brand · v1
The receipts for how Talkie carries itself.
Wordmark, color, type, voice, motion. Everything on this page is loaded from the real components and tokens — no duplicated values, no drift. If the brand evolves, this page evolves with it.
- Wordmark
- v6 · 2026-05-14
- Type
- Talkie Medium
- Accent
- Hot Mic · #FF5346
- Canvases
- Cream · Ribbon Black
· Wordmark
The lockup is the brand.
Talkie's wordmark is the dotless mono with a Hot Mic dot floating above the i. Red means listening — never decoration. Use the Wordmark component; never re-type the letters.
· Listening · Dark canvas (default)
· Listening · Light canvas
· Idle · Hot Mic off (Tape Tan dot)
· Monotone · Single-color lockup
· Hero scale · 140px
· Body scale · 56px
· Nav scale · 28px
Props: size, state (listening · idle), pulse, squeeze, thinness, dotScale, dotGap, monotone, guides, kern. Defaults are tuned for the site's nav and footer; override per-context with intention.
· Color
Warm, restrained, semantic.
No pure white, no pure black. Eight tokens — most of them connective. Red is the only red, green is the only green, and both are reserved for state, not styling.
Studio Cream
--brand-studio-cream·#F4EFE6
Primary ink on dark canvas. Default body and display color in dark mode.
Ribbon Black
--brand-canvas·#0E0D0A
Primary canvas in dark mode. Body and display ink in light mode.
Hot Mic
--brand-hot-mic·#FF5346
Listening state. The only red in the system. Used on the wordmark dot, recording indicators, never decorative.
Cassette Orange
--brand-cassette-orange·#E68A3C
Processing, warm accent. Used in narrator transitions and secondary state cues.
Tape Tan
--brand-tape-tan·#7A6E5C
Idle, dividers, secondary mono labels. The connective tissue of the system.
Caution Yellow
--brand-caution-yellow·#E5C547
Error / warning, used sparingly. Reserve for moments that genuinely need attention.
Graphite
--brand-graphite·#B8B2A4
Secondary text on dark canvas. Body de-emphasis without going to full mute.
Signal Green
--brand-signal-green·#5FD088
Sync-ok, app available. Strict indicator semantic — never for decoration or CTAs.
· Type
Three voices, one rhythm.
A custom mono carries the brand. JetBrains Mono carries the technical labels. A serif display carries the literary moments.
· Wordmark / Display Mono
talkie
Talkie Medium · custom derivative of JetBrains Mono · dotless i with parametric foot
· UI Mono
RECORD · LOCAL · AUDIT
JetBrains Mono · 0.20–0.28em tracking · uppercase for eyebrows and metadata
· Display Serif
Your best ideas don't wait.
Cormorant · italic for literary emphasis · sparingly, ≤ 15% of any view
· Voice
Spare. Modernist. A touch literary.
The anchor line states the product without explaining it. Supporting lines stay short, particular, and confident. Never marketing-speak.
- · anchorIt's like a selfie. For your thoughts.
- · supportingA mic is all you need.
- · supportingVoice-first AI. Yours.
- · supportingLocal-first. Auditable signal path.
· Motion
One motion per state.
The Hot Mic pulses at 1 Hz when listening. Idle has no motion. No spinners, no decorative rotation, no parallax. If you can't say what a motion means, don't add it.
· Listening · 1.0 Hz opacity pulse
@keyframes talkie-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.talkie-dot {
animation: talkie-pulse 1000ms ease-in-out infinite;
}· Idle · No motion
The dot is Tape Tan, the wordmark is still. Stillness is a brand statement — the app doesn't fidget when it has nothing to say.
· Usage
Do, don't.
A short list of rules that keep the brand recognizable. When in doubt, prefer restraint.
- Use the Wordmark component — never re-type "talkie" in CSS.
- Keep the Hot Mic dot red. It means listening; nothing else.
- Pair Talkie Medium (wordmark) with JetBrains Mono (labels) and a single display serif for emphasis.
- Let the warm canvases (Cream / Ribbon Black) do the heavy lifting. Avoid pure white and pure black.
- Don't stretch, skew, or condense the wordmark by hand. Use the `squeeze` prop.
- Don't recolor the Hot Mic dot for theming. Use `monotone` mode if a single-color lockup is required.
- Don't pair the wordmark with another logotype lockup horizontally without a divider.
- Don't use Signal Green for CTAs. It's a sync indicator, not a button color.
· Assets
Receipts you can ship.
The wordmark, the font, the icons. Download what you need. If a variant isn't here, ping @talkie-brand on Scout or open an issue against this page.
· Font
Talkie Medium v6
Custom derivative of JetBrains Mono. Dotless i with parametric foot. Loaded via next/font/local; available in CSS as --font-talkie.
· Wordmark · SVG
Inline component
Use <Wordmark /> from components/brand/Wordmark.jsx. Renders inline SVG at any size, theme-aware ink, parametric squeeze, thinness, dot.
Status: stable. Static SVG export coming.
· Static exports
Icons & marks
Pre-rendered files for app icons, favicons, and social cards.
