COLOPHON · THE BACK PAGE OF THE ZINE

Colophon

How this zine was pasted

everything you need to counterfeit this exact mess, deliberately

FULL DISCLOSURE

01 The Concept

PASTEUP treats a marketing agency's story like a risograph fanzine spread: every claim is a paper scrap, every promise gets a rubber stamp, and the whole thing looks like it was glued down at 2 a.m. — but isn't. Underneath the chaos sits a strict 12-column Swiss grid. Rotations never exceed ±4°. Whitespace is generous. Chaos is the flavor; the grid is the spine.

The subject is Nomadic Owls — "Obsessively Curious", full-stack development, digital marketing, and technical SEO — rendered as if the agency photocopied itself into a zine and mailed it to the Internet.

02 Design System

Riso inks — two drums, one paper

  • #F5EFE3 warm paper
  • #FF48B0 fluoro pink
  • #00838A riso teal
  • pink × teal, multiplied = overprint

Real risograph printing lays each ink down in a separate pass, and where fluoro pink crosses teal the inks physically multiply into a dark plum. Here that's mix-blend-mode: multiply — every two-ink headline is the teal layer plus an absolutely-positioned pink duplicate multiplied on top.

Type — three voices

Anton is the condensed poster shout (headlines, all caps). Caveat is the marker-pen annotation scribbled in the margins. Courier Prime is the typewriter that filled in every label, description, and this very colophon. All three self-hosted via @fontsource — no CDN calls.

The hidden grid

Every section is a grid-template-columns: repeat(12, 1fr) container, max 1240px. Scraps snap to columns first, then get a ±1–4° rotation and a small offset. Torn SVG edges divide sections; halftone dot fields (CSS radial-gradient) and an SVG-turbulence paper grain keep the print texture alive at every scale.

03 Tech & Motion

Stack. Astro 5, static output, hand-written CSS, one vanilla JS module. No frameworks, no runtime dependencies.

The overprint trick. Two-ink headlines start misregistered — the pink pass offset 3px from the teal, exactly like a riso drum slipping. A scroll listener watches the hero; once you scroll past a threshold the pink layer snaps into register with a springy cubic-bezier. With prefers-reduced-motion, everything ships pre-registered.

Stamp mechanics. Rubber stamps ("SENT ✓", "APPROVED") are IntersectionObserver targets. Entering the viewport adds a class that fires a 320ms thunk: scale 2.3 → 0.94 → 1 with an overshooting bezier, plus an SVG-turbulence mask so the ink looks unevenly pressed. Hovering a flyer re-slams its stamp.

Drag system. The stickers are Pointer Events draggables: setPointerCapture, live velocity sampling, and a decaying inertia loop (×0.92 per frame) on release. Grabbing shuffles z-index. They're keyboard-operable too — focus one and nudge it with arrow keys, Home resets, and a "reset stickers" button undoes the whole mess. Focus is never trapped; reduced-motion keeps drag but drops inertia.

Paper trail. Clicking bare paper drops a tiny pink/teal paper bit where you clicked — max five live at once, oldest fades first.

04 AI Assets

All eleven cutouts come from two sheets generated with the Higgsfield CLI using GPT Image 2 (quality high, 2K, aspect 4:3). The exact prompts, verbatim:

SHEET 1 · pasteup-cutouts-1 — owl, phone, computer, boarding pass, stamp
Flat-lay sheet of separate paper collage cutouts with thick white sticker borders, each isolated on a plain warm paper background with space between: a photo cutout of a barn owl, a retro rotary telephone, a vintage CRT computer, a paper boarding pass, a postage stamp — risograph zine aesthetic, slightly grainy print texture, no text, no letters, no watermark
SHEET 2 · pasteup-cutouts-2 — plane, envelope, magnifier, lightning, scissors, cassette
Flat-lay sheet of separate paper collage cutouts with thick white sticker borders, each isolated on a plain warm paper background with space between: a paper airplane, an airmail envelope, a magnifying glass, a lightning bolt shape cut from pink paper, scissors, a cassette tape — risograph zine aesthetic, slightly grainy print texture, no text, no letters, no watermark
  • Barn owl cutout
  • Rotary phone cutout
  • CRT computer cutout
  • Boarding pass cutout
  • Postage stamp cutout
  • Paper airplane cutout
  • Airmail envelope cutout
  • Magnifying glass cutout
  • Pink lightning bolt cutout
  • Scissors cutout
  • Cassette tape cutout

CLI flow. Each prompt ran once through higgsfield generate --model gpt_image_2 --aspect-ratio 4:3 --quality high, asking for objects "each isolated with space between" and "thick white sticker borders" so they could be cut apart programmatically.

Cropping. A Node + sharp script cuts the sheets into die-cut stickers: sample the paper color from each crop's border ring (median), flood-fill background from the edges so enclosed cream faces survive, peel drop-shadows (darker-than-paper pixels with matching chroma), keep the largest connected component to drop neighboring slivers, feather the alpha 1px, and export ≤800px WebP with transparency. Eleven stickers, zero manual masking.

05 How to Reproduce

  1. Scaffold Astro 5 (static). Add @fontsource/anton, @fontsource/caveat, @fontsource/courier-prime.
  2. Generate the two cutout sheets with the prompts above; crop them with the flood-fill sharp pipeline into transparent WebP stickers.
  3. Set the three tokens — paper #F5EFE3, pink #FF48B0, teal #00838A — and forbid every other hue.
  4. Build every headline twice: teal base + pink duplicate, mix-blend-mode: multiply, offset by a --misreg custom property that collapses to 0 on scroll.
  5. Lay each section on a 12-column grid, then rotate scraps ±1–4°. Never more. The restraint is the trick.
  6. Stamps via IntersectionObserver + an overshoot bezier; stickers via Pointer Events + inertia; torn edges via seeded-random SVG paths.
  7. Honor prefers-reduced-motion: pre-stamp the stamps, pre-register the inks, keep drag but drop inertia.