# 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. Canonical: https://patternpaste.com/pattern/error-404.html Section: 404 Access: Free, and free to keep. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: button, buttons, group, heading, paragraph Keywords: 404, error, not found, missing page ## Variations (2) ### 404 page (the default) Identical markup in every theme. ### Mint and cherry This variation states its own colours and states its own type: identical in every theme. A friendly small-business 404: a cherry Arial Black numeral on pale mint with deep green type and a Helvetica message. A cherry pill Back to home button sits beside an underlined tap-to-call link. --- ## 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. ## Why this is not the feature grid and not the stat row 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. ## 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(5.5rem, 28vw, 15rem)