Design for AI

Zine / collage: UI design prompt

Palette, type rules and a pasteable prompt for zine / collage. Also called zine design, punk collage, cut-and-paste web, DIY aesthetic, xerox style, riso style. 1970s punk zines, 1990s riot grrrl; web usage 2017 onward (music, fashion, indie publishing).

Traits

  • cut-out images with rough white edges, torn paper, photocopy grain
  • ransom-note typography: mixed fonts, sizes and cases inside one headline
  • tape, staples, stickers, stamps, handwritten notes on top of print
  • high-contrast black and white with one or two riso inks (fluorescent pink, blue, orange)
  • layout ignores the grid: overlapping, rotated, stacked
  • halftone dots and misregistered colour layers
  • motion: hover reveals, image swaps, slight jitter; nothing smooth

Palette

#f1efe7 paper, #111111 ink, #ff48b0 riso pink, #0078bf riso blue, #ff6c2f riso orange, #ffe800 riso yellow

Type

Anton or Bebas Neue (condensed caps), Special Elite or Courier Prime (typewriter), Permanent Marker or Rock Salt (marker), Oswald; mix at least three in headlines; body in Courier Prime 16px

Do

  • give every image a rough cut-out edge: clip-path polygon with 10-14 uneven points, plus a 4-6px white border
  • misregister colour layers: duplicate a headline in riso pink, offset 3px, mix-blend-mode multiply
  • keep a hidden grid underneath so the collage still aligns to something

Don't

  • do not clean it up; perfect alignment kills it
  • do not use more than two riso inks per page
  • do not use subtle greys; black, paper and ink only

Known for it: Riot grrrl zines, Sniffin' Glue, Sub Pop era posters, Nowness (partial), Rough Trade

CSS seed
:root {
  --bg: #f1efe7;
   --fg: #111111;
   --accent: #ff48b0;
   --accent2: #0078bf;
   --radius: 0;
   --tape: rgba(255,255,255,0.55);
   --grain: 0.12;
   --font: 'Anton',sans-serif;
   --font-type: 'Courier Prime',monospace
}
Prompt

Build the site as a punk zine collage. Paper #f1efe7 with a photocopy grain overlay (SVG feTurbulence at opacity 0.12, mix-blend-mode multiply), ink #111111, two riso inks only: pink #ff48b0 and blue #0078bf. Headlines mix Anton at 96px caps, Special Elite at 40px and Permanent Marker at 56px within the same line, words rotated between -4deg and 5deg; body in Courier Prime 16px. Duplicate each headline in #ff48b0, offset 3px left and 2px down, mix-blend-mode multiply, for misregistration. Images are black-and-white with a halftone effect (radial-gradient dot pattern overlay at 4px), cut out with clip-path polygon (12 uneven points) and a 5px white border, rotated slightly, overlapping each other and the text. Add tape strips (rgba(255,255,255,0.55) rectangles, rotated) and a rubber stamp badge in #0078bf. Buttons are black rectangles with white Anton text and a torn bottom edge. No radius, no shadows, no smooth easing; hover swaps images instantly.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site as a punk zine collage. Paper #f1efe7 with a photocopy grain overlay (SVG feTurbulence at opacity 0.12, mix-blend-mode multiply), ink #111111, two riso inks only: pink #ff48b0 and blue #0078bf. Headlines mix Anton at 96px caps, Special Elite at 40px and Permanent Marker at 56px within the same line, words rotated between -4deg and 5deg; body in Courier Prime 16px. Duplicate each headline in #ff48b0, offset 3px left and 2px down, mix-blend-mode multiply, for misregistration. Images are black-and-white with a halftone effect (radial-gradient dot pattern overlay at 4px), cut out with clip-path polygon (12 uneven points) and a 5px white border, rotated slightly, overlapping each other and the text. Add tape strips (rgba(255,255,255,0.55) rectangles, rotated) and a rubber stamp badge in #0078bf. Buttons are black rectangles with white Anton text and a torn bottom edge. No radius, no shadows, no smooth easing; hover swaps images instantly.

## Tokens
:root { --bg:#f1efe7; --fg:#111111; --accent:#ff48b0; --accent2:#0078bf; --radius:0; --tape:rgba(255,255,255,0.55); --grain:0.12; --font:'Anton',sans-serif; --font-type:'Courier Prime',monospace }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.