[Library] 404

Catalogue accessStandard

404 page

A 404 page built as one mark: the numeral set at extreme display size in a single centred column, with the message and its heading bounded to the numeral's own optical width so the two read as one block. Nothing else on the page competes with it. States no colour and no font of its own.

View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A single centred column on your page ground: the numeral, a one-line heading, a sentence, and one button. Core blocks only, so there is nothing to install and nothing to keep updated.

The signature moment

The numeral IS the composition

404 is set at up to 240px and it is not a decoration sitting above the real content. It is the content. There is no eyebrow above it, no rule beneath it, no card around it and no second column beside it, and everything that follows is held to a small, quiet floor so that the page has exactly one thing in it.

The message is bounded by the numeral's own width, not by a measure we picked. That is the part worth paying for, and it is the reason the heading and the sentence read as part of the mark rather than as a caption under it. It is built out of two facts about CSS that copy-paste markup can actually reach:

  • ch is the advance width of the digit zero in the current font. So 2.75ch is not an arbitrary length: it is very nearly the width of three digits, measured in whatever face your theme has set, and it re-measures itself when the theme changes. The numeral's own tracking of -0.04em pulls 404 in to about 2.78ch, so the text block below lands a hair inside the numeral rather than a hair outside it, in a serif face and a sans one alike.
  • A constrained group applies its content size to its children, and ch resolves against the child's own font size. So the group holding the heading and the sentence carries the numeral's font size, purely so that its ch is the numeral's ch; every block inside it states its own size and never inherits that. The text is a normal reading size inside a box measured in display-size digits.

The consequence is that the block of text grows and shrinks with the numeral at every viewport, and the two edges stay aligned in a face with narrow figures and in one with wide figures. Nothing is nudged and nothing is measured by hand.

A second constrained group sits above it as a ceiling of 26rem. That is deliberately loose: at the numeral's largest size the ch bound is around 23 to 26rem in the faces the stock themes use, so the ceiling normally does nothing. It exists so that a theme or a filter that ever refuses the ch value leaves a sensible measure behind instead of a sentence running the full width of the section.

What it inherits from your theme

  • Typeface. The pattern states no font family anywhere. The numeral, the heading and the sentence all take whatever your theme sets. The width lock is measured in ch, so it is re-derived from your face rather than tuned to ours.
  • Palette. The ground is your base and every piece of text is your contrast, each written as a fallback chain ending on a colour WordPress itself guarantees. The button inverts the same pair. No accent slug appears anywhere, in any rung: an accent's brightness is unknowable, and this section is nothing but text on a ground.
  • Spacing scale. The section padding and the three gaps use the core spacing presets, so the page breathes at your theme's rhythm.
  • The button. It takes your theme's button element styles for everything except its colours, its square corners and its padding.

What it decides for itself

  • Proportion, which here is the entire design. The numeral runs from 88px at the smallest screens to 240px above roughly 860px of viewport, tracked in by -0.04em and set on a 0.82 line height so it reads as a solid block rather than as a line of type.
  • The width lock. Described above. This is the pattern.
  • The type floor. The heading and the sentence both bottom out at 15px, and the heading is a real h1 reading "Page not found" rather than the numeral, because 404 is not a page title anyone can hear read aloud.
  • Restraint. One button and nothing else. A search field, a menu or a set of popular links would all be defensible on a 404 page and all of them would break the one idea this pattern has.

What you change first

  1. The button's link. It ships with no URL, exactly as the editor writes one before you choose a destination. Point it at your home page first.
  2. The message. Keep it to one or two short sentences and avoid words longer than about eleven characters: the measure is narrow by design, and on a phone it is roughly twenty characters a line.
  3. The numeral's size. The clamp() on the 404 paragraph is the pattern's main dial. If you change it, change the identical clamp() on the group that wraps the heading and the sentence to match, or the text stops tracking the numeral's width. Those two values are one decision written twice.
  4. The number itself. 500, 403 and 410 all have three digits and need no other change. A different digit count means changing 2.75ch to roughly 0.92ch per digit.
Why this is not the feature grid and not the stat row202 words

Three patterns in this catalogue set numerals large. They are three different jobs, and the test is what happens if you delete the numeral.

  • feature-grid uses numerals as labels made structural. 01, 02, 03 are index numbers promoted to display size, each hanging under a hairline that runs the width of its column, each introducing a heading and a paragraph. Delete them and the grid loses its shape but the content survives.
  • stat-row uses numerals as data. Four measured values with units, sitting on collinear rules that make a shared baseline visible across the band. Delete them and there is nothing left to report.
  • error-404 uses one numeral as the whole composition. There is no second numeral to align to, no rule under it, no unit beside it, no heading it introduces and no list it indexes. Instead of the numeral being sized to sit beside text, the text is sized and bounded to sit inside the numeral. It is also the only one of the three set at the theme's own text weight rather than at 700: the other two need weight to hold their own against a rule or a neighbour, and this one has no neighbour.
Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(5.5rem, 28vw, 15rem)
Back to the library

Continue exploring

Next in 404

Explore all 3 404 patterns