Page not found
The 404 page: what someone sees when an address does not exist. Nuri lit like a clay figure in front of a huge 404, one line of help, the search box and three places to go.
Beta until design draws it: the layout follows a product reference image, not a Figma frame (C105).
Preview
The page as it appears for any address that does not exist. This copy sits inside the docs, so its title is plain text; the real page uses an h1.
Error 404. Looks like we took a wrong turn
This page doesn’t exist or might have been moved. Let’s get you back on track.
// apps/docs/app/not-found.tsx
import { NotFoundView } from '../components/NotFoundView'
export default function NotFound() {
return <NotFoundView />
}To see the real page, open any address that does not exist, for example /this-page-does-not-exist/.
Usage
// app/not-found.tsx: Next.js shows it for every address with no page
import { NotFoundView } from '../components/NotFoundView'
export default function NotFound() {
return <NotFoundView />
}- Keep one
not-found.tsxat the root of the app, so every unknown address gets the same page inside the site's own header and navigation. - The page is only a way back: it never lists or guesses pages. Search opens the same palette as ⌘K.
- Use the
h1title on the real page. Usepandembeddedonly when the view is shown inside another page, as here. - Keep the wording friendly and short. Say what happened, then what to do.
Variants and sizes
One layout, two placements.
Sizes
Nuri stands 336px tall (256px on a phone) on a stage in front of a 404 set at up to 272px in the body face at weight 800. The title is Title/H3, the line under it Paragraph/Medium in Text/Sub-600, and the search box and three links sit in a 640px column. As a full page it is at least 72% of the window tall and centred; embedded, it only takes the space it needs.
States and interactions
Nuri's expression is confused, and its question marks repeat; with reduced motion it stays still. The search box opens the search palette, where the cursor is ready. Each link row slides its arrow when hovered and opens Components, Foundations or Products.
Composition examples
The page uses Nuri and the docs site's own shell. The clay look is a lighting filter on Nuri's artwork, and the floor shadow, question mark and glow use existing colour tokens, so they follow the light and dark themes.
API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
heading | 'h1' | 'p' | 'h1' | The element of the title. h1 on the real page; p when the view sits inside another page and should not add to its outline. |
embedded | boolean | false | Drops the full-page height and the large padding, so the view fits in a preview. |
Accessibility
Keyboard
| Key | Behaviour |
|---|---|
| Tab | Moves between the search box and the three links. |
| Enter / Space | Presses the search box, or follows the focused link. |
| ⌘/Ctrl / K | Opens the site search from anywhere. |
Screen readers
The title is a heading that begins "Error 404." (read aloud, not shown). The big 404, the question mark and Nuri are hidden from assistive technology.
Focus
A visible focus ring on the search box and on each link. The search palette takes focus when it opens and returns it when it closes.
Contrast and colour
The 404 and the title are Strong-950 on the page colour; the line under them is Sub-600. The scenery is decorative and carries no meaning.
Touch and pointer
Buttons are 44px tall and wrap onto two lines on a narrow screen.
You must: keep a heading on the page, set the browser title to "Page not found", and give people a way back.
Figma mapping
Not drawn in Figma. The layout follows the 404 reference image supplied by the owner (C105); the 3D look is Nuri's own artwork lit as clay (option B, with option C's three links).
Guidelines and related components
Use Page not found for
- Any address that has no page
- A page that was removed or moved
Don't use Page not found for
- A list or search with no results (use Empty state)
- A failure to load something that exists (use an error state)
Do and don't
This page doesn’t exist or might have been moved. Let’s get you back on track.
Error. Invalid URL.