Risograph

# Risograph

## Philosophy

Risograph is a print-shop language: warm cream stock, three loud spot inks (fluoro pink, press blue, sunflower) and one rule, that every emphatic thing is two plates pulled slightly out of register. Buttons, cards and plaques stand on a solid offset plate of a second ink instead of a shadow, headlines carry a flat highlighter stripe behind one word, and where pink crosses blue the seam multiplies to violet, which is the only depth the page has. The hero is one full-bleed riso scene whose empty paper holds the headline, so type sits straight on the picture with no box, scrim or fade.

### Values

- Misregistration is the signature: every emphatic surface is a plate offset a few pixels from the ink above it.
- Paper out-areas ink: saturated colour always lands against open cream stock, never as a flooded field.
- Depth comes from overprint: violet exists only where pink and blue plates cross.
- Type stays legible while colour stays loud: deep plum ink at 17px or larger on cream, dark labels on pink and yellow.
- A real printed picture leads: one full-bleed riso hero in the paired art style, never CSS blobs standing in for it.

### Anti-Values

- Gradients, glows and grey drop shadows.
- Borders, outlines and heavy keylines around cards.
- Eyebrow micro-labels, numbered section tags, invented testimonials and colophon footers.
- White text on pink, or a pink that reads as the error colour.
- Flooding a whole panel in saturated ink until it goes muddy.
- Text laid over a busy part of the picture, or a scrim to rescue it.

### Visual Character

- Warm cream stock #F3EAD8 with lighter sheets #FBF5E8 and deep plum ink #211A2E.
- Three spot inks used like highlighters: pink #FF2E88, blue #1F5CFF, sunflower #FFC21F.
- Solid offset plates in a second ink under buttons, plaques and the closing card; a violet #6A2AB0 plate under the overprint figure.
- A flat highlighter stripe behind one word of every large heading, and a pink ghost offset 4px behind the hero headline.
- Encode Sans Expanded 900 headlines at -0.02em, Reddit Sans 17px prose, Fira Mono press labels.
- Radius from 16, 24 and 9999 only: soft plates and round ink dots, no rectangles with square corners.

### Lineage

> Generation 2 of Risograph, revised in place from arni's approved Round 7 specimen (risograph-i, 2026-10-06). It keeps the pink, blue and yellow on warm paper, the page order, the misregistration offset signature and the riso hero picture. It changes the fonts to Encode Sans Expanded, Reddit Sans and Fira Mono, moves the label ink to dark plum so pink passes AA, repairs muted and the semantic colours, replaces gradients with solid plates and SVG dots, turns the three cards into three passes, and drops the quote, eyebrows and footer.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F3EAD8` |
| surface | `#FBF5E8` |
| surface-2 | `#ECE0C6` |
| text | `#211A2E` |
| muted | `#5E4B5C` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#1F5CFF` |
| accent-3 | `#FFC21F` |
| overprint | `#6A2AB0` |
| on-accent | `#211A2E` |
| on-blue | `#FBF5E8` |
| success | `#0B6B3A` |
| warning | `#8A5A00` |
| error | `#B0123A` |
| info | `#1749D6` |

### Typography

- **Heading Font**: Encode Sans Expanded
- **Body Font**: Reddit Sans
- **Mono Font**: Fira Mono
- **Heading Weight**: 900
- **Body Weight**: 400
- **Button Weight**: 800
- **Mono Weight**: 400, 500 for press labels
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display
- **Base Size**: 17px
- **Line Height**: 1.55
- **Scale**: ["17px","19px","22px","28px","34px","48px","64px","88px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@600;800;900&family=Reddit+Sans:wght@400;500;700&family=Fira+Mono:wght@400;500&display=swap

### Radii

- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","72px","112px"]

### Shadows

- **Plate-Blue**: 6px 6px 0 0 #1F5CFF
- **Plate-Pink**: 6px 6px 0 0 #FF2E88
- **Plate-Yellow**: 6px 6px 0 0 #FFC21F
- **Plate-Violet**: 8px 8px 0 0 #6A2AB0

### Surfaces

- **Treatment**: paper
- **Card Style**: Cream sheets on warm stock, lifted by a solid offset ink plate (blue, pink, yellow or violet), never a grey shadow or an outline.
- **Bg Pattern**: a faint paper-light dot field on the blue band and the dark closing card; open stock elsewhere

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: No outlines anywhere. The offset ink plate and open paper separate surfaces; focus is a 3px ink outline at 3px offset.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2,0.9,0.2,1)
- **Philosophy**: Plates re-register on hover (the offset collapses to 1px as the button moves into it) and slip out on press. Reveals rise 20px over 700ms. All of it is skipped under prefers-reduced-motion; the settled page renders with no JavaScript.

### Controls

- **Height**: 52px
- **Radius**: 16px
- **Well Height**: 52px

## Rules

### Composition

- Lay every view as a press sheet on warm paper: a wide lead column, generous paper gutters, one full-bleed riso picture at the top of a landing.
- Set the headline straight on the empty paper of the hero picture: no panel, scrim or fade behind it.
- Separate surfaces with open stock and a solid offset plate of a second ink, never an outline or a grey shadow.
- Give one section a full-width press-blue band with a faint dot field and a single overprint figure.

### Hierarchy

- Display in Encode Sans Expanded 900, 34 to 64px on phones to desktop, with a flat highlighter stripe behind one word.
- Prose in Reddit Sans 17px or more in plum ink, with muted #5E4B5C for the second tone.
- Fira Mono at 17px captions the press: counts, prices, offsets.
- Primary action is the pink plate; the second action is blue or a quiet cream plate.

### Density

Lively but printed: 64 to 104px between sections, 24 to 36px inside plaques, and an open paper strip between every burst of ink so colour never turns into a muddy field.

### Signature Patterns

- Misregistration plate: buttons, run plaques and the closing card stand on a solid 6 to 10px offset plate of a second ink; on hover the button moves into its plate, and on press it slips out of register.
- Highlighter stripe: one word of each large heading sits on a flat stripe of pink, blue or yellow 0.4em tall, behind the letters.
- Ghost headline: the hero headline carries a pink copy offset 4px behind each line.
- Overprint seam: two discs in pink and blue multiply to violet #6A2AB0 where they cross, shown once as a figure and reused in the passes strip.
- Three passes: a sheet read down as three strips, each strip a pair of ink discs offset by the plate gap, stepping right as the passes build.

## Layout

### Grid

- **Type**: press sheet on a wide column
- **Max Width**: 1180px content, centred above 1440px; the hero spans the viewport
- **Gutter**: clamp(20px, 5vw, 72px)
- **Column Behavior**: Two-column bands use minmax(0,1.1fr) minmax(0,1fr) and stack below 900px; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 64 to 104px
- **Card Gap**: 36px between plaques, 24px on tablets
- **Content Padding**: 22 to 36px inside plaques
- **Approach**: Warm paper is the reset between bursts of ink; every saturated surface has open stock on at least two sides.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"56px table rows"}

### Responsive

Phones (390px) stack to one column and swap to the portrait hero with the headline in the empty paper above the scene; the three passes drop their stagger. Tablets (601 to 1199px) use the portrait hero too and two-up plaques. From 1440px the content caps and centres; only the hero stays full bleed.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Build emphasis from offset spot-ink plates, not outlines or grey shadows.
- Keep the paper in charge: let ink land on open cream and never flood a panel.
- Put the headline on the empty paper of the hero picture with no box or scrim.
- Use dark plum text on pink and yellow; use cream only on blue and plum.
- Give one word of each big heading a flat highlighter stripe.
- Pair every picture with the Misprint art style and its two or three spot inks.

### Don't

- Don't use gradients, glow, glass or grey shadows.
- Don't outline cards, inputs or buttons.
- Don't set white or cream text on pink.
- Don't use pink for errors; errors are crimson #B0123A.
- Don't add eyebrow labels, numbered tags, fake quotes or a colophon footer.
- Don't use square corners on a rectangle: 16, 24 or full round only.

### Accessibility

Plum #211A2E is 14.2:1 on cream #F3EAD8 and muted #5E4B5C is 6.2:1. The button label plum on pink #FF2E88 is 5.7:1, cream on blue #1F5CFF is 5.4:1, and plum on sunflower #FFC21F is 10.6:1. Success #0B6B3A, warning #8A5A00, error #B0123A and info #1749D6 all clear 4.5:1 on cream and always carry a word. The hero type clears 4.5:1 against the worst pixel of the picture at 390, 834 and 1280px. Focus is a 3px plum outline at 3px offset. Reveals and plate motion are skipped under prefers-reduced-motion and the settled page renders without JavaScript.

### Usage Context

Zines, gazettes, posters, merch drops and indie shops; any product that wants to feel hand-printed, loud and a little imperfect without losing legibility.

## Imagery Direction

### Pairs With

misprint-riso

### Art Style Id

en-019efd20-27ed-7ec3-9d1a-ba1553784762

### Summary

Risograph screen-print scenes in the Misprint art style: pink, blue and yellow spot inks on warm cream stock, deliberately offset layers, coarse halftone and flat poster shading. The landing hero keeps a calm empty sheet of paper for the headline.

### Subjects

- a print-shop press at work
- stacks of freshly pulled sheets
- hands feeding paper
- ink drums and rollers

### Usage

One full-bleed hero per landing, painted with var(--hero-image): a wide scene whose left side is open paper for the headline, and a portrait scene with open paper on top for tablets and phones. Inside pages use ink discs and plates, not extra pictures.

### Avoid

Text, gradients or a scrim over the picture; photography; 3D renders; smooth airbrush; muddy brown washes; perfectly registered edges.

---
version: "alpha"
name: "Risograph"
description: "Risograph is a print-shop language: warm cream stock, three loud spot inks (fluoro pink, press blue, sunflower) and one rule, that every emphatic thing is two plates pulled slightly out of register. Buttons, cards and plaques stand on a..."
colors:
  bg: "#F3EAD8"
  surface: "#FBF5E8"
  surface-2: "#ECE0C6"
  text: "#211A2E"
  muted: "#5E4B5C"
  border: "#E4D6BA"
  accent: "#FF2E88"
  accent-2: "#1F5CFF"
  accent-3: "#FFC21F"
  overprint: "#6A2AB0"
  on-accent: "#211A2E"
  on-blue: "#FBF5E8"
  success: "#0B6B3A"
  warning: "#8A5A00"
  error: "#B0123A"
  info: "#1749D6"
typography:
  headline-lg:
    fontFamily: "Encode Sans Expanded"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Encode Sans Expanded"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Reddit Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Fira Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "72px"
  step-8: "112px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface-2:
    backgroundColor: "{colors.surface-2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  color-reference-overprint:
    backgroundColor: "{colors.overprint}"
  color-reference-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-on-blue:
    backgroundColor: "{colors.on-blue}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Risograph

## Overview

Risograph is a print-shop language: warm cream stock, three loud spot inks (fluoro pink, press blue, sunflower) and one rule, that every emphatic thing is two plates pulled slightly out of register. Buttons, cards and plaques stand on a solid offset plate of a second ink instead of a shadow, headlines carry a flat highlighter stripe behind one word, and where pink crosses blue the seam multiplies to violet, which is the only depth the page has. The hero is one full-bleed riso scene whose empty paper holds the headline, so type sits straight on the picture with no box, scrim or fade.

### Values

- Misregistration is the signature: every emphatic surface is a plate offset a few pixels from the ink above it.
- Paper out-areas ink: saturated colour always lands against open cream stock, never as a flooded field.
- Depth comes from overprint: violet exists only where pink and blue plates cross.
- Type stays legible while colour stays loud: deep plum ink at 17px or larger on cream, dark labels on pink and yellow.
- A real printed picture leads: one full-bleed riso hero in the paired art style, never CSS blobs standing in for it.

### Anti-Values

- Gradients, glows and grey drop shadows.
- Borders, outlines and heavy keylines around cards.
- Eyebrow micro-labels, numbered section tags, invented testimonials and colophon footers.
- White text on pink, or a pink that reads as the error colour.
- Flooding a whole panel in saturated ink until it goes muddy.
- Text laid over a busy part of the picture, or a scrim to rescue it.

### Visual Character

- Warm cream stock #F3EAD8 with lighter sheets #FBF5E8 and deep plum ink #211A2E.
- Three spot inks used like highlighters: pink #FF2E88, blue #1F5CFF, sunflower #FFC21F.
- Solid offset plates in a second ink under buttons, plaques and the closing card; a violet #6A2AB0 plate under the overprint figure.
- A flat highlighter stripe behind one word of every large heading, and a pink ghost offset 4px behind the hero headline.
- Encode Sans Expanded 900 headlines at -0.02em, Reddit Sans 17px prose, Fira Mono press labels.
- Radius from 16, 24 and 9999 only: soft plates and round ink dots, no rectangles with square corners.

### Lineage

> Generation 2 of Risograph, revised in place from arni's approved Round 7 specimen (risograph-i, 2026-10-06). It keeps the pink, blue and yellow on warm paper, the page order, the misregistration offset signature and the riso hero picture. It changes the fonts to Encode Sans Expanded, Reddit Sans and Fira Mono, moves the label ink to dark plum so pink passes AA, repairs muted and the semantic colours, replaces gradients with solid plates and SVG dots, turns the three cards into three passes, and drops the quote, eyebrows and footer.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#F3EAD8` |
| surface | `#FBF5E8` |
| surface-2 | `#ECE0C6` |
| text | `#211A2E` |
| muted | `#5E4B5C` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#1F5CFF` |
| accent-3 | `#FFC21F` |
| overprint | `#6A2AB0` |
| on-accent | `#211A2E` |
| on-blue | `#FBF5E8` |
| success | `#0B6B3A` |
| warning | `#8A5A00` |
| error | `#B0123A` |
| info | `#1749D6` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@600;800;900&family=Reddit+Sans:wght@400;500;700&family=Fira+Mono:wght@400;500&display=swap

- **Headline-Lg**: Encode Sans Expanded, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Encode Sans Expanded, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Reddit Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: Fira Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `72px`
- **Step-8**: `112px`

### Grid

- **Type**: press sheet on a wide column
- **Max Width**: 1180px content, centred above 1440px; the hero spans the viewport
- **Gutter**: clamp(20px, 5vw, 72px)
- **Column Behavior**: Two-column bands use minmax(0,1.1fr) minmax(0,1fr) and stack below 900px; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 64 to 104px
- **Card Gap**: 36px between plaques, 24px on tablets
- **Content Padding**: 22 to 36px inside plaques
- **Approach**: Warm paper is the reset between bursts of ink; every saturated surface has open stock on at least two sides.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"56px table rows"}

### Responsive

Phones (390px) stack to one column and swap to the portrait hero with the headline in the empty paper above the scene; the three passes drop their stagger. Tablets (601 to 1199px) use the portrait hero too and two-up plaques. From 1440px the content caps and centres; only the hero stays full bleed.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Plate-Blue**: 6px 6px 0 0 #1F5CFF
- **Plate-Pink**: 6px 6px 0 0 #FF2E88
- **Plate-Yellow**: 6px 6px 0 0 #FFC21F
- **Plate-Violet**: 8px 8px 0 0 #6A2AB0

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Card Style**: Cream sheets on warm stock, lifted by a solid offset ink plate (blue, pink, yellow or violet), never a grey shadow or an outline.
- **Bg Pattern**: a faint paper-light dot field on the blue band and the dark closing card; open stock elsewhere

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: No outlines anywhere. The offset ink plate and open paper separate surfaces; focus is a 3px ink outline at 3px offset.

## Components

### Composition

- Lay every view as a press sheet on warm paper: a wide lead column, generous paper gutters, one full-bleed riso picture at the top of a landing.
- Set the headline straight on the empty paper of the hero picture: no panel, scrim or fade behind it.
- Separate surfaces with open stock and a solid offset plate of a second ink, never an outline or a grey shadow.
- Give one section a full-width press-blue band with a faint dot field and a single overprint figure.

### Hierarchy

- Display in Encode Sans Expanded 900, 34 to 64px on phones to desktop, with a flat highlighter stripe behind one word.
- Prose in Reddit Sans 17px or more in plum ink, with muted #5E4B5C for the second tone.
- Fira Mono at 17px captions the press: counts, prices, offsets.
- Primary action is the pink plate; the second action is blue or a quiet cream plate.

### Density

Lively but printed: 64 to 104px between sections, 24 to 36px inside plaques, and an open paper strip between every burst of ink so colour never turns into a muddy field.

### Signature Patterns

- Misregistration plate: buttons, run plaques and the closing card stand on a solid 6 to 10px offset plate of a second ink; on hover the button moves into its plate, and on press it slips out of register.
- Highlighter stripe: one word of each large heading sits on a flat stripe of pink, blue or yellow 0.4em tall, behind the letters.
- Ghost headline: the hero headline carries a pink copy offset 4px behind each line.
- Overprint seam: two discs in pink and blue multiply to violet #6A2AB0 where they cross, shown once as a figure and reused in the passes strip.
- Three passes: a sheet read down as three strips, each strip a pair of ink discs offset by the plate gap, stepping right as the passes build.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a112c9-37da-7c33-bab3-fa15b8a08a81/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a112c9-37da-7c33-bab3-fa15b8a08a81/shadcn.json` (registry theme), `/language/en-01a112c9-37da-7c33-bab3-fa15b8a08a81/shadcn-components.md` (component recipes) and `/language/en-01a112c9-37da-7c33-bab3-fa15b8a08a81/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Build emphasis from offset spot-ink plates, not outlines or grey shadows.
- Do Keep the paper in charge: let ink land on open cream and never flood a panel.
- Do Put the headline on the empty paper of the hero picture with no box or scrim.
- Do Use dark plum text on pink and yellow; use cream only on blue and plum.
- Do Give one word of each big heading a flat highlighter stripe.
- Do Pair every picture with the Misprint art style and its two or three spot inks.
- Don't Don't use gradients, glow, glass or grey shadows.
- Don't Don't outline cards, inputs or buttons.
- Don't Don't set white or cream text on pink.
- Don't Don't use pink for errors; errors are crimson #B0123A.
- Don't Don't add eyebrow labels, numbered tags, fake quotes or a colophon footer.
- Don't Don't use square corners on a rectangle: 16, 24 or full round only.

### Accessibility

Plum #211A2E is 14.2:1 on cream #F3EAD8 and muted #5E4B5C is 6.2:1. The button label plum on pink #FF2E88 is 5.7:1, cream on blue #1F5CFF is 5.4:1, and plum on sunflower #FFC21F is 10.6:1. Success #0B6B3A, warning #8A5A00, error #B0123A and info #1749D6 all clear 4.5:1 on cream and always carry a word. The hero type clears 4.5:1 against the worst pixel of the picture at 390, 834 and 1280px. Focus is a 3px plum outline at 3px offset. Reveals and plate motion are skipped under prefers-reduced-motion and the settled page renders without JavaScript.

### Usage Context

Zines, gazettes, posters, merch drops and indie shops; any product that wants to feel hand-printed, loud and a little imperfect without losing legibility.

## Imagery Direction

### Pairs With

misprint-riso

### Art Style Id

en-019efd20-27ed-7ec3-9d1a-ba1553784762

### Summary

Risograph screen-print scenes in the Misprint art style: pink, blue and yellow spot inks on warm cream stock, deliberately offset layers, coarse halftone and flat poster shading. The landing hero keeps a calm empty sheet of paper for the headline.

### Subjects

- a print-shop press at work
- stacks of freshly pulled sheets
- hands feeding paper
- ink drums and rollers

### Usage

One full-bleed hero per landing, painted with var(--hero-image): a wide scene whose left side is open paper for the headline, and a portrait scene with open paper on top for tablets and phones. Inside pages use ink discs and plates, not extra pictures.

### Avoid

Text, gradients or a scrim over the picture; photography; 3D renders; smooth airbrush; muddy brown washes; perfectly registered edges.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "risograph",
  "type": "registry:theme",
  "title": "Risograph shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F3EAD8",
      "foreground": "#211A2E",
      "card": "#FBF5E8",
      "card-foreground": "#211A2E",
      "popover": "#FBF5E8",
      "popover-foreground": "#211A2E",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E4B5C",
      "muted-foreground": "#211A2E",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#B0123A",
      "border": "#E4D6BA",
      "input": "#E4D6BA",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#0B6B3A",
      "chart-5": "#8A5A00",
      "sidebar": "#FBF5E8",
      "sidebar-foreground": "#211A2E",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1749D6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4D6BA",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#B0123A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#0B6B3A",
      "chart-5": "#8A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF2E88",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a112c9-37da-7c33-bab3-fa15b8a08a81",
    "slug": "risograph",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent-2",
        "accent-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "on-blue",
        "overprint",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "mono_weight",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "shadows": [
        "plate-blue",
        "plate-pink",
        "plate-violet",
        "plate-yellow"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```