500 error page

Communicate a server-side failure: status, incident language, reference id for support, and explicit retry.

Internal server error

500

ref · 8f2c·9d01

We couldn’t complete that request

Something broke on our side — not your connection. Wait a moment and try again, or email support with the reference id if it persists.

Home

Widely Supported

uino-js

Quick implementation

.page-error-demo { width: min(42rem, 100%); margin-inline: auto; min-height: 14rem; }
.err500 { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); }
.err500__ribbon {
  background: oklch(0.55 0.2 25);
  color: oklch(0.99 0 0);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

Prompt this to your LLM

role="alert", support reference, and button semantics.

Build a 500 error card in HTML/CSS.

- Wrapper must use class "page-error-demo" for automated tests.
- Inner: .err500 with role="alert" and polite aria-live.
- Include a high-contrast ribbon, monospace reference badge, title, paragraph, Retry (button) and Home (link styled as outline).
- Tokens: var(--card-border), var(--accent), var(--muted).

Return HTML + CSS.

Why this matters in 2026

Users blame themselves when errors look vague. A clear 500 with a reference id turns support tickets from guesswork into triage.

The logic

The ribbon separates “system health” from content; the badge gives humans something to paste into chat without exposing stack traces.

Accessibility & performance

role="alert" announces the failure once; avoid live="assertive" unless you need to interrupt. Keep retry as a real button.