# Risograph Print

## Overview
Risograph (stencil-duplicator) printing translated to the web. Two or three fluorescent spot inks sit on a recycled-paper background, deliberately misregistered by 1–4px, layered with `mix-blend-mode: multiply` so overlaps breed a third color. Every color surface carries halftone dots and an `feTurbulence` grain at opacity 0.12. The style's identity is the imperfection: if the halftone, the grain, and the misregistration are all present, it reads as riso; remove any one and it collapses into generic flat color blocks.

## Colors & Roles
Canonical mode is **light** — paper `background` (warm off-white, oklch ~0.95/0.017/88, from `#f3eee2`) and ink-black `foreground` (`#1a1814`). The three spot inks map to semantic roles: fluorescent pink `primary` (`#ff4d8d`), cobalt blue `accent` (`#2647e0`), mustard yellow `secondary` (`#f2b417`). `border`/`input` are ink black — rules are printed, 2px, chunky. `ring` is cobalt. Where pink and cobalt overlap under multiply, a purple overprint appears (~`#26157c`, kept as `chart-4`); this is intentional and allowed. Text on ink surfaces is paper-colored, never white. **Use at most 2–3 inks per screen.** Dark mode is a non-canonical adaptation — "black paper stock" with the same three ink hues lightened just enough for contrast, so the fluorescent glow survives (arguably intensifies) on the dark ground.

## Typography Rules
Display is Archivo Black 900 (Google Fonts; Anton as alternate) at `clamp(2.4rem, 6vw, 4.6rem)`, line-height 1.05, letter-spacing −0.02em — ink-heavy poster type. Headlines take a two-color channel-split `text-shadow` (`2px 2px 0 cobalt, -1px -1px 0 pink`), simulating separated print plates. Labels are Archivo 700 uppercase at 0.78rem with 0.08em tracking. Body is Archivo 400 at 1.05rem, line-height 1.6, measure 60–70 characters. One family, extreme weight contrast (400 vs 900).

## Layout Principles
Max content width 1140px; 12-column grid with 24px gutters; side padding 20px mobile / 44px desktop; breakpoints at 640px and 1024px. Composition is a **block-grid**: a mosaic of solid ink-colored blocks and paper-colored blocks locking together, separated by halftone texture and offset layers rather than borders. Section rhythm `clamp(72px, 9vw, 120px)`; section boundaries are ink-plane changes or a misregistered 1px ink line.

## Depth & Elevation
No blur shadows, ever. Depth = misregistration: duplicate an element's silhouette in another ink color and offset it 1–4px (hard edge, zero blur). On hover the offset drifts to 5px, exaggerating the channel split. Ink unevenness is allowed via opacity 0.92 or a 0.3px blur on color-plane edges — the ink soaking unevenly into paper.

## Shapes
Radius 2px everywhere — near-square, like trimmed print stock. Color blocks carry no border (texture and offset do the separating); when a rule is needed it is `2px solid` ink black. Crop-mark (print registration) accents at block corners are a signature garnish.

## Component Stylings
- **Button**: solid ink plane + halftone overlay + paper-colored uppercase label text, radius 2px, no border, padding 12px 24px. Behind it, a second ink-colored offset layer; hover widens the offset to 5px and may swap ink colors. Focus = 2px cobalt (`ring`) outline. Disabled = opacity 0.5, halftone removed.
- **Card**: solid ink or paper block, borderless, halftone-toned with grain; small crop marks in the corners; hover shifts the offset layer. Padding 24–32px.
- **Input**: paper background, 2px ink-black full border, radius 2px; focus swaps the border to cobalt with a 1px misregistered pink line.
- **Nav**: paper background with a 2px ink bottom rule shadowed by a misregistered 1px pink line; chunky logo left, uppercase Archivo label links right.
- **Images**: `grayscale(1)` then a single-ink `multiply` duotone with halftone overlay — never raw full-color photos.

## Motion
Snappy, print-like: 140ms base with `cubic-bezier(0.2, 0, 0, 1)`, or stepped `steps(2)` transitions. Hover = offset layers drift 1px → 5px; entrance = color layers translate in from different directions and "register" into alignment over ~180ms. No parallax, no long fades — motion is short and crisp.

## Do's and Don'ts
**Do:** texture every color plane (halftone dots 4–6px gap, grain opacity 0.12); misregister color layers 1–4px; let multiply overlaps create the purple overprint; channel-split headline shadows; cap inks at 2–3 per screen.
**Don't:** use purple or soft gradients (tone comes from halftone only); omit any of grain/halftone/misregistration; use soft blur box-shadows; exceed 3 inks per screen; use radius > 4px; use emoji, glossy 3D, or glass.

## Responsive Behavior
The block-grid mosaic stacks to fewer columns below 1024px and single column below 640px; display type tracks via `clamp()`. Keep misregistration offsets at the same pixel values across breakpoints (they are print artifacts, not layout). Side padding drops from 44px to 20px on mobile.

## Agent Prompt Guide
> Build this in the 'Risograph Print' style: recycled-paper background with feTurbulence grain at opacity 0.12, 2–3 fluorescent spot inks (pink primary, cobalt accent, mustard secondary) layered with mix-blend-mode: multiply, deliberate 1–4px misregistration offsets instead of blur shadows, halftone dot patterns on every color block, chunky Archivo Black 900 display type with a two-color channel-split text-shadow, 2px corners, 2px ink-black rules with crop-mark accents, and snappy 140–180ms motion.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-risograph-print` — an authored spec, not measured from a live site, so all confidence fields are `manual`. The pack's own sources are trend articles (source confidence low per its risk notes); the numeric texture recipe (grain 0.12, dot gap 4–6px, offsets 1–4px) is the pack's curated directive. Dark mode is my adaptation (black-paper concept), not part of the original pack; the purple overprint chart color is computed (per-channel multiply of the two canonical inks), not specified directly.