A 404 page is the error page users see when they navigate to a URL that doesn’t exist on your website. It appears when a link is broken, a page has been moved without a redirect, or a user types a URL incorrectly. A default 404 page (blank white screen with “404 Not Found”) is a dead end — the user has no path forward and typically leaves. A well-designed 404 page recovers the user’s journey, reflects the brand, and often converts the interruption into an opportunity.
We analyzed 93 custom 404 error page screenshots across 258 SaaS products in the SaaS Boat library. Here’s the full range of how products design their error pages.
Framer
Canva
Notion
Loom
Asana
ClickUp
Miro
Whimsical
Stripe
Figma
GitLab
Intercom
Datadog
Auth0
Netlify
Retool
Vercel
Supabase
Sentry
WebflowWhy 404 Pages Are Worth Designing
The 404 page is typically an afterthought — built last, barely tested, and forgotten. But it reaches two important user types: visitors who followed a broken external link (potential customers), and existing users who clicked something that moved (already invested customers).
A branded 404 page with a search bar and navigation links retains 30-40% of users who would otherwise bounce. More importantly, a personality-forward 404 page can create a memorable brand moment at what would otherwise be a point of frustration.
30 Custom 404 Examples from Real SaaS Products
Personality-Driven 404 Pages
1. Framer — Interactive 404 animation
Framer’s 404 page features an interactive element that responds to cursor movement — appropriate for a product built on motion and interactivity. The 404 demonstrates the product’s capability while apologizing for the broken link. The error page becomes a product demo.
2. Canva — Design-forward 404
Canva’s 404 page is visually designed with their brand’s illustration style — colorful characters in a “lost” scenario. The visual personality matches the marketing site entirely. The 404 doesn’t feel like a system error; it feels like a page the team designed intentionally.
3. Notion — Minimal, on-brand 404
Notion’s 404 page maintains their minimal, document-like aesthetic. A clean “Page not found” message with a prominent “Go home” link. No illustration, no personality injection — just clarity. For a product that’s about focus, a focused 404 is on-brand.
4. Loom — Video team energy on the 404
Loom’s 404 page uses a short embedded video of a team member explaining the broken link. The meta choice (using Loom to fix the Loom error page) demonstrates the product in a context where users are actually surprised. A Loom video as the 404 message is clever product marketing.
5. Asana — “Even the best get lost” copy
Asana’s 404 uses empathetic copy that normalizes the broken link experience. Rather than apologizing, they frame getting lost as human. This tonal choice fits their project management brand — even great teams encounter obstacles; what matters is how you handle them.
6. ClickUp — Self-aware product humor
ClickUp’s 404 page uses humor about productivity: “This page doesn’t exist. But your to-do list does →”. The 404 redirects the user’s attention back to the product with a light touch. Humor on error pages works when the product brand already uses it.
7. Miro — Whiteboard as the 404 frame
Miro’s 404 page shows a blank whiteboard with a “Page not found” sticky note. For a whiteboard product, framing the error page as an empty workspace is an elegant bit of brand storytelling — the whiteboard is always the starting point, even when something’s broken.
8. Whimsical — Diagram of the error
Whimsical’s 404 page shows a simple flowchart: “User requests page → Page exists? → No → 404 → Go here instead.” For a diagramming tool, explaining the error as a diagram is a personality moment that demonstrates product thinking rather than just design style.
Navigation-Recovery 404 Pages
9. Stripe — Search + common destinations
Stripe’s 404 page includes a search bar and links to commonly visited pages: Docs, Dashboard, Support. The 404 is designed for recovery: users who arrive here have a clear next action regardless of what brought them.
10. Figma — Clean 404 with homepage link
Figma’s 404 is spare: error message + “Return to Figma” button. The simplicity respects the user’s time — no personality injection, just a fast path back. For a product whose users are often mid-task, speed of recovery matters more than brand humor.
11. GitLab — Status page link on 404
GitLab’s 404 page includes a link to their status page (status.gitlab.com). This is thoughtful: if a user can’t find a page they expect to exist, it might be a service issue, not just a broken URL. Linking to the status page handles this edge case elegantly.
12. Intercom — Help center search on 404
Intercom’s 404 page includes a help center search field. Users who land on broken support article links or help documentation URLs can search directly from the 404, without navigating back to the help center first.
13. Datadog — Documentation search on 404
Datadog’s 404 page includes documentation search — appropriate for a product whose most-visited pages are often docs. A user who typed a bad docs URL can find the right doc immediately without leaving the 404.
14. Auth0 — Developer docs path on 404
Auth0’s 404 page prominently links to their developer documentation, community forum, and support. For a developer authentication product, the most likely broken link target is a docs page — so surfacing docs at the 404 is the right navigation recovery.
15. Netlify — Docs + community on 404
Netlify’s 404 includes links to documentation and their community forum. For a developer platform, the community forum is a legitimate navigation destination — users who can’t find what they’re looking for in docs might find it in a community thread.
16. Retool — Self-service next steps
Retool’s 404 links to: “Browse templates,” “Read docs,” and “Contact support.” Three clear next steps that cover three different states the user might be in when they hit the error.
Brand-Consistent Error Pages
17. Vercel — CLI-style error output
Vercel’s 404 page is styled like terminal output — monospace font, command-line error format. For a developer product that developers interact with primarily through the CLI, the 404 feels like part of the same system. Visual consistency between the CLI and the web experience is a product polish signal.
18. Supabase — Dark mode 404
Supabase’s 404 page maintains their dark color scheme (matching the Supabase dashboard aesthetic). Users who navigate from the dashboard to a broken URL don’t experience a jarring light-mode 404. Consistent dark mode across error states is a detail that app users notice.
19. Sentry — Error monitoring irony
Sentry’s 404 page acknowledges the irony: a bug tracking company with a broken page. Their copy leans into this with a note that they’re probably already tracking the error. The self-aware humor fits their developer brand and makes the error moment lighter.
20. Webflow — “Designed in Webflow” 404
Webflow’s 404 page is notably well-designed — as it should be for a website builder. The page itself is a demonstration that Webflow can handle edge states beautifully. For a design tool, the 404 is another surface to demonstrate craft.
21. Hotjar — Friendly heatmap reference
Hotjar’s 404 mentions that they’re tracking what happened (because Hotjar is a behavior analytics tool). The light reference to their own product’s capability is an easter egg for knowledgeable users and a memorable touch for everyone else.
22. Amplitude — Analytics-aware 404
Amplitude’s 404 notes that they “don’t track 404 errors in your account.” A subtle self-referential joke for users who worry about event noise in their analytics. Product-specific humor is only funny if users understand it — which means it works as a credibility signal for product-literate buyers.
Conversion-Oriented 404 Pages
23. Calendly — Scheduling prompt on 404
Calendly’s 404 page includes a CTA to create a scheduling link: “While you’re here, create your free scheduling page →”. The 404 becomes a secondary acquisition path for users who arrive via broken external links and may not already have a Calendly account.
24. ActiveCampaign — Free trial CTA on 404
ActiveCampaign’s 404 page includes a “Start free trial” CTA alongside navigation links. For a product with frequent inbound links from blog posts and directories, the 404 is a legitimate conversion surface — not all broken-link visitors are current customers.
See ActiveCampaign on SaaS Boat
25. Customer.io — Resource recommendation on 404
Customer.io’s 404 recommends their most popular blog posts and guides. For content-heavy products, the 404 is an opportunity to surface educational content that might re-engage a visitor who came from a broken external link.
Minimalist Error Pages
26. Airtable — Single “Back to Airtable” link
Airtable’s 404 is a single button on a clean page: “Back to Airtable.” No illustrations, no additional navigation, no personality. For app-context 404s (inside the product), minimal is appropriate — users need a recovery path, not an experience.
27. Slack — Workspace-specific 404
Slack’s 404 pages within workspaces are context-aware: they show the workspace name and suggest returning to the workspace home. A 404 inside a specific Slack workspace knows more about the user than a generic 404 does — and uses that context.
28. Coda — “Go to my workspace” 404
Coda’s 404 navigates users to their specific workspace rather than the generic homepage. For a document tool where users always have a workspace to return to, the right recovery destination is the user’s workspace, not the marketing homepage.
29. Chargebee — Account-specific 404 recovery
Chargebee’s 404 within the billing dashboard links back to the account dashboard rather than the generic marketing site. Account-context 404s that return users to their account context reduce friction compared to marketing-site recovery paths.
30. Gong — “Contact your admin” on 404
Gong’s 404 page, appearing inside the product, suggests contacting the workspace admin for access issues. For a platform where broken URLs often indicate permission problems rather than truly missing pages, pointing users to their admin is the correct recovery path.
Key Patterns from 93 Error Page Screenshots
1. Different 404 contexts need different 404 designs. Marketing site 404s should link to major site sections and include a sign-up CTA for non-customers. Product/app 404s should link back to the user’s workspace or dashboard. One generic 404 for both contexts is the most common mistake.
2. Brand personality on 404 pages creates memorable moments. Users remember error pages with humor or self-reference because they’re unexpected. Framer’s interactive 404, Sentry’s ironic 404, Loom’s video 404 — these moments create brand recall at a point of frustration, which turns a bad experience into a surprising one.
3. Search bars on 404 pages retain users. A search field on the 404 page is the highest-conversion recovery mechanism — users who know what they’re looking for can find it without navigating back to the homepage. Particularly valuable for documentation and help center broken links.
4. The 404 is a legitimate conversion surface. For products with inbound links from external content (blog posts, directories, Product Hunt), the 404 reaches visitors who never intended to visit the marketing site. A free trial CTA on the 404 converts some of these visitors.
5. Status page links belong on error pages. For products where service outages are possible (hosting, monitoring, payments), linking to the status page from the 404 handles the “is the site down?” case without requiring a support ticket.
Frequently Asked Questions
Should I use a custom 404 page?
Yes. A default 404 is a dead end that guarantees user loss. A custom 404 page with navigation links and a search bar typically retains 30-40% of users who would otherwise leave. For any product with meaningful traffic, the investment is worth it.
Should my 404 page match my marketing site or my product dashboard?
Match whichever context is most likely to generate the broken link. Marketing 404s should match the marketing site. App 404s should match the product. If most broken links come from external sources hitting marketing URLs, the marketing design is the priority.
Is humor appropriate on 404 pages?
Humor works if: (1) your brand already uses humor elsewhere, and (2) the joke is short and the recovery path is still clear. Long humorous copy that buries the “back to homepage” link is worse than a plain 404. Humor should add personality, not friction.
What links should I include on a 404 page?
Always include: homepage/dashboard link. Consider adding: search bar, help center, top 3-5 popular pages, status page, contact support. Don’t try to include everything — focus on the 2-3 most likely next steps for a user who hit the specific broken link.
Browse 93 custom 404 error page screenshots from real SaaS products in the SaaS Boat library. See how the best products design their error states.
