Error page

404 and 500 layouts with clear recovery actions.

A full-page layout shown when a URL doesn't resolve (404), a required resource fails (5xx), or a user lands somewhere unexpected. The goal is to explain what happened and offer an obvious next step.

Anatomy

  1. Status code — large display type so people know which error they're looking at.
  2. Short headline — human translation of the code.
  3. Explanation — one or two sentences on what went wrong.
  4. Recovery actions — one primary button plus supporting links.

404

Oops!

Well, this is a bit embarrassing. The page you're looking for either doesn't exist or it's lost.

Email me about this error

Go to the home page

Implementation

  • Return the correct HTTP status code — don't serve a 404 page with a 200.
  • The page should render without any JavaScript, any API calls, or any authenticated data.
  • Keep it on the same layout as the rest of the site so navigation still works.

Tone

Be honest and a little warm. Avoid blaming the visitor ("You entered the wrong URL") — an error page is an apology, not a rebuke.