Product copy
Error messages and empty states
Errors explain and recover. Empty states orient — they do not entertain.
Error rules (summary)
Full enforceable table: design system voice. Three requirements:
- Say what happened, not that something happened
- Say what to do next — every error has a recovery action
- Never "you" — the system failed, not the person
Examples
| Don't | Do |
|---|---|
| Invalid email | That email doesn't look right — check for typos |
| You must select a rating | Pick a rating to continue |
| Error 500 | We couldn't save that. Try again in a moment. |
| Failed to load reviews | Reviews didn't load. Retry |
| Something went wrong | Connection lost. Check network and retry |
By surface
business.*
Professional tone. Offer retry or support path.
Do: Export failed. Try again or contact support.
feedback.*
Compact. One line + one button.
Do: Save failed. Retry
www
Rare errors on cached pages. Calm, no blame.
Do: Page didn't load. Refresh or try again later.
Empty states
State what is missing and the next action. EmptyState illustrations are an open design decision — until approved, use text + primary CTA only.
| Context | Don't | Do |
|---|---|---|
| No reviews yet | Nothing here yet! | No reviews yet. Invite participants to collect feedback. |
| No events | Get started today!!! | No events yet. Create event |
| Filtered empty | No results | No events match these filters. Clear filters |
| Permission denied | Access denied | This action needs permission. Ask your organization admin. |
Table and list components reserve a stateAction slot — an empty or error state without a recovery action is incomplete.
Sporting Scouter Content Style Guide
Component-enforceable rules: design-system.sportingscouter.com/voice. Tokens from
packages/config/tailwind/theme.css.