Skip to content

Full Website Designs · Risograph Zine

Overprint Zine Fair Website

A loud cultural-event site printed in two riso inks: misregistered hero type that follows the cursor, a halftone program grid, exhibitor list and a ticket strip.

  • Full Site
  • Events
  • Print
  • Editorial

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Overprint Zine Fair Website" React component.

CONCEPT: The website of an independent zine and print fair. Everything should look like it came off a Risograph that needs servicing, on purpose.

LAYOUT & CONTENT:
- Nav: logo 'OVERPRINT' stamped, links Program / Exhibitors / Workshops / Visit, a ticket sticker.
- Hero: 'ZINE FAIR 07' in two overprinted ink layers, halftone circle, dates and venue.
- Program: grid of 6 event cards, each with a halftone color block, time, title and room.
- Exhibitors: a dense three-column list of 24 small presses with their city, in Space Mono.
- Workshop spotlight: big two-ink split block 'Learn to print in 3 hours' with a sign-up button.
- Tickets strip: three perforated ticket stubs (Day, Weekend, Supporter).
- Footer: credits 'Printed on a Riso MZ in Jaffa'.

INTERACTIONS & MOTION:
- Hero ink layers offset toward and away from the pointer (pink +8px, blue −6px) via springs.
- Program cards: on hover the two ink layers of the color block slide apart.
- Ticket stubs tear down slightly (rotate 2°, y 6px) on hover.

DESIGN SYSTEM — Risograph Zine:
- Newsprint #F2EFE4, fluorescent pink #FF48B0, riso blue #0078BF; overlaps in multiply make purple.
- Halftone dots, deliberate 3–6px misregistration, grainy edges, stickers and staples.
- Archivo Black for display, Space Mono for program details.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.

How to use this prompt

  1. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.