About this template
Nexto 404 was captured at 1986x1446 and kept as a specification rather than as a gallery image. The palette runs neutral #F5F5F5 underneath and near-black #1A1A1A for the type, and the type is DM Sans. Delivery is React and Tailwind CSS, captured at 1986x1446 so the frame is fixed before any code is written. Motion is limited to 5s transitions and cubic-bezier(0.77, 0, 0.175, 1). Take it on when the 404 page needs a decided order before any new sections are added.
Designed for
- Made for agencies that bill by the round and want 100vh sections and 20px spacing steps agreed before the first one.
- Product teams writing their own 404 page copy who need every line to keep the length the display type was sized for.
- Made for a solo founder shipping one 404 page for an AI or SaaS product and no design system behind them.
What's included
- Navigation held to one row. A slim bar sits over the 404 page with the wordmark on the left and the links set in DM Sans, so the composition reads as content first and chrome second. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1986x1446 composition without a background of its own, so the media runs edge to edge underneath it.
- Sizes fixed in the brief. The layout works on absolute values rather than ratios: 100vh sections, 20px spacing steps, 5s transitions and cubic-bezier(0.77, 0, 0.175, 1) easing. Because the values are fixed, a substitution changes the look without changing the rhythm.
- A stat row instead of a claim. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the 404 page from turning into a feature list. Figures are set at one weight, so the row does not rank its own statistics.
- One row, no drawers. The mobile menu is part of the brief, so the collapsed state is designed rather than improvised. Test the bar over your own media before giving it a background.
Motion & interaction
Fast enough to feel deliberate
The brief fixes the transition value at 5s, so a rebuild cannot substitute a slower default. Easing is specified alongside the duration (5s), so a rebuild cannot quietly substitute a different feel.
The controls are the interactive layer
The pointer work is small and specified: hover states on the buttons and links rather than on every card, applied to the elements that already look interactive. A control that looks interactive behaves interactively, so there are no false affordances.
How the 404 page reflows
Test this 404 page at 1986x1446 and then at phone width: the same order holds, with the scale is fluid rather than stepped, the section is held at 100vh and the navigation collapses into a mobile menu. The reflow keeps the action reachable at every width.
Reading Nexto 404 as a spec
Specific numbers age: a value that suits 1986x1446 may not suit your frame. The brief states 100vh sections and 20px spacing steps anyway, because a stated value is easier to change than an unstated one. Nothing in this 404 page depends on a default.
The argument this 404 page makes
Most SaaS pages add another section when the first screen is weak. This one removes options instead: navigation, the headline, the stats row and the card grid, in that order, and nothing that repeats the offer. It gives a SaaS reader the shortest honest route to the offer.
Frequently asked questions
What can I do with the Nexto 404 brief once I have it?
Everything quoted on the page comes from the captured 5,689-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What does the brief behind Nexto 404 actually contain?
It is a build brief rather than a mood description: it names the composition at 1986x1446, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Nexto 404 404 page in a different stack?
Nexto 404 was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
