Centered Astronaut
A centered 404 screen: a framed astronaut adrift over a soft glow above a bold headline, a short lede, and pill CTAs to head home or go back.
A centered 404 screen: a framed astronaut adrift over a soft glow above a bold headline, a short lede, and pill CTAs to head home or go back.
The Modern SaaS Collection unlocks the source for every Modern SaaS block. All Access unlocks every Collection.
Already purchased? Log in
Centered Astronaut is a 404 screen with a sense of humor about being lost. A framed photo of an astronaut adrift in front of the moon sits over a soft radial wash, then an uppercase "404" eyebrow, a bold balanced headline, a one line lede, and two pill CTAs that point the visitor back home or to the previous page.
The section fills the viewport and centers everything, so it drops straight into a not-found route with nothing else around it. The frame, glow, and copy are all built from theme tokens, so the screen reads cleanly in light and dark mode. The photo is the only asset, and it carries the mood without any extra decoration.
Reach for this on the not-found route of a Modern SaaS product, the page a visitor lands on after a dead link or a mistyped URL. The astronaut keeps the moment light, the bold headline names the problem in two words, and the pair of CTAs gives a clear way out instead of leaving the visitor stranded.
It also works as a soft empty state for a route that has no content yet, when you want the same calm, centered layout without an error of its own.
src path. A portrait image suits the frame best; keep it calm so the headline stays the focus.bg-muted/50 wash or the radial mask if you want more or less glow behind the column.Tip: keep the headline to a couple of words and let the lede carry the detail, so the screen stays as calm as the rest of the collection.