About this block

Centered Astronaut is a 404 screen with a sense of calm about being lost. A framed photo of an astronaut adrift in front of the moon anchors the column, then an uppercase "404 error" label, a bold balanced headline, a short 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 and copy are built from theme tokens, so the screen reads cleanly in both light and dark mode. The photo is the only asset and carries the mood without any extra decoration.

When to use

Reach for this on the not-found route of an AI assistant product, the page a visitor lands on after following a dead link or a mistyped URL. The astronaut keeps the moment light, the bold headline names the problem clearly, and the pair of CTAs gives a way out instead of leaving the visitor stranded.

It also suits any Modern SaaS route that has no content yet, when you want a calm centered layout that shares the feel of the rest of your product.

A natural flow around it on a Modern SaaS page:

Before

• A Navbar so the site header still appears above the error screen
• A Hero on the home route visitors are being sent back to

After

• A Footer to close the page and keep navigation consistent
• Split With Links as an alternative if you want helpful link cards instead of a single visual

What you can customize

The photo, copy, and CTAs are all independent, so you can adapt the screen to fit your product without restructuring the layout.

• The visual. Drop in your own art at the image source path. A portrait crop suits the rounded frame best; keep the subject calm so the headline stays the focus.
• The copy. The error label, headline, and lede are plain text, so you can retune the message for a 404, a 403, or a soft empty state without touching the layout.
• The CTAs. Point the primary button at your home route and wire the second to the browser history, or swap it for a link to your support channel or a search page.

Tip: keep the headline to a few words and let the lede carry the detail, so the screen stays as calm as the rest of the collection.