Production notes · how this issue was typeset
Guide, for the curious & the copyists
VELLUM is a fiction: issue 09 of a print quarterly about slowness, typeset entirely for the browser. These notes explain the machinery — grid, notes, photo plates, SVG plates and folios — precisely enough to rebuild it.
The concept
Everything imitates offset print: bone stock, black ink, one blood-red spot colour, and writing dense enough to feel bought at a newsstand. The aim is not nostalgia, but the discipline of a slow magazine made interactive without becoming glossy. Two generated photographs act as commissioned editorial plates; the remaining visuals are inline SVG, CSS, or typographic furniture.
Generated photo plates
Pass 3 integrates /assets/gen/vellum/valley.jpg and /assets/gen/vellum/hands.jpg as first-class art. The workflow is: make a still with GPT Image 2 through Higgsfield, animate that still with Kling 3.0 when a loop is needed, then store the final media locally under /assets/gen/vellum/. This issue uses the stills directly. In styles.css, .photo-plate holds a fixed-aspect frame, the real <img>, and a red .photo-underprint that slides into register on the existing reveal observer.
The asymmetric spread grid
The signature is .spread in styles.css: a real twelve-track CSS grid with named lines for hang, text, gutter, and margin. Body copy sits on six text columns at a 62-character measure with hyphens:auto. Headlines cross from hang-start to margin-end; opener facts and sidenotes occupy the outer margin; pull quotes invade the left hang. Below 1100px the margin folds into red-ruled insets instead of disappearing.
Print-registration illustrations
Each figure stores line art once in SVG <defs>, then stamps it four times with <use>: cyan, magenta, yellow, key. Custom properties recolour strokes and spot fills. In main.js, setupRegistration() observes each .plates figure; when it enters, translated CMY layers slide into register, fade, and leave the black key plate. settleCover() performs the masthead version on load, helped by a red press-pass animation.
The folio machine
setupFolio() reads each section’s data-folio and data-section, then writes the current page into the fixed running head as you scroll. setupReveals() staggers prose furniture near the viewport, while reduced-motion users get the finished sheet immediately. Drop caps are pure CSS: .dropcap::first-letter, Gloock, four lines deep, red.
Tokens
| Token | Value | Duty |
|---|---|---|
| bone | #f5f1e8 | paper |
| ink | #191713 | text, rules |
| blood red | #a31621 | the only accent |
| Gloock 400 | display | headlines, drop caps, numerals |
| Spectral 300–400 + italic | text | body at 62ch, standfirsts |
| Zilla Slab 400–600 | slab | folios, kickers, captions, sidenotes |
Reproduce this
A prompt that would get you most of the way
“Build a fictional print magazine issue in pure HTML/CSS/JS. Use a twelve-column editorial grid with hang, 62ch text, gutter, and outer-note columns. Write three 350+ word features with standfirsts, bylines, 4-line drop caps, pull quotes, footnotes, a numerical index, and a colophon. Use bone paper, black ink, one red spot colour, self-hosted serif/slab fonts, two local generated photo plates treated like print proofs, inline SVG line art duplicated into CMYK plates, and an IntersectionObserver folio bar. Honour prefers-reduced-motion.”
Then edit like a production desk: no lorem ipsum, no blank cards, no centered default wrapper. The grid only reads as a magazine when there is a magazine’s worth of writing on it.