[Library] 404

Catalogue accessStandard

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.

Variation View
Before you copy
Open in a new window

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

A 404 page in two halves. The numeral is set at up to 176px on one side. On the other, a ruled index of four destinations, each a link with one line saying what is there. Between them runs a single currentColor hairline, the seam, and every rule in the index runs into it. Everything on the page is left-aligned, from the tracked heading to the last caption, and there is no search field: the page offers named places rather than a box to type in.

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.

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.
Why this is not the 404 page128 words

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 knowing423 words
  • 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 6.6 serialises a button's own typography onto the wrapper div and 7.0 onto the anchor, so no single markup carrying it on the button is valid at both matrix entries. On the wrapper it is identical at both and 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 variations94 words
  • 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.
Contrast125 words

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 type18 words

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

  • paragraph at clamp(5rem, 13vw, 11rem)
Back to the library

Continue exploring

Next in 404

Explore all 3 404 patterns