Content + UI Copy
UI copy is part of the design system. The goal is clear, calm language that helps users move forward without friction.
This system favors short, human wording with strong defaults and minimal noise.
Voice and tone
Section titled “Voice and tone”Clear > clever
Section titled “Clear > clever”Avoid jokes, filler, or “marketing voice” inside UI. The interface should feel calm and confident.
Direct and helpful
Section titled “Direct and helpful”Say what something is, what it does, and what the user can do next.
Neutral and professional
Section titled “Neutral and professional”Friendly without being overly casual. Helpful without sounding robotic.
Consistency
Section titled “Consistency”Use the same words everywhere
Section titled “Use the same words everywhere”Pick one term and stick with it.
Examples:
- “Sign in” vs “Log in”
- “Delete” vs “Remove”
- “Settings” vs “Preferences”
Consistency reduces cognitive load and makes the UI feel more predictable.
Labels
Section titled “Labels”Use plain language
Section titled “Use plain language”Prefer:
- “Save changes”
- “Copy link”
- “Send message”
Avoid vague labels like:
- “Submit”
- “Okay”
- “Continue” (unless the next step is obvious)
Buttons should describe actions
Section titled “Buttons should describe actions”Good buttons describe outcomes:
- “Create project”
- “Send message”
- “Download PDF”
Helper text
Section titled “Helper text”Helper text should be optional, not required to understand the UI.
Use it to clarify:
- expected input format
- constraints (character limits)
- what happens after an action
Keep it short and scannable.
Error messages
Section titled “Error messages”Error messages should be:
- specific
- actionable
- non-blaming
Good error message pattern
Section titled “Good error message pattern”- What went wrong
- What to do next
Examples:
- “Please enter a valid email address.”
- “That password doesn’t match. Try again.”
- “Something went wrong. Please try again.”
Avoid:
- “Invalid input.”
- “Error occurred.”
- “Something bad happened.”
Validation tone
Section titled “Validation tone”Prefer guidance over judgment.
- “Enter a valid email address.”
- “Use at least 8 characters.”
- “This field is required.”
Avoid “Invalid ___” when you can tell the user how to fix it.
Empty states
Section titled “Empty states”Empty states should help users understand:
- what this area is for
- why it’s empty
- what they can do next (if relevant)
Example:
No messages yet. When someone uses the contact form, they’ll appear here.
Success states
Section titled “Success states”Success messages should confirm completion without being overly enthusiastic.
Examples:
- “Message sent.”
- “Saved successfully.”
- “Copied to clipboard.”
Good UI copy reduces cognitive load. It’s one of the easiest ways to make a product feel polished and trustworthy without adding more UI.