# Empty, Loading and Error States

## Purpose

Consistent handling of non-ideal states.

## Decisions

### Empty, loading and error states

This page gathers decisions made elsewhere ([Feedback](../components/feedback.md), [Imagery and Illustration](../foundations/imagery-and-illustration.md), [Motion](../foundations/motion.md), [Personality and Tone](../philosophy/personality-and-tone.md)) so the three states can be found in one place.

**Empty**
- A **grey icon** (Tabler, 32px), a title, one line of text and an action button. Everyday empty states use an icon; a flat illustration with a violet accent is for occasional large empty states such as onboarding.
- The text says what will appear and, where useful, what to do. No jokes.

**Loading**
- **Content whose layout is known:** a shimmering skeleton in the lighter tiers.
- **Actions, and content with no predictable shape:** the gradient spinner (clockwise, solid red head, rounded cap).
- **Progress of unknown length:** a flowing-gradient bar where there is room, or the spinner where space is small. The label sits on the right and says **what** is loading; there is never a generic "Working...". No label if it is not worth showing.
- **Images:** a still block in the lighter tier with the spinner on it.
- Skeleton and spinner animations stop under reduced motion.

**Error**
- **Something failed to load a page:** centred in the page like an empty state, with a red-pink icon, a short explanation and a **Try again** button (red-pink border and label).
- **A failed image:** an icon and "Image unavailable" on the lighter tier.
- **A failed action:** an error toast at the bottom centre, with an optional description, and it stays a little longer than other toasts (10 seconds).
- **A field error:** red-pink border and icon in the field, message below in soft white.
- Wording follows the voice rules: simple language with the information a technical person needs, never blaming the person.