Voice in UI · Principles
The full Voice & Tone document is the foundation. These are the operational rules for product copy specifically.
01
Direct, never clipped.
“Save changes” not “Saving!” — the latter strips the agency. Clarity is the priority. Warmth comes from word choice, not exclamation marks.
02
People-first, system-second.
“We couldn’t reach the server” not “Server returned 503”. Speak as one person to another. Surface the technical detail only when it helps the user act.
03
Tell them what to do.
Every error and empty state ends with a next step. If there’s nothing they can do, say that — explicitly. Don’t leave a dead end.
04
Calm at the worst moments.
Errors are when the brand has to work hardest. Don’t panic, don’t apologize excessively, don’t joke. Hold steady. Acknowledge, explain, offer a path.
Voice in UI · vs marketing voice
UI copy is shorter, more directive, and rarely italic. Reserve the editorial voice (Lora, italic, longer rhythms) for marketing surfaces.
| Context | Marketing voice | UI voice |
|---|
| CTA |
Let’s work on it together. |
Schedule a call |
| Section heading |
Real, direct, grounded. |
Account settings |
| Helper text |
A space to think clearly about what’s next. |
We’ll only use this for project updates. |
| Button |
Take the next step |
Continue |
Length budgets
When in doubt, write less. These are ceilings, not targets.
Button label
Button
≤ 3 words · ≤ 24 chars
Verb + object. “Save draft”, “Send invite”, “Delete account”. No “Click here”, no “Submit form”.
Helper text
Helper
≤ 1 sentence · ≤ 90 chars
One short, declarative sentence. Tells them why the field exists or what format you expect.
Error message
Error
≤ 2 sentences · ≤ 140 chars
What broke + what to do. Skip the apology unless you really cost them something.
Empty state
Empty state
≤ 3 sentences · 1 CTA
Why it’s empty + what they get + a single primary action. Avoid two CTAs of equal weight.
Toast
Toast
Title ≤ 5 words · body ≤ 1 sentence
Title is the result. Body is the consequence or detail. Action verb if there’s a next step.
Modal headline
Modal
Title ≤ 8 words · body ≤ 2 sentences
Title states the question or action. Body explains the consequence. Buttons close the loop.
Patterns
Pattern
Button label
[Verb] + [object] · primary case
Save draft
Send invite
Delete account
Continue
Submit
OK
Click here to save your changes
Pattern
Field error
[What’s wrong] + [what they can do]
Add an “@” to make this an email address.
Choose a password with at least 8 characters.
This name is already taken — try another.
Invalid input.
Error: ValidationError on field “email”
Please enter a valid input!!
Pattern
System error
[Plain-language what happened] + [what to do] + [how to recover]
We lost connection. Your work is saved locally — try again when you’re back online.
Couldn’t load this page. Refresh, or get in touch if it keeps happening.
Error 500. Internal Server Error.
Oops! Something went wrong.
Pattern
Empty state
[Why it’s empty] + [what this is for] + [single action]
No engagements yet. This is where you’ll see active projects with your team. Start a new engagement →
Nothing in your inbox. Coaches will reach out here when they’re ready to pick up the conversation.
No items to show.
It’s a bit lonely in here! 😢
Pattern
Confirmation modal
[Question or action] + [what happens] + [primary verb] · [Cancel]
Delete this engagement? Removes “Pivotal Ventures · Brand Refresh” and all attached files. This can’t be undone. → Delete forever · Cancel
Send invitation? Sara will get an email with a link to join your team. → Send invitation · Not yet
Are you sure???
Pattern
Loading state
[Verb-ing] + [optional context]
Saving…
Generating your brief…
Loading — this usually takes a few seconds.
Please wait...
⏳ Hold tight!
Typographic copy rules
Small marks, big polish. These apply to every piece of reader-facing copy — UI and marketing alike.
Always
Curly quotes & apostrophes
Typographic ‘ ’ “ ” · never straight ’ “
Leadership is hard. Let’s work on it.
“Trusted guides on difficult terrain.”
the ’90s · EMILY’s List
Leadership is hard. Let’s work on it.
“Trusted guides on difficult terrain.”
Applies to prose, headlines, page titles, meta descriptions, and image alt text. Straight quotes are correct only inside code/markup — never in copy.
Never
Single-word orphans
Glue the last two words with a non-breaking space so they wrap together
…support your mission-driven work.
…support your mission-driven work. (“work.” stranded alone on the last line)
Standard messages · Reusable copy
Use these verbatim where the situation matches. They’ve been calibrated to the brand voice — don’t rewrite them ad hoc.
Saved
Saved
Your changes are synced. We’ll keep working on this in the background.
Sent
Sent
Your invitation is on the way. We’ll let you know when they accept.
Connection lost
You’re offline
Your work is held locally. Reconnect to sync.
404
This page isn’t here.
It may have moved, or you may have arrived from a stale link.
Back home
No permission
You don’t have access to this.
Ask your team admin to grant permission, or get in touch with us if you think this is a mistake.
Session expired
You’ve been signed out.
For your security, sessions time out after a stretch of inactivity.
Sign in again
Vocabulary · word choice
| Avoid | Prefer | Why |
|---|
| Submit | Save · Send · Continue | “Submit” is bureaucratic. Use the actual verb for the action. |
| Click here | Schedule a call · Read the brief | The link target is the label. Never make “click here” the link. |
| Please wait | Saving… · Generating your brief… | Tell them what’s happening, not what to do. |
| Oops! | [direct description] | Cute language at error moments breaks trust. Stay steady. |
| Sorry, but… | [acknowledge + path forward] | Save apologies for moments when you actually cost them something. |
| Are you sure? | Delete this engagement? | State the action plainly. The user knows whether they’re sure. |
| Awesome! | Done · Saved · Sent | The brand doesn’t gush. Confirmation is the reward. |
| User | you · your team · the person | Speak to the person, not the database row. |
Tone shifts · When to flex
The same voice. Different volumes. The brand’s confidence holds across all of these — what changes is the warmth and pace.
| Moment | Tone | Example |
|---|
| Welcome / onboarding | Warm, paced, encouraging | Welcome. Let’s set up your team — this takes about three minutes. |
| Routine confirmation | Brief, plain | Saved. |
| Friction (validation, fix-this) | Direct, helpful | Add an “@” to make this an email address. |
| Trouble (system error) | Calm, candid | We lost connection. Your work is held locally — try again when you’re back online. |
| Risk (irreversible action) | Plain, slowed-down | Delete this engagement? This removes all files and can’t be undone. |
| Celebration (goal hit) | Quietly proud | That’s the last brief signed off — you’re ready to launch. |
Accessibility & inclusion
- Avoid directional language alone — “see below” / “click the button on the right” doesn’t translate to mobile or screen readers. Say which button.
- Avoid sensory metaphors — “as you can see” or “listen up” exclude users who can’t see or hear.
- Use plain language by default — aim for 8th-grade reading level for product UI. The brand voice is sophisticated because it’s clear, not despite.
- Don’t blame the user — “Your input was wrong” → “Add an ’@’ to this email.” Never imply user incompetence.
- Use sentence case for everything except CTAs — buttons and attributions use the Inconsolata uppercase treatment. Headlines, labels, and helpers stay in sentence case.
- Curly quotes always — never straight quotes in user-facing copy. “Schedule a call”, not “Schedule a call”.
- Em dash with spaces — for asides and pauses. “We lost connection — try again when you’re back.”