Build a comparison landing page that sets two editions of one product side by side. Treat the page as a bookbinder's specimen catalogue. Page archetype: comparison or "X vs Y" landing page, expressive print register, dark cool ground.
Ground and palette: a deep indigo field (#151A2E) carrying a single fixed marbled-ink wash at about 13 percent opacity, covering the viewport so it never tiles or seams. Cream paper panels (#EFE7D5) with ink at #1B2036 for anything that must be read at length. One accent only, chrome yellow #E9B21F, used for filled labels, graphic marks, and italic display lines, never as small text on cream. Cool slate #9BA4C2 for secondary text on the indigo. Every ink mark drawn in CSS gets a hard 3px offset copy in the yellow behind it, no blur, so the page looks screenprinted slightly out of register.
Type: a decorative flared display serif (Yeseva One) for the nameplate, headline, section heads, and row titles; a plain grotesque (Instrument Sans) for body at 19px and line-height 1.72; a monospace (Space Mono) for labels, axis values, and metadata only. Body copy never goes below 18px and is never justified. Measure stays between 60 and 75 characters.
Masthead: fold the nameplate into the hero. A cream strip across the top of the hero holds the wordmark in the display face on the left and issue metadata in uppercase mono on the right, and directly beneath it runs a 26px band of the marbled image repeated on x at full height, like the marbled fore-edge of a closed book. No boxed grid of meta cells.
The comparison spine is the signature. One cream panel holds a stack of rows, each row a three column grid: a 230px label column tinted one step darker, then two equal content columns for the two editions. A single hairline separates rows and a second one runs between the two edition columns, so the whole block reads as one spine rather than two cards. The header row names each edition in the display face with an uppercase mono subtitle. Where a row compares a difference of degree, draw it instead of writing it: on one side a flex row of four solid vertical bars at 3, 6, 11 and 19px wide sitting on a shared baseline, on the other a single wedge clipped with polygon(0 45%, 100% 3%, 100% 97%, 0 55%), both in ink with the yellow offset behind. Caption each with one line of uppercase mono. Under 940px the label column spans the full width and the two editions sit side by side beneath it.
Section markers are shelf labels, not filters. Each section opens with a hairline rule across the content column and a solid chrome yellow tag with uppercase mono in near black, pulled up so it straddles the rule like a tag on a shelf edge. The tag is a label and nothing else: no hover state, no active variant, no fake filtering. Sections: Tooling, Technique, Workflow, Design Move, Prompt Lab, Field Note, Sources.
Items inside a section are a two column grid, a 220px title column holding the row title and a small uppercase mono source line, and a wide body column capped at 70 characters. Under 940px the two columns stack.
Images: contained plates only, one wide diagram and one square detail crop, both screenprinted on cream with indigo ink and a chrome yellow underprint. Give each a mono caption naming it as a plate. Never put readable text inside a generated image.
Guardrails: body 19px and line-height at least 1.7; contrast at WCAG AA against the actual rendered surface, which means yellow only on the indigo or as a filled block with dark text, never yellow type on cream; radii stay at 2 to 3px throughout because these are sheets of paper, with nothing pill shaped; one restrained motion only, links that increase their underline offset and thickness on hover and focus over about 160ms, wrapped in a prefers-reduced-motion guard; real focus-visible outlines in the accent; no glow, no gradient text, no neon on dark, no left border stripe on callouts, no fake toggles or search fields, and no container taller than the content inside it.
Works in Beaver Builder AI, Figma Make, Lovable, Cursor, and Claude Code.
