Risograph

# Risograph

## Philosophy

Risograph reinterprets loud pop-graphic interface energy as a real printing press. Its one ownable mechanic is ink MISREGISTRATION: every emphatic surface is built from offset spot-ink layers, so the 'shadow' is a second pink or blue plate shifted a few pixels, and where layers overlap they multiply into violet. It keeps the source's saturated, collectible, joyfully-commercial spirit but drops the toy-sticker gimmick and the thick-black-keyline-on-everything — the energy now comes from print logic, not from outlining boxes.

### Values

- saturated spot-ink brightness on a warm paper ground
- misregistration as structure, not decoration
- print-shop tactility (halftone, grain, overprint)
- loud but legible — paper out-areas the ink
- collectible, hand-pulled character

### Anti-Values

- thick black keylines stamped on every box
- one shape used as wallpaper until it means nothing
- muddy over-dense maximalism with no breathing room
- white digital-glossy SaaS neutrality
- soft drop-shadow elevation

### Visual Character

- Every emphatic element is an offset ink stack: the primary plate plus a second spot plate shifted ~4-6px, so buttons, badges and headings carry a coloured misregistration halo instead of a grey shadow.
- Overlaps multiply: where a pink layer crosses a blue layer the seam goes violet, so depth is built from ink-on-ink rather than from borders.
- Coarse halftone dot fields and warm paper grain sit in the open ground, so the interface reads as printed even before content loads.
- Display type is a heavy condensed grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations.
- Cards are sheets on cream stock, separated by space and a faint registration tick rather than a heavy outline; status uses the three spot inks as ink-dots.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F3EAD8` |
| surface | `#FBF5E8` |
| surface-2 | `#ECE0C6` |
| text | `#211A2E` |
| muted | `#6E5A6B` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#1F5CFF` |
| accent-3 | `#FFC21F` |
| overprint | `#6A2AB0` |
| on-accent | `#FBF5E8` |
| on-yellow | `#211A2E` |
| success | `#1F8A4C` |
| warning | `#FFC21F` |
| error | `#E11D48` |
| info | `#1F5CFF` |

### Typography

- **Base Size**: 17px
- **Body Font**: Space Grotesk, sans-serif
- **Heading Font**: Archivo Expanded, Archivo, sans-serif
- **Mono Font**: Space Mono, monospace
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.5
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Archivo+Expanded:wght@700;800;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap

### Spacing

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

### Radii

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

### Shadows

- **Ink-Pink**: 5px 5px 0 0 #FF2E88
- **Ink-Blue**: 5px 5px 0 0 #1F5CFF
- **Ink-Violet**: 5px 5px 0 0 #6A2AB0

### Surfaces

- **Treatment**: paper
- **Card Style**: Cream sheets on warm stock, separated by space and a faint registration tick; emphatic surfaces carry an offset spot-ink plate (the misregistration), never a grey drop shadow.
- **Bg Pattern**: halftone-dots

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: Cards avoid outlines entirely; the offset ink plate and the open paper do the separating. A single faint registration tick may mark a corner.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2,0.9,0.2,1)
- **Philosophy**: On hover an element re-registers — its offset ink plate slides back under the top plate, as if the press snapped into alignment; on press it slips a touch out of register again.

## Rules

### Composition

Lay every view as a press sheet on warm paper: a wide lead column for the run, a narrow sidebar for the proof rail, ample paper gutters. Emphasis comes from offset ink plates and the three spot inks, not from boxing things in.

### Hierarchy

Use a heavy condensed display face with one highlighter ink-mark word to set the primary line; spot-ink dots and offset plates flag the most important numbers and actions; mono press-labels caption the rest.

### Density

Lively but printed: cluster content into sheets with real paper breathing strips between them, so saturated ink always lands against open stock and never turns into a muddy field.

### Signature

Misregistration: every emphatic surface is a stack of offset spot-ink plates that carry a coloured halo and multiply to violet at overlaps; hover re-registers the plate.

### Signature Patterns

- Primary buttons and KPI tiles render as two stacked plates: the top ink plus a 5px-offset second spot plate, so the 'shadow' is a pink or blue misregistration, not grey.
- Headings carry a flat highlighter ink-mark behind one word (pink, blue or yellow), and a faint registration crosshair tick sits at a card corner instead of a border.
- Where two ink layers overlap (a badge over a card edge, a tag over an image) the seam multiplies to violet, marking depth by overprint.
- Backgrounds and empty states carry a coarse halftone dot field and warm paper grain so the surface reads as printed before content resolves.
- Status, links and metrics use the three spot inks as solid ink-dots; on hover an interactive plate re-registers (slides into alignment) and on press slips back out of register.

## Layout

### Grid

A press-sheet grid: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters; overlap is intentional where ink plates overprint, but everything keeps a baseline so the run scans cleanly.

### Whitespace

Warm paper is the reset between bursts of ink. Keep breathing strips around every sheet so saturated spot colour always meets open stock.

### Density

high-but-punctuated

### Responsive

Desktop keeps the proof rail and offset plates; tablet drops to a single column and halves the plate offset; mobile is one column, plate offsets shrink to ~3px so nothing clips, the proof rail folds under, and display headlines shrink with clamp() and wrap.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Wide**: 1600px

## Guidance

### Do

- Build emphasis from offset spot-ink plates and the three inks, not from borders or grey shadows.
- Let overlaps multiply into violet to show depth; keep the paper as the real ground.
- Use coarse halftone fields and paper grain in empty areas so the surface reads as printed.
- Give one display word a flat highlighter ink-mark; caption with mono press-labels.
- Style every control as a printed object; re-register plates on hover.

### Don't

- Don't outline cards in heavy black keylines or rely on grey drop shadows.
- Don't stamp one shape everywhere as wallpaper until it stops meaning anything.
- Don't flood whole panels in saturated ink; let paper out-area the colour.
- Don't use a white #FFF ground or default browser form controls.
- Don't use the serif-upright / serif-italic headline swap.

### Accessibility

Deep overprinted ink text (#211A2E) on cream surfaces holds high contrast; spot-ink buttons pair pink/blue with paper-light labels and yellow with dark ink. Misregistration is decorative only — never the sole carrier of meaning. Respect prefers-reduced-motion by holding plates in register.

## Imagery Direction

### Pairs With

misprint-riso

### Summary

Risograph screen-print imagery in three fluorescent spot inks on warm cream stock, built from deliberately offset ink layers (misregistration halos, overprint-violet seams) and coarse halftone — applied to whatever subject the scene needs.

### Subjects

- a print-shop press at work
- portraits and faces
- city rooftops and architecture
- still-life objects
- hands and tools

### Usage

Hero is a full-bleed riso studio scene with open paper upper-left for the headline; features and avatars use the same technique on their own subjects. Never illustrated art in the gallery thumbnail.

---
version: "alpha"
name: "Risograph"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F3EAD8"
  surface: "#FBF5E8"
  surface-2: "#ECE0C6"
  text: "#211A2E"
  muted: "#6E5A6B"
  border: "#E4D6BA"
  accent: "#FF2E88"
  accent-2: "#1F5CFF"
  accent-3: "#FFC21F"
  overprint: "#6A2AB0"
  on-accent: "#FBF5E8"
  on-yellow: "#211A2E"
  success: "#1F8A4C"
  warning: "#FFC21F"
  error: "#E11D48"
  info: "#1F5CFF"
typography:
  headline-lg:
    fontFamily: "Archivo Expanded, Archivo, sans-serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo Expanded, Archivo, sans-serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Space Grotesk, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono, monospace"
    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-yellow:
    backgroundColor: "{colors.on-yellow}"
  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: "#000000"
    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 reinterprets loud pop-graphic interface energy as a real printing press. Its one ownable mechanic is ink MISREGISTRATION: every emphatic surface is built from offset spot-ink layers, so the 'shadow' is a second pink or blue plate shifted a few pixels, and where layers overlap they multiply into violet. It keeps the source's saturated, collectible, joyfully-commercial spirit but drops the toy-sticker gimmick and the thick-black-keyline-on-everything — the energy now comes from print logic, not from outlining boxes.

### Values

- saturated spot-ink brightness on a warm paper ground
- misregistration as structure, not decoration
- print-shop tactility (halftone, grain, overprint)
- loud but legible — paper out-areas the ink
- collectible, hand-pulled character

### Anti-Values

- thick black keylines stamped on every box
- one shape used as wallpaper until it means nothing
- muddy over-dense maximalism with no breathing room
- white digital-glossy SaaS neutrality
- soft drop-shadow elevation

### Visual Character

- Every emphatic element is an offset ink stack: the primary plate plus a second spot plate shifted ~4-6px, so buttons, badges and headings carry a coloured misregistration halo instead of a grey shadow.
- Overlaps multiply: where a pink layer crosses a blue layer the seam goes violet, so depth is built from ink-on-ink rather than from borders.
- Coarse halftone dot fields and warm paper grain sit in the open ground, so the interface reads as printed even before content loads.
- Display type is a heavy condensed grotesque set tight, with one word carrying a flat highlighter ink-mark; supporting labels are small-caps mono press annotations.
- Cards are sheets on cream stock, separated by space and a faint registration tick rather than a heavy outline; status uses the three spot inks as ink-dots.

## 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 | `#6E5A6B` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#1F5CFF` |
| accent-3 | `#FFC21F` |
| overprint | `#6A2AB0` |
| on-accent | `#FBF5E8` |
| on-yellow | `#211A2E` |
| success | `#1F8A4C` |
| warning | `#FFC21F` |
| error | `#E11D48` |
| info | `#1F5CFF` |

## Typography

- **Headline-Lg**: Archivo Expanded, Archivo, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Expanded, Archivo, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space Mono, monospace, 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

A press-sheet grid: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters; overlap is intentional where ink plates overprint, but everything keeps a baseline so the run scans cleanly.

### Whitespace

Warm paper is the reset between bursts of ink. Keep breathing strips around every sheet so saturated spot colour always meets open stock.

### Density

high-but-punctuated

### Responsive

Desktop keeps the proof rail and offset plates; tablet drops to a single column and halves the plate offset; mobile is one column, plate offsets shrink to ~3px so nothing clips, the proof rail folds under, and display headlines shrink with clamp() and wrap.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Wide**: 1600px

## Elevation & Depth

### Shadows

- **Ink-Pink**: 5px 5px 0 0 #FF2E88
- **Ink-Blue**: 5px 5px 0 0 #1F5CFF
- **Ink-Violet**: 5px 5px 0 0 #6A2AB0

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Cream sheets on warm stock, separated by space and a faint registration tick; emphatic surfaces carry an offset spot-ink plate (the misregistration), never a grey drop shadow.
- **Bg Pattern**: halftone-dots

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: Cards avoid outlines entirely; the offset ink plate and the open paper do the separating. A single faint registration tick may mark a corner.

## Components

### Composition

Lay every view as a press sheet on warm paper: a wide lead column for the run, a narrow sidebar for the proof rail, ample paper gutters. Emphasis comes from offset ink plates and the three spot inks, not from boxing things in.

### Hierarchy

Use a heavy condensed display face with one highlighter ink-mark word to set the primary line; spot-ink dots and offset plates flag the most important numbers and actions; mono press-labels caption the rest.

### Density

Lively but printed: cluster content into sheets with real paper breathing strips between them, so saturated ink always lands against open stock and never turns into a muddy field.

### Signature

Misregistration: every emphatic surface is a stack of offset spot-ink plates that carry a coloured halo and multiply to violet at overlaps; hover re-registers the plate.

### Signature Patterns

- Primary buttons and KPI tiles render as two stacked plates: the top ink plus a 5px-offset second spot plate, so the 'shadow' is a pink or blue misregistration, not grey.
- Headings carry a flat highlighter ink-mark behind one word (pink, blue or yellow), and a faint registration crosshair tick sits at a card corner instead of a border.
- Where two ink layers overlap (a badge over a card edge, a tag over an image) the seam multiplies to violet, marking depth by overprint.
- Backgrounds and empty states carry a coarse halftone dot field and warm paper grain so the surface reads as printed before content resolves.
- Status, links and metrics use the three spot inks as solid ink-dots; on hover an interactive plate re-registers (slides into alignment) and on press slips back out of register.

## 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-019efd20-71ad-70d0-8ae9-148e7ce76d37/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 and the three inks, not from borders or grey shadows.
- Do Let overlaps multiply into violet to show depth; keep the paper as the real ground.
- Do Use coarse halftone fields and paper grain in empty areas so the surface reads as printed.
- Do Give one display word a flat highlighter ink-mark; caption with mono press-labels.
- Do Style every control as a printed object; re-register plates on hover.
- Don't Don't outline cards in heavy black keylines or rely on grey drop shadows.
- Don't Don't stamp one shape everywhere as wallpaper until it stops meaning anything.
- Don't Don't flood whole panels in saturated ink; let paper out-area the colour.
- Don't Don't use a white #FFF ground or default browser form controls.
- Don't Don't use the serif-upright / serif-italic headline swap.

### Accessibility

Deep overprinted ink text (#211A2E) on cream surfaces holds high contrast; spot-ink buttons pair pink/blue with paper-light labels and yellow with dark ink. Misregistration is decorative only — never the sole carrier of meaning. Respect prefers-reduced-motion by holding plates in register.

## Imagery Direction

### Pairs With

misprint-riso

### Summary

Risograph screen-print imagery in three fluorescent spot inks on warm cream stock, built from deliberately offset ink layers (misregistration halos, overprint-violet seams) and coarse halftone — applied to whatever subject the scene needs.

### Subjects

- a print-shop press at work
- portraits and faces
- city rooftops and architecture
- still-life objects
- hands and tools

### Usage

Hero is a full-bleed riso studio scene with open paper upper-left for the headline; features and avatars use the same technique on their own subjects. Never illustrated art in the gallery thumbnail.

```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": "#6E5A6B",
      "muted-foreground": "#211A2E",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#E11D48",
      "border": "#E4D6BA",
      "input": "#E4D6BA",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "sidebar": "#FBF5E8",
      "sidebar-foreground": "#211A2E",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F5CFF",
      "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": "#E11D48",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "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-019efd20-71ad-70d0-8ae9-148e7ce76d37",
    "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-yellow",
        "overprint",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "ink-blue",
        "ink-pink",
        "ink-violet"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```