The tangible win
After this lesson, you should be able to see labels, helper text, errors, empty states, and button copy as system-level design decisions—not filler text.
Why words belong in a design system
Two screens can use the same components but feel like different products if the wording is inconsistent.
- One button says Submit; another says Save changes.
- One error says Invalid input; another says Enter an email address, like name@example.com.
- One empty state says No data; another explains what happened and what to do next.
The component is not enough. The system also needs content rules.
Backend analogy: error messages are API design
A backend error like 400 BAD_REQUEST is technically true but not sufficient for product use.
Good product copy is like a good API error response: it tells the user what happened, where, and how to recover.
{
"error": "email_required",
"message": "Enter your email address."
}Microcopy by job
| Copy type | Job | Better example |
|---|---|---|
| Button | Make the action specific. | Save changes, not Submit. |
| Label | Name the data or control. | Work email, not placeholder-only text. |
| Helper text | Prevent mistakes before they happen. | Use the email tied to your company account. |
| Error | Explain recovery. | Enter a valid email address. |
| Empty state | Explain absence and next step. | No projects yet. Create one to start tracking work. |
Weak vs strong copy
Weak:
Oops! Something went wrong.Better:
We couldn’t save your changes. Check your connection and try again.The better version names the failed action, gives a likely cause, and suggests recovery.
Practice: choose the better error
A user leaves the email field empty. Which error is better?
Content system rules
- Prefer verbs that match the actual action: Save, Send invite, Delete project.
- Avoid generic labels: Submit, OK, Click here.
- Use plain language before internal terminology.
- For errors, say what happened and how to fix it.
- For destructive actions, name the object being affected.
- For empty states, explain whether the absence is normal, filtered, or broken.
Read next
Skim Material and Atlassian content design docs. Notice how content guidance is treated as part of product quality, not as decoration.