Ink that never quite lined up.
Screen-print artefacts as a live rendering layer rather than a picture of one. Grain, halftone, a two-pixel misregistration and a torn paste edge — all of it drawn by the browser, all of it switchable off.
Four artefacts, and what each one is doing.
-
Grain.
A 256-pixel fractal-noise tile, multiplied over the surface at seven per cent. It is the paper, not the ink, and it is the only layer that appears on nearly everything.
One tile, under twenty kilobytes, one request, cached for the whole session.
Paper has texture. Screens do not, and the absence is what makes flat colour look cheap.
-
Misregistration.
A duplicate of the text, offset two pixels, in claret, at eighteen per cent, sitting behind the real glyphs. It is the second plate going down fractionally out of line.
It costs nothing — no image, no filter, one pseudo-element — and it is the single artefact that most reliably reads as print rather than as web.
Nobody notices it. Everybody notices when it is gone.
-
Halftone.
A radial-gradient dot pattern at a five-pixel pitch, multiplied at sixteen per cent. Restricted to heroes, because a halftone over body copy is illegible and over a whole page is a headache.
-
The torn edge.
A fourteen-pixel SVG mask with an irregular path, used where one colour band meets another. A different path per section, so no two tears are the same.
Wheat-paste does not have a straight bottom edge.
The specification, in full.
Grain
- Tile
- 256 × 256 fractal noisefeTurbulence, saturation zero.
- Blend
- multiplyNever overlay on light grounds; it greys them.
- Opacity
- 6–9%Seven is the default. Five in dark mode.
- Weight
- <20KB, one requestInline as a data URI, so it is zero requests in practice.
Misregistration
- Offset
- 2pxThree at display sizes, one below 20px.
- Colour
- claretThe second plate. Always the same one.
- Opacity
- 18%Above 25% it reads as a mistake rather than as print.
- Cost
- FreeOne pseudo-element, no image, no filter.
Halftone
- Pattern
- radial-gradient, 5px pitchDots, not lines.
- Opacity
- 16%Multiply.
- Where
- Heroes onlyNever over body copy.
The torn edge
- Height
- 14pxSVG mask.
- Variants
- One per sectionAbout 4KB each.
- Where
- Band transitionsWhere a colour meets a colour.
The one rule: one texture layer at a time.
Two stacked reads as noise rather than as print, and it costs a frame budget on a mid-range Android that this site does not have to spend. Grain or halftone, never both. The whole engine also disables itself below 480 pixels, under prefers-reduced-motion, and on any device that fails the capability check.
What the whole engine costs.
Why not just use a picture of a print.
Because a picture does not reflow. A baked-in texture at one size is wrong at every other size, wrong on every other aspect ratio, and wrong the moment the copy changes length. A rendering layer is right at all of them.
It is also honest about what it is. This is a website behaving like a print, not a photograph of a print pretending to be a website, and the difference shows up the moment you resize the window.
And it is switchable. A user who has asked for reduced motion, or a phone with two gigabytes of memory, gets flat colour that still looks deliberate — which a baked texture cannot offer.
What people ask.
No. It is one inlined tile, some gradients and two pseudo-elements. The measured cost is under a millisecond a frame on a five-year-old phone.
It turns itself off below 480px, under reduced motion, and on low-capability devices. There is no user-facing switch because there has been no demand for one.
Because it is the warmest colour in the poster palette and it reads as ink rather than as a drop shadow. Petrol looks like a bug.
Roughly. A real misregistration is a whole plate out of line rather than one text layer, and a real halftone is a screen angle rather than a grid of dots. This is the impression, not the process.
Elsewhere on the estate.
/estate/the-beasts/
/seasoning/the-poster-palette/
/lawyering/states/
