# 404 split > A 404 built as a seam: the numeral at up to 176px on one side, a ruled index of four destinations on the other, and one unbroken currentColor hairline down the join that every row rule runs into. Left-aligned from the first character to the last, and every destination carries a line saying what is there. No search field and no centred mark. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/error-split.html Section: 404 Access: Included in Pattern Paste access. 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, column, columns, group, heading, paragraph, separator Keywords: 404, error, not found, missing page, index ## Variations (3) ### Seam (the default) Identical markup in every theme. The numeral first, the index second, the seam between them. On a phone the two stack and the seam becomes a rule running down the left of the index. ### Index first Identical markup in every theme. The page leads with the way out instead of with the error: the index takes the left, the seam moves to its right edge, and the numeral hangs at the foot of the column beside it as a mark rather than a headline. On a phone the destinations come first, which is the order a lost visitor actually wants. ### Oxblood and sand This variation states its own colours and states its own type: identical in every theme. A sand ground and oxblood copy give the 404 an Arial Black display and a restrained rose accent on the index label. --- ## The signature moment: every rule dies into the seam The seam is the left border of the index column, so it is as tall as the taller of the two halves and it touches nothing else. The index column carries no padding at all: each destination row holds its own air as padding, and the separators between rows carry none, so a rule spans the whole column and arrives at the seam. What the eye reads is a T-grid, one vertical line with four horizontals dying into it, which is a shape a 404 can carry without a picture and without a colour. Put the padding on the column instead of on the rows, which is the ordinary way to write this, and every rule stops short of the seam by an inch. The section still looks tidy and the idea is gone. The second half of the idea is the scale collision across that seam: a 176px numeral against 17 to 22px destinations and 15 to 16px captions, with nothing in between. The heading that names the error is deliberately one of the small things. ## Why this is not the 404 page `error-404` is the centred mark: one numeral in the middle of the page with the message bounded to the numeral's own optical width, and a button under it. Nothing else is on the page and that is its whole argument. `error-split` argues the other way, that a visitor who is lost wants somewhere to go and reading a name is faster than typing one, so the page is left-aligned throughout, the numeral shares the band with an index, and the way out is four named destinations rather than one button. Take the mark for a site with one obvious home; take the split for a site with sections a visitor might have been looking for. A 404 carrying `core/search` is a third shape and is not this one. ## Mechanics worth knowing - **The seam is a per-side border on a `core/column`.** Written as `{"left":{"color":"currentColor","style":"solid","width":"1px"}}`, which serialises to three inline declarations and no class. It is `currentColor`, so it follows the theme's text colour and cannot resolve to nothing. - **The index column's block gap is zero.** Without that, the theme's default gap opens between every rule and every row and the ruled rhythm becomes a stack of floating items. - **The rules are `core/separator` blocks carrying `is-style-wide`.** Without that class Twenty Twenty-Four narrows a separator to a centred 100px stub, and a rule that does not reach the seam is the one thing this pattern cannot survive. - **The destination links are core buttons with a transparent ground.** They were anchors inside paragraphs until 2026-08-22, which read correctly and could not be tapped: an inline anchor's box is its font box, so line height cannot grow it and the row's padding never reaches it. As buttons they carry their own vertical padding and measure over 44px on a phone, and the row's own top padding was given back to them so the ruled rhythm is unchanged. They now ask for `contrast` on your `base` ground rather than taking your theme's link colour, because a button's ground has to be stated and a button with a stated ground and an inherited link colour is the one pair that can go invisible. Neither version inverts the band for the same reason. - **The size, weight and tracking sit on the `core/buttons` wrapper.** WordPress has moved a button's own typography from the wrapper div to the anchor between versions, so markup carrying it on the button does not stay valid across editor versions. On the wrapper it does, and it cascades to the link. - **The heading is the `h1`, not the numeral.** A 404 template usually supplies the page's only heading, and "Page not found" is what a screen reader should announce; the numeral is a paragraph, because it is a mark rather than a title. - **The columns stack at 782.** At 390 the numeral floors at 80px and the seam becomes a rule down the left of the index, which still reads as deliberate. Nothing here is `isStackedOnMobile: false`: a 58% index of four rows on a phone would be a column of two-word lines. - **Both column paddings are stated as `clamp()`, not as presets.** The row padding has to hold a 44px-tall target at 390 and open up to something editorial at 1400, which no single spacing preset does. ## The variations - **Index first.** The composition turns over: the index takes the left of the band, the seam moves to its right edge, the row rules run into it from the other side, and the numeral column is bottom-aligned so the mark hangs at the foot of the page beside the last rule instead of heading the page. One idea moves, the order of the argument. Colours, sizes and copy are identical to the base. On a phone this one puts the four destinations above the numeral, which is the order a lost visitor wants. - **Oxblood and sand.** A sand ground and oxblood copy give the display numeral an Arial Black face and put a restrained rose accent on the index label. ## What it inherits from your theme - **Typeface.** No font family is stated anywhere, in the base or the variation. - **Palette.** The ground and every piece of text are your `base` and `contrast`, each written as a fallback chain ending on a colour WordPress itself guarantees. No accent slug appears in any rung. The destination links are your theme's link colour, untouched. - **The rules.** The seam and the four row rules name no colour: the seam is `currentColor` and the separators take your theme's separator style. - **Spacing scale.** The band's vertical padding, the gap between the halves when they stack, and the air above the message are core spacing presets. ## What it decides for itself - **The seam and the rules that run into it**, which is the design and the one thing to leave alone. - **The 42/58 split.** Enough room for a 176px numeral on the left without crowding a destination name and its caption on the right. - **Left alignment, everywhere.** No block in either version carries a text alignment, which is the difference between this and the centred mark. - **Proportion.** The numeral at `clamp(5rem, 13vw, 11rem)` on a 0.82 line height with -0.04em tracking; the heading at 15 to 18px with 0.16em tracking; the destinations at 17 to 22px; the message at 16 to 19px and the captions at 15 to 16px, both on a 1.6 line height. ## What you change first 1. **The four destinations.** Each is a group holding a link and a caption, with a separator above it. Copy or delete the pair to change the count; keep the closing separator so the index ends on a rule. Point the `href` at your own pages: they ship as `#`. 2. **The copy in the left column.** The message and the line under it are the two places a site's voice shows on a page nobody meant to visit. 3. **The numeral.** It is a paragraph, so `404` can become `410`, `500`, or the word your team uses. The size is a `clamp()`; the middle number is what changes how much of the band it takes. 4. **The gutter.** `clamp(2rem, 4vw, 4rem)` on the columns sets how far the destinations sit from the seam at desktop; the row padding sets it at every width. ## Contrast Every pair is your `contrast` on your `base` in both versions; neither inverts, for the link reason above. The numeral is large display text, 80px at its smallest, and is claimed at 3:1. Everything else is held to 4.5:1, the destination links included: at 17 to 22px in a medium weight they are not large text by the WCAG definition, whatever they look like beside the numeral. The heading, the message and the captions are body text at 4.5:1 too, which is why the captions floor at 15px rather than sitting on core's 13px `small` preset. The seam and the row rules are structural marks in `currentColor` and carry no text. Measured per host theme by `check:contrast` against the resolved values, not the authored chains. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(5rem, 13vw, 11rem)