Figma 404 page header examples | Untitled UI
404 page headers in Figma: layouts, recovery links, and copy
How these 404 sections are built in Figma, and how to make one useful instead of just apologetic.
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.
FAQs
Frequently asked questions
Common questions about the Untitled UI Figma 404 page header components, covering layouts and recovery copy.
What should a 404 page include?
A plain statement that the page does not exist, a search field if your site has search, and links to the three or four places people most often want.
Keep the normal navigation and footer in place, since those are the quickest route back for anyone who already knows where they are going. Leave out the technical detail. Nobody landing here can act on a stack trace.
Should a 404 page keep the site navigation?
Yes, almost always. A 404 stripped of navigation offers one exit, and someone who arrived from a search engine has no history to go back through.
The compositions in this file keep a header navigation above the section and a footer below it for that reason. The only real case for a bare page is inside an app where the surrounding shell is already on screen.
What is the difference between a 404 page and an empty state?
A 404 means the address is wrong or the thing is gone. An empty state means the page is fine and has nothing in it yet, usually because the user has not created anything.
They look alike, a graphic and a line of text and a button, and swapping them confuses people: telling someone their project list does not exist is a very different message from telling them it is empty.
Are these 404 page headers included in the free version?
The 404 sections are part of the paid Untitled UI Figma kit. See pricing for what comes with it.
The 100% free Figma UI kit includes core components from the same system if you want to try the foundations first.
Is there a React version of these 404 pages?
Yes. Untitled UI React 404 pages are open source, built with Tailwind CSS and React Aria.
They mirror these Figma sections, ready to drop into a not-found route.
Figma UI components
Foundation Figma components and styles
Icons, styles, design annotations—everything you need to build the foundation of a great Figma design system.
\ \ Color styles \ \ 333 styles](/content/components/color-styles/index.html)
\ \ Typography styles \ \ 44 styles](/content/components/typography-styles/index.html)
\ \ Logos \ \ 3 components + 372 variants](/content/components/logos/index.html)
\ \ Icons \ \ 1,993 components + 352 variants](/content/components/icons/index.html)
\ \ Shadows & blurs \ \ 18 styles](/content/components/shadows-blurs/index.html)
\ \ Grids & spacing \ \ 38 variants + 8 styles](/content/components/grids-spacing/index.html)
\ \ File type icons \ \ 1 component + 153 variants](/content/components/file-icons/index.html)
\ \ Social icons \ \ 1 component + 102 variants](/content/components/social-icons/index.html)
\ \ Folder icons \ \ 1 component + 8 variants](/content/components/folder-icons/index.html)
\ \ Payment icons \ \ 1 component + 112 variants](/content/components/payment-icons/index.html)
\ \ Country flag icons \ \ 261 components + 783 variants](/content/components/flag-icons/index.html)
\ \ Integration icons \ \ 1 component + 32 variants](/content/components/integration-icons/index.html)
\ \ Cursors \ \ 1 component + 50 variants](/content/components/cursors/index.html)
Figma UI components
Figma base components
Buttons, inputs, avatars—all of the base components you need for modern product design and websites.
\ \ Avatars \ \ 280 variants + 98 styles](/content/components/avatars/index.html)
\ \ Badges \ \ 3 components + 666 variants](/content/components/badges/index.html)
\ \ Button groups \ \ 2 components + 64 variants](/content/components/button-groups/index.html)
\ \ Buttons \ \ 5 components + 940 variants](/content/components/buttons/index.html)
\ \ Checkboxes \ \ 2 components + 72 variants](/content/components/checkboxes/index.html)
\ \ Context menus \ \ 2 components + 32 variants](/content/components/context-menus/index.html)
\ \ Dropdowns \ \ 4 components + 143 variants](/content/components/dropdowns/index.html)
\ \ Inputs \ \ 7 components + 188 variants](/content/components/inputs/index.html)
\ \ Multi-select \ \ 4 components + 21 variants](/content/components/multi-select/index.html)
\ \ Progress indicators \ \ 2 components + 65 variants](/content/components/progress-indicators/index.html)
\ \ Radio groups \ \ 2 components + 168 variants](/content/components/radio-groups/index.html)
\ \ Select \ \ 6 components + 90 variants](/content/components/select/index.html)
\ \ Sliders \ \ 2 components + 39 variants](/content/components/sliders/index.html)
\ \ Tags \ \ 4 components + 210 variants](/content/components/tags/index.html)
\ \ Toggles \ \ 2 components + 64 variants](/content/components/toggles/index.html)
\ \ Tooltips \ \ 2 components + 84 variants](/content/components/tooltips/index.html)
Figma UI components
Shared Figma assets
Device mockups and useful utility pages—all of the shared assets you need for modern product design and websites.
\ \ 404 page headers \ \ 1 component + 28 variants](/content/components/404-page-headers/index.html)
\ \ Banners \ \ 1 component + 40 variants](/content/components/banners/index.html)
\ \ Credit cards \ \ 1 component + 13 variants](/content/components/credit-cards/index.html)
\ \ Design annotations \ \ 7 components + 38 variants](/content/components/design-annotations/index.html)
\ \ Device mockups \ \ 7 components + 18 variants](/content/components/device-mockups/index.html)
\ \ Email templates \ \ 3 components + 22 variants](/content/components/email-templates/index.html)
\ \ Forgot password headers \ \ 1 component + 10 variants](/content/components/forgot-password-headers/index.html)
\ \ Log in page headers \ \ 1 components + 32 variants](/content/components/log-in-headers/index.html)
\ \ Miscellaneous assets \ \ 3 components + 50 variants](/content/components/miscellaneous-assets/index.html)
\ \ Portfolio mockups \ \ 6 variants + 52 templates](/content/components/portfolio-mockups/index.html)
\ \ Sign up page headers \ \ 1 component + 42 variants](/content/components/sign-up-headers/index.html)
\ \ Verification page headers \ \ 1 component + 6 variants](/content/components/verification-headers/index.html)
\ \ Video players \ \ 3 components + 36 variants](/content/components/video-players/index.html)
Figma UI components
Application UI/Dashboard examples
Dashboard, settings, form layouts—useful examples for everything you need to design modern dashboards and products.
\ \ Dashboard examples \ \ 60 page examples](/content/components/dashboards/index.html)
\ \ Informational page examples \ \ 60 page examples](/content/components/informational-pages/index.html)
\ \ Settings page examples \ \ 42 page examples](/content/components/settings-pages/index.html)
Figma UI components
Application UI/Dashboard Figma components
Modals, tables, alerts—everything you need to design modern and beautiful apps, dashboards and products.
\ \ Activity feeds \ \ 2 components + 22 variants](/content/components/activity-feeds/index.html)
\ \ Activity gauges \ \ 3 components + 34 variants](/content/components/activity-gauges/index.html)
\ \ Alerts \ \ 1 component + 24 variants](/content/components/alerts/index.html)
\ \ Application header navigations \ \ 5 components + 80 variants](/content/components/application-header-navigations/index.html)
\ \ Breadcrumbs \ \ 2 components + 56 variants](/content/components/breadcrumbs/index.html)
\ \ Calendars \ \ 12 components + 82 variants](/content/components/calendars/index.html)
\ \ Card headers \ \ 1 component + 4 variants](/content/components/card-headers/index.html)
\ \ Carousels \ \ 4 components + 22 variants](/content/components/carousels/index.html)
\ \ Code snippets \ \ 1 component + 8 variants](/content/components/code-snippets/index.html)
\ \ Color pickers \ \ 6 components + 26 variants](/content/components/color-pickers/index.html)
\ \ Command menus (⌘+K) \ \ 5 components + 69 variants](/content/components/command-menus/index.html)
\ \ Content dividers \ \ 1 component + 18 variants](/content/components/content-dividers/index.html)
\ \ Date pickers \ \ 5 components + 68 variants](/content/components/date-pickers/index.html)
\ \ Drawers \ \ 2 components + 50 variants](/content/components/drawers/index.html)
\ \ Empty states \ \ 2 components + 36 variants](/content/components/empty-states/index.html)
\ \ File uploaders \ \ 3 components + 23 variants](/content/components/file-uploaders/index.html)
\ \ Filters \ \ 3 components + 38 variants](/content/components/filters/index.html)
\ \ Horizontal tabs \ \ 2 components + 280 variants](/content/components/horizontal-tabs/index.html)
\ \ Inline CTAs \ \ 1 component + 14 variants](/content/components/inline-ctas/index.html)
\ \ Line & bar charts \ \ 9 components + 116 variants](/content/components/line-bar-charts/index.html)
\ \ Loading indicators \ \ 1 component + 12 variants](/content/components/loading-indicators/index.html)
\ \ Messaging \ \ 3 components + 42 variants](/content/components/messaging/index.html)
\ \ Metrics \ \ 4 components + 36 variants](/content/components/metrics/index.html)
\ \ Modals \ \ 3 components + 252 variants](/content/components/modals/index.html)
\ \ Notifications \ \ 1 component + 18 variants](/content/components/notifications/index.html)
\ \ Page headers \ \ 1 component + 12 variants](/content/components/page-headers/index.html)
\ \ Pagination \ \ 3 components + 42 variants](/content/components/pagination/index.html)
\ \ Pie charts \ \ 3 components + 68 variants](/content/components/pie-charts/index.html)
\ \ Progress circles \ \ 1 component + 10 variants](/content/components/progress-circles/index.html)
\ \ Progress steps \ \ 7 components + 92 variants](/content/components/progress-steps/index.html)
\ \ Radar charts \ \ 3 components + 12 variants](/content/components/radar-charts/index.html)
\ \ Section footers \ \ 1 component + 8 variants](/content/components/section-footers/index.html)
\ \ Section headers \ \ 1 component + 12 variants](/content/components/section-headers/index.html)
\ \ Sidebar navigations \ \ 9 components + 168 variants](/content/components/sidebar-navigations/index.html)
\ \ Tables \ \ 4 components + 204 variants](/content/components/tables/index.html)
\ \ Tree views \ \ 3 components + 4 variants](/content/components/tree-views/index.html)
\ \ Vertical tabs \ \ 2 components + 264 variants](/content/components/vertical-tabs/index.html)
Figma UI components
Marketing website examples
Landing pages, blogs, sign up pages—useful examples for everything you need to design modern marketing websites.
\ \ 404 page examples \ \ 20 page examples](/content/components/404-pages/index.html)
\ \ About page examples \ \ 20 page examples](/content/components/about-pages/index.html)
\ \ Blog examples \ \ 20 page examples](/content/components/blogs/index.html)
\ \ Blog post examples \ \ 20 page examples](/content/components/blog-posts/index.html)
\ \ Contact page examples \ \ 20 page examples](/content/components/contact-pages/index.html)
\ \ FAQ page examples \ \ 20 page examples](/content/components/faq-page-examples/index.html)
\ \ Landing page examples \ \ 40 page examples](/content/components/landing-pages/index.html)
\ \ Legal page examples \ \ 10 page examples](/content/components/legal-pages/index.html)
\ \ Log in page examples \ \ 12 page examples](/content/components/log-in-pages/index.html)
\ \ Pricing page examples \ \ 20 page examples](/content/components/pricing-pages/index.html)
\ \ Sign up page examples \ \ 12 page examples](/content/components/sign-up-pages/index.html)
\ \ Team page examples \ \ 20 page examples](/content/components/team-pages/index.html)
Figma UI components
Marketing website components
Landing page header and website sections—everything you need to design modern and responsive marketing websites.
\ \ Blog post sections \ \ 3 components + 102 variants](/content/components/blog-post-sections/index.html)
\ \ Blog sections \ \ 4 components + 84 variants](/content/components/blog-sections/index.html)
\ \ Careers sections \ \ 2 components + 38 variants](/content/components/careers-sections/index.html)
\ \ Contact sections \ \ 6 components + 106 variants](/content/components/contact-sections/index.html)
\ \ Content & rich text sections \ \ 2 components + 78 variants](/content/components/content-sections/index.html)
\ \ CTA sections \ \ 1 component + 60 variants](/content/components/cta-sections/index.html)
\ \ FAQ sections \ \ 2 components + 72 variants](/content/components/faq-sections/index.html)
\ \ Features sections \ \ 2 components + 122 variants](/content/components/features-sections/index.html)
\ \ Footers \ \ 5 components + 192 variants](/content/components/footers/index.html)
\ \ Header navigations \ \ 10 components + 397 variants](/content/components/header-navigations/index.html)
\ \ Header sections \ \ 2 components + 148 variants](/content/components/header-sections/index.html)
\ \ Metrics sections \ \ 2 components + 42 variants](/content/components/metrics-sections/index.html)
\ \ Newsletter CTA sections \ \ 1 component + 32 variants](/content/components/newsletter-cta-sections/index.html)
\ \ Press mentions sections \ \ 1 component + 4 variants](/content/components/press-mentions-sections/index.html)
\ \ Pricing sections \ \ 5 components + 88 variants](/content/components/pricing-sections/index.html)
\ \ Social proof sections \ \ 1 component + 20 variants](/content/components/social-proof-sections/index.html)
\ \ Team sections \ \ 2 components + 56 variants](/content/components/team-sections/index.html)
\ \ Testimonial sections \ \ 3 components + 92 variants](/content/components/testimonial-sections/index.html)
The ultimate UI kit for Figma
What is Untitled UI?
Untitled UI Figma is the largest UI kit and design system for Figma in the world. Here's everything great about Untitled UI in just 60 seconds.
Untitled UI in 60 seconds
The ultimate Figma UI kit | Untitled UI from Untitled UI on Vimeo
Playing in picture-in-picture
Pause
Speed
Picture-in-Picture
Show controls
2x
1.5x
1.25x
1x
0.75x
0.5x
\ Preview in Figma](/content/preview/figma/index.html)
Join 380,000+ designers from the world's top companies
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Sam Pierce Lolla
Founder, Shuffleboard
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
Luca Vavassori
Founder, UXCrush
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Murat Alpay
Product Designer, @imuratalpay
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Jérémy Franck
Designer, @jrmyfranck
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Adham Dannaway
Product Designer, Practical UI
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
Riccardo Buzzotta
Senior Product Designer, Spotify
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
Corey Moen
Senior Brand Designer, Webflow
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
Matt Walker
Design Systems, Mailchimp
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Jenny Chu
Head of Product, Eucalyptus
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
Sunny Trochaniak
Founder, NewPulse Labs
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Dan Mcleay
Lead Designer, Fox Sports
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
Tom Bekkers
Founder & Creative Director, Flowbase
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
Dan Anisse
Co-founder, Relume
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
Abi Tyas Tunggal
Co-founder, Himalayas
Join our affiliate program
A simple and easy way to make 30% of every sale you refer to Untitled UI. Earn up to $2,699.70 on each sale!
Untitled UI in 60 seconds