About this template
Skybridge 404 shows one way to build the 404 page for an ecommerce brand, and publishes the instructions that produced it. The palette runs blue #1165B4 underneath and white #E7E1D8 for the type, and the type is Geist Mono. It ships as React and Tailwind CSS, so the whole 404 page can be lifted into a project without a design handoff. The motion budget is a looping video bed. Borrow the structure and not the subject: the 404 page and its numbers move to your brand unchanged.
Designed for
- Made for studios that have to explain 640px behaviour to a client without building a prototype first.
- Contract teams taking over this 404 page who need a 1456x1080 frame pinned in the repo before the first commit.
- Made for product managers who need the 404 page scoped to one sprint and no new assets.
What's included
- Top row, one action. The bar overlays the 404 page instead of pushing it down, so the composition keeps the full height of the first screen. Labels are short enough to fit one line at 640px, and the active item is marked with weight rather than with a pill. One action per bar.
- One clip does the work. Video sits on the bottom layer of the 1456x1080 composition, with the type arranged above it and nothing in between. The loop is short enough (4.7s) that the eye reads it as texture rather than as a timeline.
- Display size does the talking. Type is the styling system here: Geist Mono at the display size, the same face across the interface, and no second accent colour doing the work. Line height follows the size steps rather than a single global value.
- Navigation without a background. Below 640px the links collapse instead of wrapping onto a second line.
Motion & interaction
Pointers only where they help
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. Feedback is limited to the controls, so the composition stays still around them.
The canvas holds the first screen
The visual is produced at runtime (a WebGL canvas) rather than loaded as a still, so the 1456x1080 frame has one fewer asset. Because it is a render rather than a still, the focal element holds up at any size.
How the 404 page reflows
Type is clamped rather than stepped here (a clamp between 14px and 40px), so the display line does not jump between widths. The narrow layout is a decision rather than a squeeze, and the hierarchy survives it.
The timing behind the 404 page
Ambitious motion usually costs the first screen its legibility. This brief keeps hover and press states, a 4.7s media loop and a live canvas short enough that the type never has to wait. Nothing animates for its own sake in this 404 page.
The order behind the 404 page
Where a marketing page stacks proof below the fold and hopes, this 404 page puts navigation, the stats row and the background clip in front of the reader and holds the rest back. A ecommerce reader gets the offer before the options.
Frequently asked questions
What does the brief behind Skybridge 404 actually contain?
The captured brief runs 7,104 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
What can I do with the Skybridge 404 brief once I have it?
Everything quoted on the page comes from the captured 7,104-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
Skybridge 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.
