Signal Press

# Signal Press

## Philosophy

Signal Press is a publication-first interface language: a risograph quarterly translated to screen. It treats the page like a press floor — the grid stays visible, headlines hit blunt and oversized, every label reads like a strip of tape pulled off a proof, and one fluorescent ink sits slightly out of register over the black. Anti-polish, editorial, and built like printed matter.

### Values

- Editorial hierarchy is immediate and forceful: covers, decks, side notes, and issue labels behave like print matter translated to screen.
- Material roughness is a feature: visible rules, registration offset, photocopy grain, hard crops, and tape-label motifs make production artifacts part of the identity.
- Utility and expression coexist: forms, filters, navigation, and reading tools stay usable while inheriting the raw typographic and structural language of the feature content.
- Asymmetry and interruption sharpen hierarchy and pacing, exposing the grid as a compositional device rather than hiding it.

### Anti-Values

- Soft SaaS polish, glassmorphism, and luxury gradients that erase the sense of printed matter.
- Neutral component-library layouts where every card, button, and panel shares the same generic rounded-box treatment.
- Using the second ink as an ambient background wash or glow instead of as deliberate spot ink.
- A clean white SaaS ground; Signal Press lives on warm cream pulp.

### Visual Character

- Oversized condensed/expanded Archivo headlines sit inside rigid black rule frameworks, paired with small uppercase IBM Plex Mono metadata strips that read like pasted production labels.
- Cards and panels use thick 3px black frames, square corners, and an offset fluorescent backplate so each block reads like an overprinted poster mounted on the page.
- Page sections expose the grid with asymmetric columns, broad gutters, vertical rule dividers, and marginal annotation rails instead of hiding structure behind seamless masonry.
- Images appear as harsh editorial crops with grayscale/duotone treatment, photocopy grain, caption bars, and corner crop marks that mimic scanned print layouts.
- Accent colour is used like spot ink or marker — fluorescent orange and acid lime — in abrupt slashes, label strips, and pull-quote highlights, never smooth fills or glows.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#f1ede3` |
| surface | `#fffdf8` |
| surface_2 | `#e7e1d3` |
| text | `#111111` |
| muted | `#5f5a52` |
| border | `#101010` |
| accent | `#ff5a1f` |
| accent_2 | `#c8f000` |
| on_accent | `#0a0a0a` |
| success | `#18794e` |
| warning | `#d97904` |
| error | `#c92a2a` |
| info | `#0b7285` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 900
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 4px 4px 0 #101010
- **Md**: 8px 8px 0 #101010
- **Lg**: 12px 12px 0 #101010
- **Philosophy**: Hard offset plates, never soft blur. Depth is misregistration, not elevation.

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Off-white proof-paper panels on a warm cream ground, with photocopy grain overlay, square 3px black frames, and an offset fluorescent backplate for overprint energy.
- **Bg Pattern**: exposed-grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: Heavy print-shop rules, square-corner frames, divider bars, and tape-label outlines are a primary visual ingredient, not a finishing detail.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: Snappy and mechanical. The settled state is the default (visible with no JS); motion is layered on top and respects prefers-reduced-motion.

## Rules

### Composition

Compose pages like issue covers and feature spreads: anchor the screen with one dominant headline block, support it with stacked metadata bands and tape labels, then break the grid with secondary stories, pull quotes, and utility panels that feel pinned into place. Major regions read as editorial modules, not generic product cards.

### Hierarchy

Hierarchy comes from scale contrast, border weight, label treatment, and abrupt column shifts. Headlines are dramatically larger than body text; mono annotations and issue numerals create intermediate layers; captions and controls stay smaller but high-contrast and boxed.

### Density

Moderately dense. Pack the page with information and visible navigation, but preserve reading rhythm through disciplined spacing bands, strong dividers, and clear module separation.

### Signature

Every major panel is a square 3px black plate with an offset fluorescent backplate (orange or acid lime), creating deliberate misregistration and overprint energy. Section headers combine giant Archivo uppercase with a rule stack and a small mono kicker; metadata and labels sit in bordered mono tape strips; imagery is wrapped with crop marks, grain, and caption bars; and the layout exposes editorial rails — vertical dividers, asymmetric spans, and margin notes.

## Layout

### Grid

Desktop uses a 12-column editorial grid with a persistent utility rail and flexible feature spans; tablet reduces to a two-column stack with the rail converting to a toolbar; mobile becomes a single-column feed with preserved label strips and full-width modules.

### Whitespace

Disciplined rather than airy: tight internal padding for labels and controls, larger band spacing between editorial modules, deliberate gutters that keep the exposed grid legible.

### Density

Moderately dense, information-rich, with clear module separation.

### Responsive

Grids use minmax(0,1fr) + min-width:0 so children shrink instead of overflowing; from ~390px mobile to 2560px+ ultra-wide the contained content caps and centres while only the full-bleed hero spans 100vw.

### Breakpoints

- **Desktop**: 1440px and above — masthead, feature well, and utility rail.
- **Tablet**: 768px to 1439px — feature and secondary modules stack to two columns; the rail becomes a horizontal toolbar.
- **Mobile**: 390px to 767px — single-column flow, headline first, controls and metrics stacked, full-width buttons.

## Guidance

### Do

- Use Archivo display type for headlines and issue numbers, with IBM Plex Mono labels for metadata, controls, and wayfinding.
- Keep borders heavy, corners square, and module layering visible through offset plates, rule dividers, crop marks, and caption bars.
- Treat imagery as editorial material: crop aggressively, add captions, and let photocopy grain or duotone reinforce the publication feel.
- Design complete reading scenes — filters, subscription prompts, issue navigation, article modules — instead of isolated component catalogs.

### Don't

- Do not soften the system with pill buttons, large radii, glass cards, or gradient washes.
- Do not rely on neutral product-dashboard composition where all blocks have equal weight and the page loses cover-line hierarchy.
- Do not use the second ink as a background fill or ambient glow — it is spot ink, one idea per block.
- Do not hide the grid under excessive spacing; the structure stays visibly authored and editorial.

### Accessibility

High contrast everywhere: near-black ink on cream pulp and proof-white. Spot inks (orange #ff5a1f, lime #c8f000) carry black text on their fills for AA contrast. Every form control is explicitly styled with a visible focus ring; motion respects prefers-reduced-motion; the fully-rendered state is visible with no JavaScript.

## Imagery Direction

### Pairs With

overprint

### Summary

Misregistered two-spot risograph / photocopy overprint on grainy off-white stock: bold coarse halftone dot screens, thick black contour linework, one fluorescent plate shifted out of register, xerox grain, treated as printed matter rather than glossy media.

### Subjects

- printed ephemera and zine spreads
- press machinery and roller cylinders
- hands at the proofing bench
- metal type specimens
- taped layout sheets with crop marks
- documentary street and desk crops

### Usage

Hero and feature imagery are full-frame overprint crops driven by background-image: var(--hero-image). Frame media like a copied poster or spread with caption rails and registration marks; keep grayscale/duotone treatment with the orange plate screening over it.

---
version: "alpha"
name: "Signal Press"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#f1ede3"
  surface: "#fffdf8"
  surface_2: "#e7e1d3"
  text: "#111111"
  muted: "#5f5a52"
  border: "#101010"
  accent: "#ff5a1f"
  accent_2: "#c8f000"
  on_accent: "#0a0a0a"
  success: "#18794e"
  warning: "#d97904"
  error: "#c92a2a"
  info: "#0b7285"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  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_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: "#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"
---

# Signal Press

## Overview

Signal Press is a publication-first interface language: a risograph quarterly translated to screen. It treats the page like a press floor — the grid stays visible, headlines hit blunt and oversized, every label reads like a strip of tape pulled off a proof, and one fluorescent ink sits slightly out of register over the black. Anti-polish, editorial, and built like printed matter.

### Values

- Editorial hierarchy is immediate and forceful: covers, decks, side notes, and issue labels behave like print matter translated to screen.
- Material roughness is a feature: visible rules, registration offset, photocopy grain, hard crops, and tape-label motifs make production artifacts part of the identity.
- Utility and expression coexist: forms, filters, navigation, and reading tools stay usable while inheriting the raw typographic and structural language of the feature content.
- Asymmetry and interruption sharpen hierarchy and pacing, exposing the grid as a compositional device rather than hiding it.

### Anti-Values

- Soft SaaS polish, glassmorphism, and luxury gradients that erase the sense of printed matter.
- Neutral component-library layouts where every card, button, and panel shares the same generic rounded-box treatment.
- Using the second ink as an ambient background wash or glow instead of as deliberate spot ink.
- A clean white SaaS ground; Signal Press lives on warm cream pulp.

### Visual Character

- Oversized condensed/expanded Archivo headlines sit inside rigid black rule frameworks, paired with small uppercase IBM Plex Mono metadata strips that read like pasted production labels.
- Cards and panels use thick 3px black frames, square corners, and an offset fluorescent backplate so each block reads like an overprinted poster mounted on the page.
- Page sections expose the grid with asymmetric columns, broad gutters, vertical rule dividers, and marginal annotation rails instead of hiding structure behind seamless masonry.
- Images appear as harsh editorial crops with grayscale/duotone treatment, photocopy grain, caption bars, and corner crop marks that mimic scanned print layouts.
- Accent colour is used like spot ink or marker — fluorescent orange and acid lime — in abrupt slashes, label strips, and pull-quote highlights, never smooth fills or glows.

## 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 | `#e7e1d3` |
| text | `#111111` |
| muted | `#5f5a52` |
| border | `#101010` |
| accent | `#ff5a1f` |
| accent_2 | `#c8f000` |
| on_accent | `#0a0a0a` |
| success | `#18794e` |
| warning | `#d97904` |
| error | `#c92a2a` |
| info | `#0b7285` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.55.
- **Label-Md**: IBM Plex 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

Desktop uses a 12-column editorial grid with a persistent utility rail and flexible feature spans; tablet reduces to a two-column stack with the rail converting to a toolbar; mobile becomes a single-column feed with preserved label strips and full-width modules.

### Whitespace

Disciplined rather than airy: tight internal padding for labels and controls, larger band spacing between editorial modules, deliberate gutters that keep the exposed grid legible.

### Density

Moderately dense, information-rich, with clear module separation.

### Responsive

Grids use minmax(0,1fr) + min-width:0 so children shrink instead of overflowing; from ~390px mobile to 2560px+ ultra-wide the contained content caps and centres while only the full-bleed hero spans 100vw.

### Breakpoints

- **Desktop**: 1440px and above — masthead, feature well, and utility rail.
- **Tablet**: 768px to 1439px — feature and secondary modules stack to two columns; the rail becomes a horizontal toolbar.
- **Mobile**: 390px to 767px — single-column flow, headline first, controls and metrics stacked, full-width buttons.

## Elevation & Depth

### Shadows

- **Sm**: 4px 4px 0 #101010
- **Md**: 8px 8px 0 #101010
- **Lg**: 12px 12px 0 #101010
- **Philosophy**: Hard offset plates, never soft blur. Depth is misregistration, not elevation.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Off-white proof-paper panels on a warm cream ground, with photocopy grain overlay, square 3px black frames, and an offset fluorescent backplate for overprint energy.
- **Bg Pattern**: exposed-grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: Heavy print-shop rules, square-corner frames, divider bars, and tape-label outlines are a primary visual ingredient, not a finishing detail.

## Components

### Composition

Compose pages like issue covers and feature spreads: anchor the screen with one dominant headline block, support it with stacked metadata bands and tape labels, then break the grid with secondary stories, pull quotes, and utility panels that feel pinned into place. Major regions read as editorial modules, not generic product cards.

### Hierarchy

Hierarchy comes from scale contrast, border weight, label treatment, and abrupt column shifts. Headlines are dramatically larger than body text; mono annotations and issue numerals create intermediate layers; captions and controls stay smaller but high-contrast and boxed.

### Density

Moderately dense. Pack the page with information and visible navigation, but preserve reading rhythm through disciplined spacing bands, strong dividers, and clear module separation.

### Signature

Every major panel is a square 3px black plate with an offset fluorescent backplate (orange or acid lime), creating deliberate misregistration and overprint energy. Section headers combine giant Archivo uppercase with a rule stack and a small mono kicker; metadata and labels sit in bordered mono tape strips; imagery is wrapped with crop marks, grain, and caption bars; and the layout exposes editorial rails — vertical dividers, asymmetric spans, and margin notes.

## 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-019efa16-1de4-7ed3-9a70-8fb135ef8bc4/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 Use Archivo display type for headlines and issue numbers, with IBM Plex Mono labels for metadata, controls, and wayfinding.
- Do Keep borders heavy, corners square, and module layering visible through offset plates, rule dividers, crop marks, and caption bars.
- Do Treat imagery as editorial material: crop aggressively, add captions, and let photocopy grain or duotone reinforce the publication feel.
- Do Design complete reading scenes — filters, subscription prompts, issue navigation, article modules — instead of isolated component catalogs.
- Don't Do not soften the system with pill buttons, large radii, glass cards, or gradient washes.
- Don't Do not rely on neutral product-dashboard composition where all blocks have equal weight and the page loses cover-line hierarchy.
- Don't Do not use the second ink as a background fill or ambient glow — it is spot ink, one idea per block.
- Don't Do not hide the grid under excessive spacing; the structure stays visibly authored and editorial.

### Accessibility

High contrast everywhere: near-black ink on cream pulp and proof-white. Spot inks (orange #ff5a1f, lime #c8f000) carry black text on their fills for AA contrast. Every form control is explicitly styled with a visible focus ring; motion respects prefers-reduced-motion; the fully-rendered state is visible with no JavaScript.

## Imagery Direction

### Pairs With

overprint

### Summary

Misregistered two-spot risograph / photocopy overprint on grainy off-white stock: bold coarse halftone dot screens, thick black contour linework, one fluorescent plate shifted out of register, xerox grain, treated as printed matter rather than glossy media.

### Subjects

- printed ephemera and zine spreads
- press machinery and roller cylinders
- hands at the proofing bench
- metal type specimens
- taped layout sheets with crop marks
- documentary street and desk crops

### Usage

Hero and feature imagery are full-frame overprint crops driven by background-image: var(--hero-image). Frame media like a copied poster or spread with caption rails and registration marks; keep grayscale/duotone treatment with the orange plate screening over it.

```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": "#5f5a52",
      "muted-foreground": "#111111",
      "accent": "#ff5a1f",
      "accent-foreground": "#ffffff",
      "destructive": "#c92a2a",
      "border": "#101010",
      "input": "#101010",
      "ring": "#ff5a1f",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#ff5a1f",
      "chart-4": "#18794e",
      "chart-5": "#d97904",
      "sidebar": "#fffdf8",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0b7285",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#101010",
      "sidebar-ring": "#ff5a1f",
      "radius": "0"
    },
    "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": "#ff5a1f",
      "accent-foreground": "#ffffff",
      "destructive": "#c92a2a",
      "border": "#303642",
      "input": "#303642",
      "ring": "#ff5a1f",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#ff5a1f",
      "chart-4": "#18794e",
      "chart-5": "#d97904",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#ff5a1f",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#ff5a1f",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa16-1de4-7ed3-9a70-8fb135ef8bc4",
    "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",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "philosophy",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```