Risograph Print

---
name: risograph-print
description: Apply the Risograph Print visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Risograph Print, mentions riso, riso print, risograph, or describes fluoro spot-ink palette, overprint multiply blends, visible ink grain — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Risograph Print Design System

Limited-ink duotone printing with soy-ink grain and charming misregistration: fluoro pink, medium blue, and sunflower yellow layered on warm cream paper, with overlaps blending in multiply like real overprinted spot inks. Flat shapes, bold type, poster energy.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Risograph Print.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (riso, riso print, risograph, duotone print, overprint poster), or describes its traits: fluoro spot-ink palette; overprint multiply blends; visible ink grain; slight layer misregistration; flat layered shapes; poster-scale composition.

## Design tokens

### Color palette

- Warm cream uncoated-paper background: `#fdf6e3` (--color-bg)
- Near-black ink for body text: `#1d1d1b` (--color-text)
- Riso fluorescent pink — the signature ink; display and decorative use: `#ff48b0` (--color-accent)
- Riso medium blue ink; links and interactive elements: `#0078bf` (--color-accent-blue)
- Riso yellow ink; fills and highlights only: `#ffe800` (--color-accent-yellow)
- Pink-over-blue multiply blend for overlap zones: `#59309e` (--color-overprint-violet)
- Pink-over-yellow multiply blend: `#ff8a3d` (--color-overprint-orange)
- Slightly deeper cream for panels: `#f7eed6` (--color-surface)

### Typography

- Display / headings: Archivo Black (fallback: Arial Black, Impact, sans-serif)
- Body: Work Sans (fallback: Helvetica, Arial, sans-serif)
- Type scale: 1.414 ratio, base 16px — computed steps: 16px / 23px / 32px / 45px / 64px / 90px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.05, letter-spacing -0.01em
- Body: line-height 1.3, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Poster-like: huge display type and big flat shapes with generous cream margins; content blocks are few and bold rather than many and dense.
- Border radius: none 0px, blob 40% 60% 55% 45% / 50% 45% 55% 50% — Hard-edged shapes by default; occasional organic blob shapes for illustration-style decoration.
- Border treatment: none — Ink shapes have no outlines. When a rule is needed use 3px solid in an ink color, slightly offset from the shape it frames to mimic misregistration.

### Shadows

- none: `none` — Riso is flat spot-ink printing — depth comes from overprint blends and misregistration, never from shadows

### Layout

- Max content width: 1200px
- Layered flat shapes: large ink blocks and blobs behind and between content
- Poster hierarchy — one dominant headline, a few supporting blocks
- Misregistration: duplicate key shapes/text in a second ink offset 2–3px with mix-blend-mode: multiply
- Full-bleed ink blocks may run off the viewport edge like a trimmed print

### Effects

- Ink grain: SVG noise texture masked inside colored shapes at 10–15% opacity
- mix-blend-mode: multiply on all overlapping ink layers
- 2–3px layer offset (misregistration) on decorative duplicates
- Duotone image treatment: photos mapped to one ink color over cream

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 120ms / 220ms / 400ms
- Hover nudges the offset ink layer 1–2px further out of register
- Section entrances slide ink layers in from slightly different directions, settling misaligned
- Keep motion sparse — a printed poster mostly sits still

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fdf6e3;
  --color-text: #1d1d1b;
  --color-accent: #ff48b0;
  --color-accent-blue: #0078bf;
  --color-accent-yellow: #ffe800;
  --color-overprint-violet: #59309e;
  --color-overprint-orange: #ff8a3d;
  --color-surface: #f7eed6;
  --radius-none: 0px;
  --radius-blob: 40% 60% 55% 45% / 50% 45% 55% 50%;
  --border-default: none;
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body: "Work Sans", Helvetica, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.05;
  --leading-body: 1.3;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400&family=Work+Sans:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, wordmark in Archivo Black with a pink misregistered duplicate behind it, blue text links that gain a yellow highlight block on hover
- **Hero:** Oversized two-line headline in near-black with a fluoro-pink offset duplicate (multiply), floating blue and yellow blobs behind, duotone hero image
- **Card:** Flat surface-cream panel, no border or shadow, a colored ink bar or blob tucked behind one corner, 24–32px padding
- **Button (primary):** Blue (#0078bf) fill, cream text, square corners; hover reveals a pink duplicate shifted 2px behind it
- **Button (secondary):** Transparent with 3px blue border and blue text; hover fills yellow with near-black text
- **Form fields:** Cream field with 2px near-black bottom border only; focus adds a pink misregistered underline 2px below the black one

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Two spot-ink layers deliberately misaligned by 2–3px, their overlap multiplying into a third color — fluoro pink over blue making a deep violet, over yellow making warm orange. Spend boldness here; keep everything else quiet.

## Do

- Restrict every screen to 2–3 ink colors plus cream and near-black
- Use multiply blending wherever inks overlap so new colors emerge honestly
- Add grain inside ink shapes, not over the whole page
- Let misregistration be visible but small — 2–3px, like a real duplicator

## Don't

- No true black fills at large sizes — riso black is a dense warm near-black
- No drop shadows, gradients, or glossy highlights; the medium is flat
- Don't set body text in fluoro pink or yellow — those inks are for shapes and display
- Don't use full-color photography; map images to one or two inks

## Accessibility notes

- Fluoro pink (#ff48b0) on cream fails WCAG contrast (about 2.7:1) — restrict it to decorative shapes and oversized display duplicates; never use it for functional text or icons
- Blue (#0078bf) on cream sits near 4.4:1 — use it at 18.5px+/bold for links or darken to #005a94 for small text
- Yellow ink must never carry text; pair it with near-black overprints
- Grain textures inside shapes must not sit behind body text

## Reference sites

- Stencil Wiki (riso community): https://www.stencil.wiki
- Risotto Studio: https://risottostudio.com
- Risograph — overview: https://en.wikipedia.org/wiki/Risograph

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip risograph-print.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/risograph-print.json

Settings → Capabilities → Skills → Upload skill → risograph-print.zip