404 Error Page
One line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
We made two examples: Vibary's flat violet 404 on near-black, and a museum's red-to-amber serif numeral on paper. Both have the same giant code, one line, one way back, and the small wordmark in the corner.
The 404, the line and the 'Back to the studio' button come from the slots you fill in. The numeral is the only element with a gradient, and the background drifts, so its wash of colour sits a little differently each time. The numeral as hero, the single line, the one way back and the staggered entrance always stay. Swap the code and line for any dead end: a 500, a removed page, an empty state.
Generated for this library
Input
Brief a friendly 404 for Vibary — the page wandered off
Wordmark VIBARY
Code 404
Line This screen wandered off while we were designing.
Way back Back to the studio
Palette --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad ·
--accent #7c7cf0 · --accent-2 #5b5bd6
Returned 1 file · index.html · full-viewport · no page scroll
numeral 404 spanning much of the width — the only gradient,
a blend of the two accents, softly shadowed
line one muted sentence directly beneath
way back a single accent button, the only exit
ground a slow wash between the two accents, drifting
mark VIBARY, small, in the top corner
entrance the numeral settles from a blur, then the line and
the button rise; reduced motion drops the travelYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark
- 3The code
- 4The line
- 5The way back
- 6The palette (one :root block)
404 Error Page
What this makes
One line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six slot lines — the code and the line carry the tone; the way back names the one exit.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser, or wire it as your app's 404 — it is the whole screen.
- Reuse it for any dead end by swapping the code and the line; the composition stays.
What you swap
- The brief (one line)
- a friendly 404 for Vibary — the page wandered off
- The wordmark
- VIBARY
- The code
- 404
- The line
- This screen wandered off while we were designing.
- The way back
- Back to the studio
- The palette (one :root block)
- --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0 · --accent-2 #5b5bd6
Before it runs
- A code and a line that belong together — the numeral sets the tone, the line answers it.
- One way back, not a menu: a lost screen offers a single clear exit.
- A palette of five values; the ground and the numeral's gradient are drawn from them.
When to reach for it
When a wrong turn deserves a real screen, not the browser's grey default — a 404, a gone page, an empty state with somewhere to go. The composition is fixed; the code, the line and the way back are yours.
What changes
- A single index.html with no build step and no outside request: one full-viewport screen that fills the window without page scroll.
- A giant code numeral as the centre of gravity, the only place a gradient is allowed, sitting over a ground drawn entirely in CSS.
- One quiet line under it — the apology, in the reader's voice — and a single button that leads back.
- A small wordmark in the corner so the lost page still knows whose it is.
- One entrance: the numeral settles, then the line and the button rise; with reduced motion the travel is dropped and the screen arrives in place.
Pairs with
- Count-Up StatsOne line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
- Mobile Profile PageOne line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.
- One-File Landing PageOne brief in, one self-contained index.html out: a whole landing page in a single file — a scroll-aware nav, a hero, a highlighted statement, a feature grid, a closing call and a footer, every section rising as it comes into view.