# Risograph Print
리소그래프 인쇄의 미감을 웹으로 — 형광 핑크·코발트·머스터드 스폿 잉크가 1~4px 어긋나고, 망점과 그레인이 종이빛 화면을 덮는다.
- taxonomy: risograph · risograph, print-texture, spot-color, misregistration, halftone, grain, overprint, chunky-display · complexity=high
- page types: landing, portfolio, editorial, marketing
- best for: 포스터형 이벤트·전시 랜딩, 진(zine)·인디 출판·음악 레이블 사이트, 개성이 최우선인 포트폴리오, 굿즈·소량 인쇄물 브랜드 페이지
- avoid for: 데이터 밀도가 높은 대시보드·관리자 화면, 신뢰가 핵심인 금융·의료 서비스, 장문 독서용 문서 사이트, 저사양 기기 대상 서비스(블렌드·텍스처 비용)
- provenance: authored (design-diversity 팩 'web-risograph-print' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Risograph Print — theme.css (generated, do not edit) */
:root {
--radius: 2px;
--radius-selector: 2px;
--radius-field: 2px;
--font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Space Mono', 'Courier New', monospace;
--font-display: 'Archivo Black', 'Anton', 'Archivo', sans-serif;
--spacing: 8px;
--shadow: 3px 3px 0px 0px color-mix(in oklab, oklch(0.486 0.233 266.8) 90%, transparent);
--ks-display-weight: 900;
--ks-display-tracking: -0.02em;
--background: oklch(0.950 0.017 88.0);
--foreground: oklch(0.210 0.008 84.6);
--card: oklch(0.965 0.014 88.0);
--card-foreground: oklch(0.210 0.008 84.6);
--popover: oklch(0.965 0.014 88.0);
--popover-foreground: oklch(0.210 0.008 84.6);
--primary: oklch(0.686 0.218 3.1);
--primary-foreground: oklch(0.950 0.017 88.0);
--secondary: oklch(0.806 0.162 82.8);
--secondary-foreground: oklch(0.210 0.008 84.6);
--muted: oklch(0.905 0.020 88.0);
--muted-foreground: oklch(0.45 0.012 85.0);
--accent: oklch(0.486 0.233 266.8);
--accent-foreground: oklch(0.950 0.017 88.0);
--destructive: oklch(0.686 0.218 3.1);
--destructive-foreground: oklch(0.950 0.017 88.0);
--border: oklch(0.210 0.008 84.6);
--input: oklch(0.210 0.008 84.6);
--ring: oklch(0.486 0.233 266.8);
--chart-1: oklch(0.686 0.218 3.1);
--chart-2: oklch(0.486 0.233 266.8);
--chart-3: oklch(0.806 0.162 82.8);
--chart-4: oklch(0.306 0.160 278.8);
--chart-5: oklch(0.210 0.008 84.6);
}
.dark {
--background: oklch(0.185 0.008 85.0);
--foreground: oklch(0.950 0.017 88.0);
--card: oklch(0.225 0.010 85.0);
--card-foreground: oklch(0.950 0.017 88.0);
--popover: oklch(0.225 0.010 85.0);
--popover-foreground: oklch(0.950 0.017 88.0);
--primary: oklch(0.72 0.205 3.1);
--primary-foreground: oklch(0.185 0.008 85.0);
--secondary: oklch(0.82 0.150 82.8);
--secondary-foreground: oklch(0.185 0.008 85.0);
--muted: oklch(0.26 0.010 85.0);
--muted-foreground: oklch(0.72 0.016 87.0);
--accent: oklch(0.62 0.190 266.8);
--accent-foreground: oklch(0.185 0.008 85.0);
--destructive: oklch(0.72 0.205 3.1);
--destructive-foreground: oklch(0.185 0.008 85.0);
--border: oklch(0.36 0.012 85.0);
--input: oklch(0.36 0.012 85.0);
--ring: oklch(0.62 0.190 266.8);
--chart-1: oklch(0.72 0.205 3.1);
--chart-2: oklch(0.62 0.190 266.8);
--chart-3: oklch(0.82 0.150 82.8);
--chart-4: oklch(0.46 0.160 278.8);
--chart-5: oklch(0.950 0.017 88.0);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
RISO/PRESSZine — No. 07
Printed wrong, on purpose.
Two inks, one drum pass each. Where pink meets cobalt, the overprint blooms — that purple is not a bug.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/risograph-print.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `