Colophon · How it was printed

Ink, grain, misregister

Quoin & Furniture is a fictional Fremantle job-and-poster shop rebuilt as a working press in the browser. Its audience is anyone who has ever wanted to pull a lever and watch a poster appear. The page has one job: let you compose in wood type, lock the chase, and make a print that is honestly, texturally yours — right down to the sheet coming out a little crooked.

№1 The palette

Four inks, argued from the shop and not from taste. Nothing here is decorative — each colour is a material you'd find on the stone or in the case.

#1B1917

Shop black

The press bed and the dark of the room. Everything else sits on it, the way type sits on the stone.

#EFE6D2

Cotton cream

The stock. It is the actual product — warm, slightly uneven, the colour of the thing leaving the press.

#C7361F

Ink red

The second pass. Rationed the way a real shop rations vermilion, and set deliberately out of register.

#C09A52

Brass

Quoins, gauge pins, the lever handle. The only bright metal, reserved for the things your hand touches.

№2 The type

Three display faces stand in for a wood-type case — a grotesque for shouting, a fat slab for selling, a spurred Tuscan for the circus — over one quiet serif that does all the talking.

Grotesque

Bricolage Grotesque — the house grotesque (“No. 9”) and the interface face. Wide, blunt, and confident; it also sets every control label, so the shop and its instruments share one voice.

Antique

Alfa Slab One — the fat 19th-century advertising slab (“Antique No. 4”). All weight, no apology; it’s what a poster reaches for when it wants to sell.

Ornamented

Rye — the spurred Tuscan (“Ornamented”) kept for one red word. It’s the circus poster in the stack, and the reason the hero says Pull. in a different face than it says anything else.

Set the rest in a quiet hand.

Lora — the body serif. Everything the shop actually says — bed labels, house rules, this page — is set in it, italic where the printer would murmur.

№3 The techniques

No images, no 3D, no libraries — just two canvas 2D layers, a lot of procedural noise, and CSS for the entrance and the lever. The paper and the ink are generated from scratch every time you lock up.

Generated live in your browser: cream fibre, long-fibre flecks, and a two-octave ink grain thresholded by the inking amount.

The paper

An off-screen canvas is filled with cream, then walked pixel by pixel to add fibre noise, over-drawn with a hundred-odd short strokes for long fibres, darkened at the edges, and marked with four pencil register crosses. It’s baked once per sheet and reused as the backdrop for both the press and the drying line.

The ink

Each ink pass is drawn solid, then a noise mask — coarse blotch plus fine grain, thresholded against the inking slider — is composited destination-in so ink only survives where the texture allows. The result is multiplied onto the paper, with a debossed impression (a light copy and a dark copy, offset a point or two) faked underneath so the type sits in the sheet rather than on it.

The signature: the pull

The lever is the whole point. On lock-up the press bakes a fixed drift — a random offset, a fraction of a degree of rotation, and a separate red-pass misregistration — so this sheet already has its own flaws before you touch it. Dragging the lever (or holding the down-arrow) advances a reveal that clips the printed sheet downward while the carriage tracks with it; a small per-pull jitter is added on top of the baked drift, so no two sheets land the same. Reach the bottom and it commits as a good pull; stop short and the cylinder never finishes its travel — the sheet comes out stamped SHY PULL and goes on the line with the make-ready. One pull in twelve, the devil leaves a brass fleuron in the corner.

Everything else

The chase renders the type mirrored, packed with procedural wood furniture and steel quoins that visibly tighten when you lock.
The entrance is a CSS stamp keyframe, staggered per line and gated on document.fonts.ready so nothing prints before the wood type has loaded.
Canvases cap device-pixel-ratio at 2, resize with the layout, and only redraw on demand — no idle animation loop to throttle.

№4 The iteration log

Built, then combed three times. What each pass actually found and changed:

P1 Craft

The drying-line scroller fell back to the browser’s default grey scrollbar, which read as a foreign object against the warm palette. Gave it a brass thumb on a transparent track (both WebKit and Firefox) so the one scrolling region matches the shop.

P2 Depth

A locked press with a fresh sheet gave no hint that the lever was the thing to touch. Added an “armed” state: while a sheet waits on the pins the brass handle breathes a slow halo, and it lifts on hover — the invitation switches off the instant you begin to pull and comes back only with a fresh sheet. It’s the second-read tell that ties the whole interaction together.

P3 Hardening

Re-checked 375px (no overflow), confirmed the new halo is killed under prefers-reduced-motion, and applied the Chanel rule to the spoiled-sheet routine — it was allocating a texture canvas it threw away and setting a composite mode one line before a restore() wiped it. Both removed; the “SHY PULL” stamp is unchanged and one less canvas is built per spoiled pull.