Patterns
Empty & Error States
Empty-state copy follows one formula: "No [Items] Yet" + "When there are [items], they will show here." Two distinct error patterns — field validation and the error modal — are never conflated.
Empty state
No Products Yet
When there are products, they will show here.
Field validation error
Enter a valid email address.
Error modal — system/API failure
Info icon in a coloured circle, not a warning triangle. Single full-width primary action.
Do
- Use the empty-state copy formula everywhere, so it becomes recognisable rather than reinvented per screen.
- Reserve the error modal for system/API-level failures, not form validation.
Don't
- Use a warning triangle for an ordinary error modal.
- Show a field error and a success state on the same field at once.