Signal Press

# Signal Press

## Philosophy

Signal Press is a publication-first interface language: a risograph quarterly translated to screen. The page is a press floor. Black prints first on cream pulp, and one fluorescent ink, orange or acid lime, lands a few millimetres off the black plate, so every loud word and every block shows how it was made. Headlines are wide and blunt, copy is plain, controls and metadata are set in a mono, and nothing is framed: plates are solid, square and unequal, parted by tint and space. Built like printed matter, anti-polish, and honest about its offsets.

### Values

- One idea per spread: the second ink marks a single thing in a view, and it sits out of register on purpose.
- Misregistration is measured, not faked: the plate offsets are printed as millimetres in a ledger and left uncorrected.
- Plates, not cards: solid square surfaces in unequal widths, separated by tint and space, never by a line, bar or stripe on a side.
- A wide face for the cover line, a plain face for reading and a mono for what the machine says keeps three voices easy to tell apart.
- The settled page is the page: it renders complete with no JavaScript, and motion only confirms a touch.

### Anti-Values

- Frames, offset backplates, hard shadows and tape-label strips around blocks, and a coloured line on the top or side of a card.
- The second ink as a background wash, a glow or small text on cream.
- Soft SaaS polish: rounded corners, glass, gradients and equal-weight product cards.
- Eyebrow chips, form-number labels and colophon footers that decorate the page without saying anything.
- Text in a plain box over the hero picture.

### Visual Character

- Cream pulp #F1EDE3 ground, proof-white #FFFDF8 plates and key-black #111111 ink, flat, with no grain, gradient or frame.
- Wide heavy uppercase display in Lexend Zetta 900 at -0.04em, with one second-ink word out of register by a hard 4px 3px black shadow.
- Three plates out of register, a black frame, an orange plate and an acid-lime plate multiplied, each shifted by measured millimetres.
- A black masthead with the orange plate showing 6px beneath it, and a black table header and toast that echo it.
- Mono for the machine: Nanum Gothic Coding uppercase at 0.06em on buttons, nav, labels and ledger rows, with a 2px ink rule between rows.
- Where two inks cross they darken (multiply), so overprint, not shadow, shows what sits over what.
- Pictures as full-frame overprint crops with a calm paper area: one near-black plate, one ink shifted off it.

### Lineage

> Revised in place from the live Signal Press (en-019efa16-1de4-7ed3-9a70-8fb135ef8bc4) using arni's approved round 9 take, signal-press-i. It keeps the cream, orange, lime and black, the wide uppercase headlines with a misregistered second-ink word, the mono metadata and the Overprint pairing, and drops the 3px frames, offset backplates and tape labels.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F1EDE3` |
| surface | `#FFFDF8` |
| surface_2 | `#E6DFCD` |
| text | `#111111` |
| muted | `#55504A` |
| border | `#111111` |
| accent | `#E8460F` |
| accent_2 | `#C8F000` |
| on_accent | `#111111` |
| success | `#3D6B00` |
| warning | `#8A5A00` |
| error | `#A31621` |
| info | `#111111` |

### Typography

- **Heading Font**: Lexend Zetta
- **Body Font**: Merriweather Sans
- **Mono Font**: Nanum Gothic Coding
- **Heading Weight**: 900
- **Body Weight**: 400
- **Button Weight**: 700
- **Mono Weight**: 400; 700 for buttons, labels, the ledger header and values
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.04em on cover lines and section heads; -0.03em on plate titles; 0.06em on mono buttons, labels and table headers
- **Base Size**: 17px
- **Line Height**: 1.65
- **Scale**: ["17px","19px","20px","26px","54px","84px"]
- **Scale Note**: Cover line clamp(40px, 5.4vw, 84px); section head clamp(30px, 3.6vw, 54px); plate title clamp(20px, 1.7vw, 26px); the wordmark is 20px; buttons and ledes 19px; body, mono and table rows 17px.
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Lexend+Zetta:wght@600;900&family=Merriweather+Sans:wght@400;700&family=Nanum+Gothic+Coding:wght@400;700&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 0px

### Shadows

- **Headline**: 4px 3px 0 #111111 as a text-shadow on the second-ink word of a head, and nowhere else
- **None**: Plates, buttons, fields, menus and dialogs are flat. Depth is overprint: where two inks cross they multiply to a darker third.
- **Philosophy**: Misregistration is the only offset. A block never carries a hard shadow, backplate or edge.

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","96px"]
- **Section**: 56 to 112px between bands, scaling with the viewport

### Surfaces

- **Treatment**: uncoated-stock-under-two-inks
- **Card Style**: Unframed plates: a solid proof-white or cream surface, square, with no border, no stripe, no bar and no offset backplate on any side. Plates are unequal (5:4:3) and parted by tint and space.
- **Wells**: Fields, tracks, tabs at rest and unchecked boxes are tint #E6DFCD wells on cream or proof white.
- **Layers**: A menu and a toast are black plates with cream type; a dialog is proof white on a black scrim.
- **Bg Pattern**: none; the ground is flat cream pulp with no grain or gradient

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, frames or outlines on blocks, fields or buttons. The only lines are the 2px key-black rule between rows of a ledger or table, and the 6px orange plate that shows under the masthead. Focus is a 3px ink ring at 3px offset.

### Motion

- **Duration**: 150 to 200ms
- **Easing**: ease
- **Philosophy**: Snappy and mechanical. A button swaps plates on hover (orange to black, black to orange), shifts 2px on press, and a link sweeps lime behind its words. The settled page renders with no JavaScript and prefers-reduced-motion removes every transition.

### Controls

- **Height**: 56px (44 small, 72 large)
- **Radius**: 0px
- **Well Height**: 56px
- **Toggle**: 28px square checkbox and radio; 64 by 32px switch with a 24px square knob

## Rules

### Composition

- Open with a black masthead whose orange plate shows 6px beneath it, then one full-bleed overprint picture with the headline set straight on its calm paper area, with no box or scrim.
- Below the picture, alternate bands of cream pulp, proof white and tint with content capped at 1344 to 1440px and centred; a band changes ground only when it changes subject.
- Set modules as unframed plates in unequal widths (5:4:3), parted by tint and space; never put a line, bar, stripe or offset backplate on any side of a block.
- Give each view one orange action; lime marks one idea; a second action is a black button or a word that sweeps lime.

### Hierarchy

- One wide uppercase cover line per page, 40 to 84px in Lexend Zetta 900; section heads 30 to 54px; the second ink takes at most one word of a head.
- Prose in Merriweather Sans 400 at 17px, with secondary copy in pulp grey #55504A.
- Everything the machine says (buttons, nav, labels, table rows, offsets) is Nanum Gothic Coding at 17 to 19px, uppercase at 0.06em for buttons and labels.
- State is a word on a plate: orange for on press, set green for shipped, black for proofing, tint for out of print; semantic inks appear only as words or that one small status plate, never as a surface.

### Density

Moderate and ruled: 56 to 112px between bands, 12px row padding in ledgers with a 2px ink rule between rows, 16px cell padding in tables, 56px controls.

### Signature Patterns

- Second ink out of register: one word of a head set in orange with a hard black 4px 3px offset, so the plate looks printed a hair off the black.
- Three plates, none square: a black frame, an orange plate and an acid-lime plate multiplied, each shifted by measured millimetres.
- The register ledger: plate offsets written as numbers in millimetres, in rows divided by a 2px ink rule, never corrected.
- Masthead plate: the black masthead with the orange plate showing 6px beneath it.
- Unframed plates: modules as solid square surfaces in unequal widths, with tint and space instead of any edge.
- Overprint multiply: where two inks cross they darken, shown in the ink mixes and the run meter.

## Layout

### Grid

- **Type**: unequal plates on an exposed grid under a full-bleed overprint picture
- **Max Width**: 1440px including side padding (1344px of content at 48px padding), on the landing and the element sheet
- **Gutter**: 48px desktop, 24 to 32px tablet, 16px phone
- **Column Behavior**: Plate rows use minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); two-column heads split a headline and its copy at about 6:5; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 56 to 112px, scaling with the viewport
- **Card Gap**: 24 to 48px between plates; no frames
- **Content Padding**: 16 to 48px side padding; plates pad 20 to 32px
- **Approach**: Tint and space do the separating. The 2px ink rule appears only between rows of a ledger or table.

### Density

- **Default**: moderate
- **Moderate**: {"button_height":"56px","input_height":"56px","row_height":"48 to 56px ledger rows"}

### Responsive

Phones (390px) stack to one column, hide the masthead nav and the table's run, passes and price columns, swap to the portrait picture with the headline above the posters, and make buttons full width. Tablets (601 to 1199px) keep two-column plates with the third plate spanning, and a two-column register. Above 1440px the content caps and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Guidance

### Do

- Set cover lines in Lexend Zetta 900 uppercase and let one word take the orange with its hard black offset.
- Put black type on the orange and lime plates; keep orange type for cover-line sizes on cream or proof white only.
- Make plates solid, square and unequal, and part them with tint and space.
- Print offsets as numbers in millimetres in a ruled ledger, and leave them uncorrected.
- Keep one orange action per view, and make destructive actions a word in error ink with no fill.
- Give every control an explicit well, a 3px ink focus ring and a visible checked, error and disabled state.

### Don't

- Don't put a line, bar, stripe, frame or offset backplate on any side of a card or plate.
- Don't use the second ink as a wash, a glow or small text; don't set orange text on the tint.
- Don't round a corner, add a gradient, glass or a blur shadow.
- Don't print eyebrow chips, form numbers or tape labels as ornament.
- Don't put the headline in a box or on a scrim over the picture.
- Don't underline links with a bare default line without the lime sweep.

### Accessibility

Key black is 16.2:1 on cream #F1EDE3, 18.6:1 on proof white and 14.2:1 on the tint; pulp grey #55504A is 6.8:1 on cream and 6.0:1 on the tint. Black on the orange plate is 4.8:1 and on lime 14.3:1, and cream on black is 16.2:1. Orange on cream is 3.4:1, so orange is only set as 900-weight type at 30px and up, and never on the tint. The semantic inks stay small: as words, success #3D6B00 is 5.4:1, warning #8A5A00 5.1:1 and error #A31621 6.7:1 on cream, and cream type on the set-green status plate is 5.4:1. Focus is a 3px ink ring at 3px offset. Every transition is removed under prefers-reduced-motion, and the settled page renders with no JavaScript.

### Usage Context

Independent publishers, print shops, zines, small-press catalogues, artist merch stores, newsletters and campaign pages for products that want to look made by hand and printed in a hurry, and any product that can show its offsets honestly.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019efa08-7c37-73b3-98b3-ecc83add407b

### Summary

Overprint pictures: a misregistered two-spot risograph and photocopy crop on grainy off-white stock, drawn as coarse halftone screens with one orange or lime plate shifted off a near-black plate, composed with a calm paper area so type sits on plain stock beside the subject.

### Subjects

- fanned risograph posters in orange, lime and black with a hand lifting the top sheet
- press drums and roller cylinders
- hands at the proofing bench
- metal type and taped layout sheets

### Usage

One full-bleed hero per landing painted with var(--hero-image) at background-position right center, with the subject on the right and the calm cream paper area at left carrying the headline straight on the picture. Phones use the portrait plate, with the copy above and the posters at the bottom. The element sheet shows one crop at 21:9 with its caption below, never under copy.

### Avoid

Text baked into the picture, a box, scrim or gradient behind the headline, a ruled frame, tape labels, perfect registration, glossy photography and neon glow.

---
version: "alpha"
name: "Signal Press"
description: "Signal Press is a publication-first interface language: a risograph quarterly translated to screen. The page is a press floor. Black prints first on cream pulp, and one fluorescent ink, orange or acid lime, lands a few millimetres off th..."
colors:
  bg: "#F1EDE3"
  surface: "#FFFDF8"
  surface_2: "#E6DFCD"
  text: "#111111"
  muted: "#55504A"
  border: "#111111"
  accent: "#E8460F"
  accent_2: "#C8F000"
  on_accent: "#111111"
  success: "#3D6B00"
  warning: "#8A5A00"
  error: "#A31621"
  info: "#111111"
typography:
  headline-lg:
    fontFamily: "Lexend Zetta"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Lexend Zetta"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Merriweather Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Nanum Gothic Coding"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  section: "56 to 112px between bands, scaling with the viewport"
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-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"
---

# Signal Press

## Overview

Signal Press is a publication-first interface language: a risograph quarterly translated to screen. The page is a press floor. Black prints first on cream pulp, and one fluorescent ink, orange or acid lime, lands a few millimetres off the black plate, so every loud word and every block shows how it was made. Headlines are wide and blunt, copy is plain, controls and metadata are set in a mono, and nothing is framed: plates are solid, square and unequal, parted by tint and space. Built like printed matter, anti-polish, and honest about its offsets.

### Values

- One idea per spread: the second ink marks a single thing in a view, and it sits out of register on purpose.
- Misregistration is measured, not faked: the plate offsets are printed as millimetres in a ledger and left uncorrected.
- Plates, not cards: solid square surfaces in unequal widths, separated by tint and space, never by a line, bar or stripe on a side.
- A wide face for the cover line, a plain face for reading and a mono for what the machine says keeps three voices easy to tell apart.
- The settled page is the page: it renders complete with no JavaScript, and motion only confirms a touch.

### Anti-Values

- Frames, offset backplates, hard shadows and tape-label strips around blocks, and a coloured line on the top or side of a card.
- The second ink as a background wash, a glow or small text on cream.
- Soft SaaS polish: rounded corners, glass, gradients and equal-weight product cards.
- Eyebrow chips, form-number labels and colophon footers that decorate the page without saying anything.
- Text in a plain box over the hero picture.

### Visual Character

- Cream pulp #F1EDE3 ground, proof-white #FFFDF8 plates and key-black #111111 ink, flat, with no grain, gradient or frame.
- Wide heavy uppercase display in Lexend Zetta 900 at -0.04em, with one second-ink word out of register by a hard 4px 3px black shadow.
- Three plates out of register, a black frame, an orange plate and an acid-lime plate multiplied, each shifted by measured millimetres.
- A black masthead with the orange plate showing 6px beneath it, and a black table header and toast that echo it.
- Mono for the machine: Nanum Gothic Coding uppercase at 0.06em on buttons, nav, labels and ledger rows, with a 2px ink rule between rows.
- Where two inks cross they darken (multiply), so overprint, not shadow, shows what sits over what.
- Pictures as full-frame overprint crops with a calm paper area: one near-black plate, one ink shifted off it.

### Lineage

> Revised in place from the live Signal Press (en-019efa16-1de4-7ed3-9a70-8fb135ef8bc4) using arni's approved round 9 take, signal-press-i. It keeps the cream, orange, lime and black, the wide uppercase headlines with a misregistered second-ink word, the mono metadata and the Overprint pairing, and drops the 3px frames, offset backplates and tape labels.

## 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 | `#F1EDE3` |
| surface | `#FFFDF8` |
| surface_2 | `#E6DFCD` |
| text | `#111111` |
| muted | `#55504A` |
| border | `#111111` |
| accent | `#E8460F` |
| accent_2 | `#C8F000` |
| on_accent | `#111111` |
| success | `#3D6B00` |
| warning | `#8A5A00` |
| error | `#A31621` |
| info | `#111111` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Lexend+Zetta:wght@600;900&family=Merriweather+Sans:wght@400;700&family=Nanum+Gothic+Coding:wght@400;700&display=swap

- **Headline-Lg**: Lexend Zetta, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Lexend Zetta, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Merriweather Sans, 17px, weight 400, line-height 1.65.
- **Label-Md**: Nanum Gothic Coding, 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`
- **Section**: `56 to 112px between bands, scaling with the viewport`

### Grid

- **Type**: unequal plates on an exposed grid under a full-bleed overprint picture
- **Max Width**: 1440px including side padding (1344px of content at 48px padding), on the landing and the element sheet
- **Gutter**: 48px desktop, 24 to 32px tablet, 16px phone
- **Column Behavior**: Plate rows use minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); two-column heads split a headline and its copy at about 6:5; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 56 to 112px, scaling with the viewport
- **Card Gap**: 24 to 48px between plates; no frames
- **Content Padding**: 16 to 48px side padding; plates pad 20 to 32px
- **Approach**: Tint and space do the separating. The 2px ink rule appears only between rows of a ledger or table.

### Density

- **Default**: moderate
- **Moderate**: {"button_height":"56px","input_height":"56px","row_height":"48 to 56px ledger rows"}

### Responsive

Phones (390px) stack to one column, hide the masthead nav and the table's run, passes and price columns, swap to the portrait picture with the headline above the posters, and make buttons full width. Tablets (601 to 1199px) keep two-column plates with the third plate spanning, and a two-column register. Above 1440px the content caps and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Headline**: 4px 3px 0 #111111 as a text-shadow on the second-ink word of a head, and nowhere else
- **None**: Plates, buttons, fields, menus and dialogs are flat. Depth is overprint: where two inks cross they multiply to a darker third.
- **Philosophy**: Misregistration is the only offset. A block never carries a hard shadow, backplate or edge.

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`

### Surfaces

- **Treatment**: uncoated-stock-under-two-inks
- **Card Style**: Unframed plates: a solid proof-white or cream surface, square, with no border, no stripe, no bar and no offset backplate on any side. Plates are unequal (5:4:3) and parted by tint and space.
- **Wells**: Fields, tracks, tabs at rest and unchecked boxes are tint #E6DFCD wells on cream or proof white.
- **Layers**: A menu and a toast are black plates with cream type; a dialog is proof white on a black scrim.
- **Bg Pattern**: none; the ground is flat cream pulp with no grain or gradient

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, frames or outlines on blocks, fields or buttons. The only lines are the 2px key-black rule between rows of a ledger or table, and the 6px orange plate that shows under the masthead. Focus is a 3px ink ring at 3px offset.

## Components

### Composition

- Open with a black masthead whose orange plate shows 6px beneath it, then one full-bleed overprint picture with the headline set straight on its calm paper area, with no box or scrim.
- Below the picture, alternate bands of cream pulp, proof white and tint with content capped at 1344 to 1440px and centred; a band changes ground only when it changes subject.
- Set modules as unframed plates in unequal widths (5:4:3), parted by tint and space; never put a line, bar, stripe or offset backplate on any side of a block.
- Give each view one orange action; lime marks one idea; a second action is a black button or a word that sweeps lime.

### Hierarchy

- One wide uppercase cover line per page, 40 to 84px in Lexend Zetta 900; section heads 30 to 54px; the second ink takes at most one word of a head.
- Prose in Merriweather Sans 400 at 17px, with secondary copy in pulp grey #55504A.
- Everything the machine says (buttons, nav, labels, table rows, offsets) is Nanum Gothic Coding at 17 to 19px, uppercase at 0.06em for buttons and labels.
- State is a word on a plate: orange for on press, set green for shipped, black for proofing, tint for out of print; semantic inks appear only as words or that one small status plate, never as a surface.

### Density

Moderate and ruled: 56 to 112px between bands, 12px row padding in ledgers with a 2px ink rule between rows, 16px cell padding in tables, 56px controls.

### Signature Patterns

- Second ink out of register: one word of a head set in orange with a hard black 4px 3px offset, so the plate looks printed a hair off the black.
- Three plates, none square: a black frame, an orange plate and an acid-lime plate multiplied, each shifted by measured millimetres.
- The register ledger: plate offsets written as numbers in millimetres, in rows divided by a 2px ink rule, never corrected.
- Masthead plate: the black masthead with the orange plate showing 6px beneath it.
- Unframed plates: modules as solid square surfaces in unequal widths, with tint and space instead of any edge.
- Overprint multiply: where two inks cross they darken, shown in the ink mixes and the run meter.

## 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-01a1379b-d952-7ba2-ba44-38a5465214b3/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1379b-d952-7ba2-ba44-38a5465214b3/shadcn.json` (registry theme), `/language/en-01a1379b-d952-7ba2-ba44-38a5465214b3/shadcn-components.md` (component recipes) and `/language/en-01a1379b-d952-7ba2-ba44-38a5465214b3/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 Set cover lines in Lexend Zetta 900 uppercase and let one word take the orange with its hard black offset.
- Do Put black type on the orange and lime plates; keep orange type for cover-line sizes on cream or proof white only.
- Do Make plates solid, square and unequal, and part them with tint and space.
- Do Print offsets as numbers in millimetres in a ruled ledger, and leave them uncorrected.
- Do Keep one orange action per view, and make destructive actions a word in error ink with no fill.
- Do Give every control an explicit well, a 3px ink focus ring and a visible checked, error and disabled state.
- Don't Don't put a line, bar, stripe, frame or offset backplate on any side of a card or plate.
- Don't Don't use the second ink as a wash, a glow or small text; don't set orange text on the tint.
- Don't Don't round a corner, add a gradient, glass or a blur shadow.
- Don't Don't print eyebrow chips, form numbers or tape labels as ornament.
- Don't Don't put the headline in a box or on a scrim over the picture.
- Don't Don't underline links with a bare default line without the lime sweep.

### Accessibility

Key black is 16.2:1 on cream #F1EDE3, 18.6:1 on proof white and 14.2:1 on the tint; pulp grey #55504A is 6.8:1 on cream and 6.0:1 on the tint. Black on the orange plate is 4.8:1 and on lime 14.3:1, and cream on black is 16.2:1. Orange on cream is 3.4:1, so orange is only set as 900-weight type at 30px and up, and never on the tint. The semantic inks stay small: as words, success #3D6B00 is 5.4:1, warning #8A5A00 5.1:1 and error #A31621 6.7:1 on cream, and cream type on the set-green status plate is 5.4:1. Focus is a 3px ink ring at 3px offset. Every transition is removed under prefers-reduced-motion, and the settled page renders with no JavaScript.

### Usage Context

Independent publishers, print shops, zines, small-press catalogues, artist merch stores, newsletters and campaign pages for products that want to look made by hand and printed in a hurry, and any product that can show its offsets honestly.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019efa08-7c37-73b3-98b3-ecc83add407b

### Summary

Overprint pictures: a misregistered two-spot risograph and photocopy crop on grainy off-white stock, drawn as coarse halftone screens with one orange or lime plate shifted off a near-black plate, composed with a calm paper area so type sits on plain stock beside the subject.

### Subjects

- fanned risograph posters in orange, lime and black with a hand lifting the top sheet
- press drums and roller cylinders
- hands at the proofing bench
- metal type and taped layout sheets

### Usage

One full-bleed hero per landing painted with var(--hero-image) at background-position right center, with the subject on the right and the calm cream paper area at left carrying the headline straight on the picture. Phones use the portrait plate, with the copy above and the posters at the bottom. The element sheet shows one crop at 21:9 with its caption below, never under copy.

### Avoid

Text baked into the picture, a box, scrim or gradient behind the headline, a ruled frame, tape labels, perfect registration, glossy photography and neon glow.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "signal-press",
  "type": "registry:theme",
  "title": "Signal Press shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F1EDE3",
      "foreground": "#111111",
      "card": "#FFFDF8",
      "card-foreground": "#111111",
      "popover": "#FFFDF8",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#55504A",
      "muted-foreground": "#111111",
      "accent": "#E8460F",
      "accent-foreground": "#ffffff",
      "destructive": "#A31621",
      "border": "#111111",
      "input": "#111111",
      "ring": "#E8460F",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8460F",
      "chart-4": "#3D6B00",
      "chart-5": "#8A5A00",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-ring": "#E8460F",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E8460F",
      "accent-foreground": "#ffffff",
      "destructive": "#A31621",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E8460F",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8460F",
      "chart-4": "#3D6B00",
      "chart-5": "#8A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E8460F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E8460F",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1379b-d952-7ba2-ba44-38a5465214b3",
    "slug": "signal-press",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "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",
        "scale_note"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "headline",
        "none",
        "philosophy"
      ],
      "spacing": [
        "base",
        "scale",
        "section"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "layers",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "toggle",
        "well_height"
      ]
    }
  }
}
```