Error Pages

Five canonical error scenarios rendered in all three brands. Each surface stays calm, points to the specific recovery action, and avoids blame language. Status codes are shown but never the hero — the human-readable title is the headline.

Usage rules

1. Anatomy

Every error page follows the same structure top-to-bottom:

Glyph — small (64×64) coloured square holding either the status code or an icon. Color encodes severity, not topic.
Code — uppercase mono label (e.g. HTTP 500, CONNECTION LOST). Always shown but de-emphasized.
Title — human-readable headline. Max ~48 characters. "We can't find that page", not "404 Not Found".
Body — one or two sentences. Says what happened and what the user can do, in that order. ≤ 200 chars.
Actions — primary action (most likely recovery) + ghost secondary. Up to 2 buttons.
Meta — request id / timestamp / status URL. Mono font, smallest size, only when actionable.

2. Severity → glyph color

Scenario	Glyph variant	Why
404 Not Found	`neutral`	User mistyped or stale link — not the system's fault, not urgent
500 Server Error	`danger`	Something broke; we own it
403 Forbidden	`brand`	Permission boundary — informational, not error
Offline	`warning`	Recoverable, transient
Maintenance	`brand`	Planned, calm
Unsupported browser	`warning`	Blocking but user-correctable

3. Voice rules

✓ "We can't reach our servers right now" — say what happened
✗ "Oops! Something went wrong!" — vague + cutesy
✓ "Try again" — give a verb the user can act on
✗ "Error encountered" — passive voice, no recovery
✓ Show timestamps in the user's local time, formatted like body text
✗ Don't dump stack traces; ship a "ref id" the support team can correlate

4. Per-brand personality

Perpetuals — warm, formal. White surface keeps it professional. "We're working on it."
Barriers — minimal, factual. Bloomberg-style status code prominent. "Service interruption — 3:42 PM ET."
UpsideOnly — encouraging, plain. Lean on the recovery verb. "Try that again."

5. SEO + accessibility

Server returns the correct HTTP status (404, 500, etc.) — render-time status code on the page is decoration, not the source of truth
<title> reflects the error: "Page not found · UpsideOnly"
Glyph is decorative — aria-hidden="true" on the icon
Title is <h1> on a real error page (not on this showcase, where the page already has its own h1)
Primary action button gets keyboard focus on page load

6. Don't

❌ Don't paint the entire page red on a 500 — keep the glyph contained, the page stays brand-tinted
❌ Don't auto-redirect from a 404 — let the user choose their next step
❌ Don't show a 500 page for client-side errors — those are bugs in our app, route to a generic "something didn't work, try again" empty state
❌ Don't include illustrations — text + glyph is enough; spare the bandwidth