← Back to docs

500 Error Page Design

A branded server-error screen that keeps users calm and provides clear recovery paths when things break.

500

Something went sideways

Our servers tripped over a cable. We've been paged and we're on it — no action needed from you.

Go homeCheck status

Key principles

  • Own the tone. Lighthearted but not flippant — “sideways” beats “internal server error.”
  • Remove blame. Never imply the user caused it. “We've been paged” signals ownership.
  • Two exits max. Primary CTA (home) + secondary (status page). No decision paralysis.
  • Brand the code. Gradient 500 turns an error code into a visual anchor.

Implementation notes

This lives at app/error.tsx or a custom 500.html in public/. Vercel serves the static variant on edge failures. Keep it under 50 KB — no client-side JS beyond hydration. The gradient text uses bg-clip-text with transparent fill; test across Chrome, Firefox, and Safari for rendering parity.