Brand voice
Voice is your brand written down. Define it as a few adjectives, then apply it to every string — while letting clarity win in errors and legal text.
In one line: voice is your brand written down — a small, fixed set of adjectives that shape every string in the product, while tone bends those words to fit the moment and clarity always wins in the moments that matter.
What it is
Voice is the consistent personality your words carry; tone is how that personality adapts to the situation. Voice stays constant — the same brand sounds like itself in a welcome screen, a tooltip, and a 404. Tone shifts — the same brand is upbeat at a celebration and calm, plain, and careful at an error.
The practical form of a voice is a few adjectives, each pinned with a do and a don't. "Warm, plain, confident" is a start; "warm (we say you and we, not the user), plain (short words over jargon), confident (we state, we don't hedge)" is something a writer can actually apply. Three adjectives is plenty — more and nobody remembers them.
Why it matters
Copy is most of the interface. Buttons, labels, errors, empty states, confirmations — the words outnumber the pixels, and they're what people read to decide what to do next. If every string sounds like it came from a different writer, the product feels assembled rather than made.
A consistent voice is recognizable and trustworthy. When the welcome email, the in-app nudge, and the support reply all sound like one coherent person, people learn what to expect — and a brand they can predict is a brand they trust. Voice is the cheapest branding you have: it costs nothing but discipline, and it ships in every screen.
See it
Tweak it3
Switch the voice in the controls and watch the same three moments — a primary button, an inline form error, and an empty state — get rewritten. The personality changes; notice that the error stays clear in every voice. It always says what's wrong and how to fix it.
How it works
Three ideas do most of the work.
Define voice as a few adjectives with do/don't. Pick three, no more, and make each one operable. "Friendly" is a vibe; "friendly = first-person and contraction-friendly; never sarcastic" is a rule a writer can follow at 5pm on a deadline. The do/don't pair is what turns a mood into a system.
Let tone shift by context. The voice is fixed; the tone reads the room. The same brand can be playful on a success screen — "Nice, you're all set!" — and quiet at an error — "That email is missing an @." Tone is voice with the dial turned to match how the reader is feeling at that exact moment.
Clarity beats personality in errors, legal, and critical paths. Personality is a luxury you spend where the stakes are low. In an error message, a payment confirmation, a permissions prompt, or legal copy, the job is comprehension first — say what happened and what to do, in plain words, before you reach for charm. A clever error that hides the fix is a failure no matter how on-brand it sounds.
Build it
Treat copy as data, not as strings scattered across components. A Voice type plus a copy map keyed by voice means every UI string for a moment lives in one place and is applied the same way everywhere.
// The voice is a small, fixed set — adding one is a deliberate decision.
type Voice = "friendly" | "formal" | "playful" | "bold";
// One entry per moment, rewritten per voice. The error stays clear in all four:
// voice flavors the words, but every version says what's wrong and how to fix it.
const copy: Record<Voice, { cta: string; emailError: string; empty: string }> = {
friendly: {
cta: "Let's go",
emailError: "That email's missing an @ — add one (like you@trailhead.app).",
empty: "Nothing saved yet — tap the heart on a trail to keep it here.",
},
formal: {
cta: "Continue",
emailError: "Enter a valid email address, including an @ symbol.",
empty: "You have no saved trails. Select the bookmark icon to add one.",
},
playful: {
cta: "Heck yes →",
emailError: "Whoops — that email's missing its @. Pop one in and we're golden.",
empty: "It's quiet in here. Star a trail and it'll show up.",
},
bold: {
cta: "Start now",
emailError: "That email is invalid. Add an @ symbol, then continue.",
empty: "No saved trails yet. Save one to start your list.",
},
};
// Apply it the same way everywhere — components read from the map, never inline.
const active: Voice = "friendly";
const label = copy[active].cta;Make it yours
Use the controls beside the demo above to change voice, copy length, and show voice guideline — each change updates the example live.
Experiment in the playground- Flip between the four voices and read the button labels aloud — the same action ("go") gets a different personality each time, but it's still obviously the same button.
- Compare the error across voices: the wording changes, but every version names the problem (missing
@) and the fix. That's the rule — clarity survives the voice. - Write the three adjectives for a brand you use daily, each with a do and a don't, then check whether its real copy actually holds to them.
Reproduce it with an LLM
Reproduce it with an LLM
You are a UX writer. Define a brand voice for a fictional product — 'Tovo, a playful weeknight-cooking app' — as three adjectives, each with a one-line do and don't. Then apply it consistently by rewriting the same five UI strings in that voice: a primary button, a success toast, an inline form error, an empty state, and a destructive-action confirmation. For each, keep it accessible (clear, specific, no jargon; errors say what happened and how to fix it) and note where voice must yield to clarity (errors and legal text stay plain). Return the voice definition plus a before/after table for the five strings.
Pitfalls & accessibility
- Resist letting voice creep into critical paths. Payment, permissions, security, and legal copy are where comprehension beats charm — keep the personality dialed down and the instructions front and center.