Hub
RISOGRAPH PRINT — 2-COLOR SEPARATION
Print 042 / 500

Risograph Print

Soy-based inks, limited spot colors, and the beautiful imperfections of misregistered layers. Each print is unique — slight offsets and halftone grain give risograph its unmistakable tactile charm.

Print Proof — Color Separation Layers
Layer 1
Red Ink Only
Layer 2
Teal Ink Only
Layer 3
Combined + Overprint
Risograph Geometric Forms — Halftone & Solid Fills
Ink Drums — Color Swatch Palette
Ink 1 — Coral Red
#ff6b6b
Ink 2 — Teal
#4ecdc4
Overprint
#8b5e3c
Paper
#ede6d6
Typography Specimen — Limited Color Palette
Space Grotesk 700

Risograph printing uses a stencil-based process where each ink color requires a separate master and pass through the machine. The result is a tactile, textured print with visible halftone patterns and slight color misalignment between layers.

Space Mono 400 — ABCDEFGHIJKLMNOPQRSTUVWXYZ — 0123456789
Beautiful Imperfection
Each print is one of a kind
Ed. 042 / 500
Design Principles — Risograph Aesthetic
01
Limited Palette
Use only 2-3 spot colors. New hues emerge from overprinting, not from adding more inks.
02
Misregistration
Embrace the slight offset between color layers. 1-2px shifts create authentic analog character.
03
Halftone Texture
Dot patterns replace smooth gradients. Use CSS radial-gradient to simulate halftone screens.
04
Paper + Ink Bleed
Warm cream backgrounds evoke uncoated paper. Soft box-shadow and blur mimic ink bleeding at edges.
END OF PROOF — APPROVED FOR PRINT RUN

AI Request Prompt

Design a landing page in Risograph Print style — soy-based ink aesthetic with limited spot colors on warm cream paper.

COLOR TOKENS:
--bg: #f5f0e8 (warm cream paper)
--ink-1: #ff6b6b (risograph coral red — primary ink)
--ink-2: #4ecdc4 (risograph teal — secondary ink)
--ink-3: #2c3e50 (dark navy — text/borders)
--overprint: #8b5e3c (red + teal overlap = brown)
--paper: #ede6d6 (slightly darker paper for cards)
No other colors. New hues come only from overprint blending.

TYPOGRAPHY:
Display: "Space Grotesk" sans-serif, 700 weight, tracking -0.03em
Body/Details: "Space Mono" monospace, 400 weight
Scale: 12 / 14 / 16 / 20 / 28 / 56 / 88px (clamp(2.4rem, 7vw, 5.5rem))
Body line-height: 1.7–1.8
Display line-height: 1.05

UI:
- Cards/sections: 2px solid var(--ink-3), border-radius 4px (sharp, printerly)
- Misregistration effect on headlines: duplicate text layers in ink-1 and ink-2 with 1-2px translate offset, opacity 0.7, mix-blend-mode: multiply
- Halftone dot backgrounds using CSS radial-gradient (0.5-1.5px dots, 4-8px spacing)
- Ink bleed effects: box-shadow and blurred ::after pseudo-elements at shape edges
- Registration crosshair marks with circles at page edges
- Print edition numbering ("Print 042 / 500")
- Color separation proof showing individual ink layers and combined overprint

LAYOUT:
- Container: min(1080px, 92vw) centered, padding 28px 20px 80px
- Hero padding: clamp(28px, 5vw, 56px) with halftone corner accent
- 3-column print proof grid, 4-column swatch grid
- Principle cards: auto-fit grid, minmax(240px, 1fr), gap 12px

TEXTURE:
- SVG feTurbulence paper grain: fixed, inset 0, opacity 0.06, baseFrequency 0.85, numOctaves 4, 256px repeat
- Halftone dot overlay on fixed background: radial-gradient dots, opacity 0.06
- Grain texture on typography specimens via dot pattern overlay
- Geometric shapes with solid and halftone fills to demonstrate ink coverage

MOTION:
- Card/element entrance: translateY(12px) to 0, opacity 0 to 1, 0.6s ease, stagger 0.1s
- Button hover: background rgba(255, 107, 107, 0.12), all 0.25s ease
- No smooth gradients — all texture comes from dots and grain

RESPONSIVE:
- Below 768px: print proof layers stack to single column, swatches to 2-column, shapes wrap tighter
- Above 768px: full grid layouts, generous padding

FORBIDDEN:
- No smooth gradients (use halftone dots instead)
- No drop shadows (use ink bleed blur only)
- No rounded corners above 4px (sharp printerly aesthetic)
- No more than 3 ink colors + overprint
- No photographic images — all visual interest from shapes, dots, and color

OUTPUT:
1. Single HTML file with inline CSS
2. Paper texture using SVG feTurbulence in body::after
3. Misregistered headline with offset color layers
4. Print proof section with color separation layers
5. Geometric shape showcase with halftone and solid fills
6. Color swatch palette, typography specimen, poster composition
7. Design principle cards with halftone backgrounds and misregistered borders