Affiche

# Affiche

## Philosophy

Affiche is a two-ink poster language for interfaces: every surface is exactly two spot passes on bone stock, the overlap of the two plates computes a third colour, and a knockout is the absence of both. State, hierarchy and emphasis are all decisions about which plates are down and how far off true the second one landed.

### Values

- two inks plus the stock, and nothing mixed in a bucket
- state expressed as a printing event rather than as decoration
- square geometry throughout, because everything here is cut
- depth as a second impression with zero blur
- a quiet ground under every line of copy, however loud the plates get

### Anti-Values

- glass, blur and glow
- a coloured rail on the edge of a card
- rounded corners in a cut-paper language
- an inflated mid-scale that makes a page read zoomed-in
- a third mixed ink, or a gradient standing in for an overprint

### Visual Character

- two spot inks on bone stock with a bottle-green overprint wherever they cross (mix-blend-mode: multiply)
- a halftone dot screen on ink fields, faded to nothing behind copy
- hard un-blurred offset impressions (4px at rest, 7px picked up) instead of shadows
- knockouts: shapes and letterforms punched to bare paper as the brightest value
- border-radius 0 on every element, poster-scale uppercase display, mono job-ticket furniture at 11.5–12.5px

### Lineage

> A reimagining of Risograph Spot-Color Editorial that keeps its spot-ink, screen and poster-scale soul while replacing the offset-headline device with an overprint-and-knockout mechanic drawn from two-colour screenprinting and the French affiche tradition.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#f0e9d6` |
| surface | `#fdfaef` |
| surface_solid | `#ffffff` |
| text | `#15150f` |
| muted | `#4f4b3d` |
| border | `#15150f` |
| accent | `#02707f` |
| accent_2 | `#ffd12b` |
| accent_soft | `#0b4a3a` |
| on_accent | `#fdfaef` |
| success | `#0b4a3a` |
| warning | `#8a5a00` |
| error | `#9b2418` |
| info | `#02707f` |

### Typography

- **Base Size**: 17px
- **Body Font**: Instrument Sans
- **Heading Font**: Staatliches
- **Mono Font**: DM Mono
- **Heading Weight**: 400
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.6
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Sans:wght@400;500&family=Staatliches&display=swap

### Radii

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

### Shadows

- **Sm**: 2px 2px 0 rgba(21,21,15,0.14)
- **Md**: 4px 4px 0 #ffd12b
- **Lg**: 9px 9px 0 rgba(2,112,127,0.28)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: bone sheets sitting on a deeper press-bed ground, separated by value and generous margin, never outlined and never blurred
- **Bg Pattern**: halftone dot screen on ink fills, quieted to nothing wherever copy sits

### Borders

- **Default Width**: 0
- **Accent Width**: 2px
- **Style**: solid
- **Character**: horizontal poster rules only — full-measure ink rules separating bands, and hairlines between table rows; never a card outline, never a vertical edge rail

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: one press cycle: the plate travels, lands, and settles on an easing tail — a fast approach with a soft finish, never a bounce

### Radius Stance

0 everywhere. The allowed set {0,16,24,9999} is a palette; this language uses only 0, because every shape in it is cut.

## Rules

### Composition

Compose pages as printed sheets on a press bed: one full-bleed plate with display type placed into its quiet region, then bands of bone sheets separated by value alone. Asymmetry is welcome; outlines are not. Every band has one focal point and a quiet ground under its copy.

### Hierarchy

Two ends and almost no middle. Uppercase Staatliches display carries the poster moments; Instrument Sans at exactly 17px regular carries everything you read; DM Mono at 11.5–12.5px carries run numbers, ink codes and register readings. Ledes stop at 20px and the whole mid-tier compresses toward body scale.

### Density

Medium. Generous margins and poster-scaled vertical rhythm between bands; tight, tabular spacing inside a sheet. Never a crowded cluster beside a starved void.

### Signature Patterns

- the second pull: rest carries one plate, hover lands the second plate 3px off register, active drives it to 1px, selection knocks the shape out to bare paper
- overprint by multiply: overlapping ink layers use mix-blend-mode multiply so the third colour is computed by the page at the overlap
- register as a live reading: the offset is shown as a number in mm and, on the landing, driven by the pointer
- dot gain: halftone screens coarsen under pressure, so the same field reads as a photograph at 10px and a countable grid at 110px
- ink-keyed status: severity and progress are carried by which ink a chip, dot or meter is printed in, never by a rail on an element's edge

## Layout

### Grid

A 12-column editorial grid on desktop collapsing to 8 at tablet and 4 on mobile, with full-bleed plates spanning 100vw and contained content capped at 1500px and centred on ultra-wide.

### Breakpoints

mobile: 0-767px, tablet: 768-1099px, desktop: 1100px+, wide: 1600px+

### Whitespace

Generous outer margins and poster-scaled space between bands; always pad above a title; compress spacing inside a sheet so tables and job tickets stay dense and legible.

## Guidance

### Do

- build every surface from exactly two ink passes plus the stock
- let the overprint green appear only where the two plates actually cross
- express state as a printing event: plate down, plate off register, knocked out
- keep the halftone screen visible on large fills and quiet it to nothing under copy
- set every number in mono on tabular numerals
- separate surfaces by value — the sheet is brighter than the bed

### Don't

- outline a card, or hang a coloured rail on any edge of one
- set type in marigold, or place small accent text over imagery
- round anything
- introduce a third mixed ink, a gradient, or a blurred shadow
- inflate the middle of the type scale
- trap navigation in a pill or a floating bar

## Imagery Direction

### Pairs With

emulsion

### Illustration Style

Two-ink screenprints on bone stock: flat hard-edged cut shapes with no internal shading, a coarse halftone carrying every mid-tone, and plates laid a hair off register so a sliver of the under-ink shows along contours.

### Hero Image Direction

One full-bleed plate whose composition reserves a large quiet region — a flat ink sky, an empty deck, an open water band — for the display type. The type is placed into that region rather than scrimmed over a busy one.

### Icon Style

Inline SVG at 2px stroke in currentColor; square terminals; no filled pictograms and no emoji.

### Image Gen Prompts

- A working harbour at low tide with gantry cranes over a moored trawler — a two-ink screenprint on bone-white uncoated paper, aqua teal and marigold yellow printed one plate after the other, overlaps multiplying into deep bottle green, flat hard-edged cut shapes, coarse halftone mid-tones, plates a hair off register, generous bare-paper sky. NO text, NO letters, NO logos
- A woman in a knotted headscarf looking back over her shoulder — same two-ink screenprint technique, generous bare-paper negative space around the head. NO text, NO letters, NO logos

---
version: "alpha"
name: "Affiche"
description: "Affiche is a two-ink poster language for interfaces: every surface is exactly two spot passes on bone stock, the overlap of the two plates computes a third colour, and a knockout is the absence of both. State, hierarchy and emphasis are..."
colors:
  bg: "#f0e9d6"
  surface: "#fdfaef"
  surface_solid: "#ffffff"
  text: "#15150f"
  muted: "#4f4b3d"
  border: "#15150f"
  accent: "#02707f"
  accent_2: "#ffd12b"
  accent_soft: "#0b4a3a"
  on_accent: "#fdfaef"
  success: "#0b4a3a"
  warning: "#8a5a00"
  error: "#9b2418"
  info: "#02707f"
typography:
  headline-lg:
    fontFamily: "Staatliches"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Staatliches"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "DM 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: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  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_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  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"
---

# Affiche

## Overview

Affiche is a two-ink poster language for interfaces: every surface is exactly two spot passes on bone stock, the overlap of the two plates computes a third colour, and a knockout is the absence of both. State, hierarchy and emphasis are all decisions about which plates are down and how far off true the second one landed.

### Values

- two inks plus the stock, and nothing mixed in a bucket
- state expressed as a printing event rather than as decoration
- square geometry throughout, because everything here is cut
- depth as a second impression with zero blur
- a quiet ground under every line of copy, however loud the plates get

### Anti-Values

- glass, blur and glow
- a coloured rail on the edge of a card
- rounded corners in a cut-paper language
- an inflated mid-scale that makes a page read zoomed-in
- a third mixed ink, or a gradient standing in for an overprint

### Visual Character

- two spot inks on bone stock with a bottle-green overprint wherever they cross (mix-blend-mode: multiply)
- a halftone dot screen on ink fields, faded to nothing behind copy
- hard un-blurred offset impressions (4px at rest, 7px picked up) instead of shadows
- knockouts: shapes and letterforms punched to bare paper as the brightest value
- border-radius 0 on every element, poster-scale uppercase display, mono job-ticket furniture at 11.5–12.5px

### Lineage

> A reimagining of Risograph Spot-Color Editorial that keeps its spot-ink, screen and poster-scale soul while replacing the offset-headline device with an overprint-and-knockout mechanic drawn from two-colour screenprinting and the French affiche tradition.

## 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 | `#f0e9d6` |
| surface | `#fdfaef` |
| surface_solid | `#ffffff` |
| text | `#15150f` |
| muted | `#4f4b3d` |
| border | `#15150f` |
| accent | `#02707f` |
| accent_2 | `#ffd12b` |
| accent_soft | `#0b4a3a` |
| on_accent | `#fdfaef` |
| success | `#0b4a3a` |
| warning | `#8a5a00` |
| error | `#9b2418` |
| info | `#02707f` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Sans:wght@400;500&family=Staatliches&display=swap

- **Headline-Lg**: Staatliches, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Staatliches, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Instrument Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: DM 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**: `64px`
- **Step-8**: `96px`

### Grid

A 12-column editorial grid on desktop collapsing to 8 at tablet and 4 on mobile, with full-bleed plates spanning 100vw and contained content capped at 1500px and centred on ultra-wide.

### Breakpoints

mobile: 0-767px, tablet: 768-1099px, desktop: 1100px+, wide: 1600px+

### Whitespace

Generous outer margins and poster-scaled space between bands; always pad above a title; compress spacing inside a sheet so tables and job tickets stay dense and legible.

## Elevation & Depth

### Shadows

- **Sm**: 2px 2px 0 rgba(21,21,15,0.14)
- **Md**: 4px 4px 0 #ffd12b
- **Lg**: 9px 9px 0 rgba(2,112,127,0.28)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: bone sheets sitting on a deeper press-bed ground, separated by value and generous margin, never outlined and never blurred
- **Bg Pattern**: halftone dot screen on ink fills, quieted to nothing wherever copy sits

### Borders

- **Default Width**: 0
- **Accent Width**: 2px
- **Style**: solid
- **Character**: horizontal poster rules only — full-measure ink rules separating bands, and hairlines between table rows; never a card outline, never a vertical edge rail

## Components

### Composition

Compose pages as printed sheets on a press bed: one full-bleed plate with display type placed into its quiet region, then bands of bone sheets separated by value alone. Asymmetry is welcome; outlines are not. Every band has one focal point and a quiet ground under its copy.

### Hierarchy

Two ends and almost no middle. Uppercase Staatliches display carries the poster moments; Instrument Sans at exactly 17px regular carries everything you read; DM Mono at 11.5–12.5px carries run numbers, ink codes and register readings. Ledes stop at 20px and the whole mid-tier compresses toward body scale.

### Density

Medium. Generous margins and poster-scaled vertical rhythm between bands; tight, tabular spacing inside a sheet. Never a crowded cluster beside a starved void.

### Signature Patterns

- the second pull: rest carries one plate, hover lands the second plate 3px off register, active drives it to 1px, selection knocks the shape out to bare paper
- overprint by multiply: overlapping ink layers use mix-blend-mode multiply so the third colour is computed by the page at the overlap
- register as a live reading: the offset is shown as a number in mm and, on the landing, driven by the pointer
- dot gain: halftone screens coarsen under pressure, so the same field reads as a photograph at 10px and a countable grid at 110px
- ink-keyed status: severity and progress are carried by which ink a chip, dot or meter is printed in, never by a rail on an element's edge

## 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-019ffc43-1a16-7f20-aeac-15b6de748608/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-019ffc43-1a16-7f20-aeac-15b6de748608/shadcn.json` (registry theme), `/language/en-019ffc43-1a16-7f20-aeac-15b6de748608/shadcn-components.md` (component recipes) and `/language/en-019ffc43-1a16-7f20-aeac-15b6de748608/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 every surface from exactly two ink passes plus the stock
- Do let the overprint green appear only where the two plates actually cross
- Do express state as a printing event: plate down, plate off register, knocked out
- Do keep the halftone screen visible on large fills and quiet it to nothing under copy
- Do set every number in mono on tabular numerals
- Do separate surfaces by value — the sheet is brighter than the bed
- Don't outline a card, or hang a coloured rail on any edge of one
- Don't set type in marigold, or place small accent text over imagery
- Don't round anything
- Don't introduce a third mixed ink, a gradient, or a blurred shadow
- Don't inflate the middle of the type scale
- Don't trap navigation in a pill or a floating bar

## Imagery Direction

### Pairs With

emulsion

### Illustration Style

Two-ink screenprints on bone stock: flat hard-edged cut shapes with no internal shading, a coarse halftone carrying every mid-tone, and plates laid a hair off register so a sliver of the under-ink shows along contours.

### Hero Image Direction

One full-bleed plate whose composition reserves a large quiet region — a flat ink sky, an empty deck, an open water band — for the display type. The type is placed into that region rather than scrimmed over a busy one.

### Icon Style

Inline SVG at 2px stroke in currentColor; square terminals; no filled pictograms and no emoji.

### Image Gen Prompts

- A working harbour at low tide with gantry cranes over a moored trawler — a two-ink screenprint on bone-white uncoated paper, aqua teal and marigold yellow printed one plate after the other, overlaps multiplying into deep bottle green, flat hard-edged cut shapes, coarse halftone mid-tones, plates a hair off register, generous bare-paper sky. NO text, NO letters, NO logos
- A woman in a knotted headscarf looking back over her shoulder — same two-ink screenprint technique, generous bare-paper negative space around the head. NO text, NO letters, NO logos

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "affiche",
  "type": "registry:theme",
  "title": "Affiche shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f0e9d6",
      "foreground": "#15150f",
      "card": "#fdfaef",
      "card-foreground": "#15150f",
      "popover": "#fdfaef",
      "popover-foreground": "#15150f",
      "primary": "#15150f",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#4f4b3d",
      "muted-foreground": "#15150f",
      "accent": "#02707f",
      "accent-foreground": "#ffffff",
      "destructive": "#9b2418",
      "border": "#15150f",
      "input": "#15150f",
      "ring": "#02707f",
      "chart-1": "#15150f",
      "chart-2": "#f4f4f5",
      "chart-3": "#02707f",
      "chart-4": "#0b4a3a",
      "chart-5": "#8a5a00",
      "sidebar": "#fdfaef",
      "sidebar-foreground": "#15150f",
      "sidebar-primary": "#15150f",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#02707f",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#15150f",
      "sidebar-ring": "#02707f",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#15150f",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#02707f",
      "accent-foreground": "#ffffff",
      "destructive": "#9b2418",
      "border": "#303642",
      "input": "#303642",
      "ring": "#02707f",
      "chart-1": "#15150f",
      "chart-2": "#f4f4f5",
      "chart-3": "#02707f",
      "chart-4": "#0b4a3a",
      "chart-5": "#8a5a00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#15150f",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#02707f",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#02707f",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ffc43-1a16-7f20-aeac-15b6de748608",
    "slug": "affiche",
    "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_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```