Figma 404 page examples

Nobody chooses to visit a 404 page. They get there from a mistyped URL, a link in a newsletter that picked up a trailing bracket, a bookmark from three site migrations ago, or an old blog post someone still shares.

The visitor arrived wanting something specific, and the page has exactly one job: hand them a plausible next step before they hit the back button and go to a search engine instead.

What a 404 should recover to

Look at how these examples are assembled and the pattern is obvious. Every one of them ends in a full footer, which on a marketing site is the closest thing you have to a site map. Several add a blog section underneath the error, putting three or four recent posts in front of someone who arrived from a stale link. Several add a CTA section, and one closes with a newsletter sign up.

That stack is the actual design work. Jakob Nielsen's guidance on the 404 message has said the same thing since 1998: apologise in plain language, then give people search and links rather than a dead stop. An illustration with a clever line and no exits is decoration, not a page.

The status code is part of the design

This is where design and engineering have to agree. The page must be served with a real 404 status, not a 200 with sad text on it. Google's documentation on how HTTP status codes affect crawlers explains what happens either way: a genuine 404 gets the dead URL removed from the index, while an error page returned as a success shows up as a soft 404 in Search Console and lingers.

Put it in the handoff note next to the design. It costs one line and saves an argument six months later.

How the examples are put together

Each page starts with a header navigation, 72px tall on desktop and 64px on mobile, so the site's normal escape routes are present before anyone reads the error. Under it sits the 404 section, usually a full 960px on the desktop canvas, then whatever recovery sections that example uses, then the footer.

They are assembled from the same 404 page headers, blog sections, CTA sections, newsletter CTA sections, and footers as the rest of the marketing site, which is the point: your error page should look like it belongs to the same company as your homepage. Swapping the blog section for a CTA, or dropping both and keeping the footer, is a matter of deleting a frame.

How funny should it be

Mildly. A 404 is one of the few places a product can show a little personality without getting in the way, and the fact that people collect screenshots of good ones tells you the appetite is real. The rule is that the joke goes above the exits and never replaces them.

NN/g's error message guidelines allow for exactly this: when a failure cannot be undone, a light touch can hold goodwill, as long as the message still says what happened and what to do next. Someone who lost a purchase confirmation link is not in the mood for a pun that costs them another thirty seconds.

When it is time to build, the same pages exist in code. Untitled UI React 404 pages are open source, built with Tailwind CSS from the same sections, so the recovery links you designed are the ones that ship.