---
id: "aw-el-72d6b923-a1ca-43a8-a358-c122821e5477"
source: https://www.awwwards.com/inspiration/404-era-residence
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Cross-Shaped Serif 404 Page

## Summary
A 404 page for a luxury residential site: a pale powder-blue panel floats over a sunny terrace photo, and the error number is set as a cross of tall high-contrast serif numerals with a flowing script word tucked under it. Widely letterspaced words flank the cross, and a thin circular Back home button sits bottom right. Worth studying for turning an error page into a typographic composition that still feels on brand.

## Style
- Theme: light (powder blue panel over a sunlit photo)
- Mood: elegant, airy, witty, refined, calm
- Tags: 404-page, didone, script-type, letterspacing, circular-button, real-estate, editorial
- Category: 404, Typography

## Palette
| Role | Hex |
|---|---|
| Powder blue panel | #B5CEDC |
| Navy ink | #1B2A4A |
| Foliage | #3E4A20 |
| Olive | #6B6E50 |
| Sage | #8B948A |
| Mist gray | #A8B5BB |
| Stone | #EBEAE7 |
| Sky | #CEDDEC |

## Typography
- Numerals: tall high-contrast display serif with sharp hairlines and flared, calligraphic 4s, navy, each about 11% of the frame height. Closest free font: Bodoni Moda 400 at a large optical size, or Playfair Display 400 compressed slightly with `scaleX(0.85)`.
- Script word under the cross: flowing copperplate-like script, navy, about 8% of height. Closest free font: Pinyon Script or Italianno.
- Flanking words: thin condensed serif caps with very wide tracking (about +0.8em), about 2% of height.
- Utility text (top message, bottom line, nav links, Back home): geometric sans, bold, uppercase, small (about 1% of height) and tracked +0.1em. Montserrat 700 or Manrope 700.
- Top-right nav title: condensed serif caps underlined, two lines. Antonio or Bodoni Moda.

## Layout
- 4:3 frame (1600x1200). The photo fills the frame; the panel is inset about 5% left and right and sits from 14% to 86% of the height, square corners, no shadow.
- Everything is centred on the panel's vertical axis: message at the top, numeral cross in the middle (one 4 above, a 4 0 4 row, one 4 below), script overlapping the lower 4, one line of text at the bottom.
- Flanking words sit on the middle row's baseline at about 20% and 75% of the panel width.
- Corners: circular seal logo top left, nav block top right, vertical breadcrumb bottom left, round button bottom right.

## Elements
- Background photo: terrace with a pergola, climbing greenery with pink blossoms, outdoor dining chairs and sea view.
- Circular seal: a small emblem ringed by text set on a circle (a placeholder seal).
- Numeral cross with script word.
- Vertical breadcrumb: two tiny rotated labels separated by a slash, the current one darker.
- Back home button: a 180px circle with a 1px navy outline at 40% opacity, partial darker arcs suggesting a progress ring, label inside left of centre.
- Top nav: an underlined serif link and two small sans links (book a call, contact) right aligned.

## Motion
Static image. Idea: draw the Back home ring stroke on hover (stroke-dashoffset over 600ms) and let the four outer 4s drift 6px apart and back on a slow 4s loop.

## Rebuild it
1. Page wrapper with the photo as `bg-cover`, and a panel `absolute inset-x-[5%] top-[14%] bottom-[14%] bg-[#B5CEDC] text-[#1B2A4A]`.
2. Numeral cross with CSS grid: `grid grid-cols-3 grid-rows-3 place-items-center` placing 4 in cells (1,2), (2,1), (2,3), (3,2) and 0 in (2,2); `font-serif text-[clamp(64px,10vw,160px)] leading-none`.
3. Script word: absolutely positioned under the bottom 4 with `-rotate-6` and the script font.
4. Flanking words: `tracking-[0.8em] uppercase font-serif text-sm` placed on the middle row.
5. Back home: an SVG circle with `strokeDasharray` equal to its circumference; on hover animate `strokeDashoffset` to 0 with Motion (600ms ease-out) and scale the label 1 to 1.05.
6. Entrance: stagger the five numerals in with opacity 0 to 1 and y 20 to 0, 80ms apart, 500ms ease-out.

## Generation prompt
An elegant 404 error web page: a flat powder blue panel floating over a sunny Mediterranean terrace with a green pergola and pink blossoms, the number 404 arranged as a cross of tall navy high-contrast serif numerals with a flowing script word beneath, widely letterspaced thin serif words on either side, small bold uppercase sans labels at the top and bottom, a thin circular outline button in the corner; refined, airy, luxury real estate style, no real logos.