Figma 404 page header examples

Every product ships a 404 eventually. Somebody bookmarks a URL that gets restructured, a blog post from three years ago points at a page that moved, a shared link loses a character in a chat client, a project gets deleted while a teammate has it open.

The person on the other end did nothing wrong and now has nowhere to go. The fourteen layouts here are the section that decides whether they stay.

The section, not the whole page

These are 404 sections, sized to sit inside a page. On desktop they are 1,440px wide, mostly 960px tall with a couple of shorter types at 800px and 814px; on mobile they are 375px wide at heights from 776px up to 1,120px depending on how much each layout carries. The 404 page examples are the assembled screens.

This file shows how that assembly goes: the section sits under a dropdown header navigation at 72px on desktop and 64px on mobile, then combines with a blog section, a CTA section or newsletter signup, and a footer. Those extra sections are not padding. They are what give a stranded visitor somewhere to go next.

A 404 that only apologises is a dead end with a mascot

Jakob Nielsen's guidance on the dreaded 404 message has aged better than most: apologise briefly and plainly, drop the jargon and codes nobody can act on, offer search, and point at the destinations people were most likely aiming for.

The last part is the one that gets skipped. A charming illustration and a Back to home button send everyone to the top of the funnel to start again. A handful of likely destinations, recent articles, or a search field gets a decent share of them to the page they actually wanted. The Illustration and Screen mockup types are there for brands that want personality, and they still leave room for the links. Use the room.

Copy, and the status code behind it

Two lines do most of the work: what happened, in words, and what to do next. The error number itself is optional, and nobody has ever been rescued by seeing 404 set at 96px, though most of these layouts do it anyway because clients ask for it and because it makes the page recognisable at a glance.

More consequential, and invisible in any mockup: the page has to return an actual 404 status. Serving a friendly not-found page with a 200 response is what Google's documentation on HTTP status codes reports as a soft 404, and it quietly keeps dead URLs in the index. Worth a line in the handoff note, since no designer can see it and no developer will think to ask.

Under maintenance is a different message

One Type value is not a 404 at all. Under maintenance covers planned downtime and needs its own content: what is happening, when it will be back, and where to watch for updates. A maintenance page with no return time reads as an outage nobody is monitoring. Design it alongside the 404 because they get built in the same afternoon, but do not let them share copy.

Keep both distinct from empty states, which look similar and mean the opposite. An empty state is a page that works and has nothing in it yet. A 404 is a page that does not exist. Every type here is drawn separately at both breakpoints and comes in light and dark like the rest of the kit.

When it is time to build, the same sections exist in code. Untitled UI React 404 pages are open source, built with Tailwind CSS and React Aria, ready to drop into a not-found route.