Mimeo

# Mimeo

## Philosophy

A confrontational monochrome reproduction language: soot-black ink stamped onto a dirty off-white paper field, with a misregistered offset duplicate as its signature. Hierarchy comes from condensed uppercase type-mass and stamped serials, not colour — a single vermilion register mark is the only highlighter. A faithful refinement of the photocopied-poster / anti-design monochrome idea, brought to standard.

### Values

- Visible construction over seamless illusion
- Type as the primary navigation device
- Utility, tension and directness over comfort
- Leave the registration marks on — a reproduction is never pristine

### Anti-Values

- Soft consumer-app friendliness and rounded comfort
- Colour-led delight that does the work type and structure should do
- Invisible boundaries, floating ambiguity and blurred glass depth

### Visual Character

- Every major container is an off-white paper sheet with a 3px soot-black border and a hard offset black shadow, often nudged a fraction of a degree so modules feel misregistered like stacked print sheets.
- Headlines are oversized condensed uppercase Archivo blocks that dominate the viewport and set scanning order before a word of body copy is read.
- The misregistered offset pass is the signature: a black or vermilion duplicate of a shape shifted a few pixels and rotated slightly behind the original — visible as panel shadows, the ghost layer behind chart bars, and the duplicate slab behind feature cards.
- The ground is a dirty off-white paper field with a faint repeating grid and toner grain, handled and slightly worn rather than digitally pristine.
- Controls are stark, square, 3px-bordered mechanical slabs with stamped mono labels and an inverted black-on-paper focus state carrying a single vermilion register ring.
- Metadata, serials and status chips are compact mono with wide letterspacing, giving every screen a marked-up production-sheet character; one vermilion register mark is the only highlighter.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#ece8df` |
| surface | `#f4f1ea` |
| surface_2 | `#e2ddd1` |
| text | `#111010` |
| ink | `#111010` |
| muted | `#6b6862` |
| border | `#111010` |
| accent | `#b23a1e` |
| on_accent | `#f4f1ea` |
| success | `#3f6b3a` |
| warning | `#9a6a12` |
| error | `#8f2018` |
| info | `#4a4a4a` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 4px 4px 0 #111010
- **Md**: 8px 8px 0 #111010
- **Lg**: 12px 12px 0 #111010
- **Philosophy**: Hard offset black shadows and misregistered duplicate sheets only — never blur, glass, glow or gloss.

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Dirty off-white paper sheets with 3px soot-black ruling lines, a faint grid + toner grain, and hard black offset shadows that read like stacked printed boards; some nudged a fraction of a degree.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 5px
- **Style**: solid
- **Character**: Hard mechanical soot-black borders, always visible, often paired with a misregistered offset duplicate.

### Motion

- **Duration**: 150ms
- **Easing**: cubic-bezier(0.2,0.9,0.2,1)
- **Philosophy**: snappy and mechanical; buttons invert and shift on press; landing reveal is JS-gated over a settled no-JS default; respects prefers-reduced-motion

## Rules

### Composition

Lay screens on an exposed grid — a narrow serial rail, a dominant work area, and stacked support modules — broken by section strips (thick top rule + hard bottom rule + condensed uppercase title + mono serial). Modules are paper sheets with hard offset shadows, some nudged a fraction of a degree to feel misregistered. Compose real application screens, never a component catalogue.

### Hierarchy

Primary hierarchy comes from typographic mass and border weight, not colour. Oversized condensed uppercase headings and stamped mono serials set scanning order before body copy. The single vermilion register mark is a highlighter, never a structural device.

### Density

Medium-high: tightly packed mono metadata, visible dashed separators and structural gutters on an 8px rhythm. Negative space reads as production margin, not luxury padding.

### Signature

The misregistered offset pass — a black or vermilion duplicate of a shape shifted a few pixels and rotated a fraction of a degree behind the original. It appears as every panel's offset shadow, the ghost layer behind chart bars, the duplicate slab behind feature cards, and the slamming hero panel.

## Layout

### Grid

Four-column exposed grid: serial rail, dominant work area, stacked support modules. Tablet collapses to two columns; mobile to a single vertical stack.

### Whitespace

Tight, consistent gutters on an 8px rhythm; negative space is production margin and crop space, not soft luxury padding.

### Density

medium-high

### Responsive

Renders well from 390px mobile to 2560px+ ultra-wide; contained content caps and centres while only the hero spans 100vw; tables collapse to bordered stacked cards; grids use minmax(0,1fr)+min-width:0 so children shrink instead of overflowing.

### Breakpoints

- **Desktop**: 1440+
- **Tablet**: 768-1023
- **Mobile**: 390-767
- **Ultrawide**: 1700+ caps at 1440 contained

## Guidance

### Do

- Lead with oversized condensed uppercase type before any supporting copy.
- Keep 3px borders, dashed rules and hard offset shadows visibly dominant in every module.
- Use the misregistered offset pass as the recurring signature across panels, charts and the hero.
- Treat serials, timestamps and status chips as stamped production metadata in mono.
- Reserve the single vermilion register mark for one accent per region — a highlighter, not a fill field.

### Don't

- Do not round corners (except status chips), blur shadows, or introduce glass/gloss/glow.
- Do not let colour create hierarchy that type and structure should carry.
- Do not centre everything into a balanced startup-dashboard composition.
- Do not leave any browser-default form control unstyled.
- Do not let the misregistration get so chaotic that scanning or interaction breaks.

### Accessibility

Body 17px+, table rows 14.5px+; soot-black on off-white clears AA comfortably. Focus states invert to high-contrast black-on-paper with a vermilion ring; controls are sized to content and evenly padded. Motion respects prefers-reduced-motion and the settled page renders with no JavaScript. No emoji or symbol glyphs in copy — icons are SVG primitives.

## Imagery Direction

### Pairs With

toner

### Summary

High-contrast black-and-white photocopy reproduction built from misregistered stacked print sheets — coarse halftone, toner grain, registration crosshairs and hard ink rules, soot-black on dirty off-white. Imagery fills the frame edge to edge, strictly monochrome, no text.

### Subjects

- duplicator drums and mimeograph machinery
- tall stacks of pulled and pinned paper sheets
- office and print-shop apparatus
- everyday objects reproduced as misregistered xerox sheets

### Usage

One full-bleed hero per landing driven by background-image: var(--hero-image); feature and empty-state imagery follow the Toner slot recipes. Monochrome only; never add text, colour or gloss.

---
version: "alpha"
name: "Mimeo"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#ece8df"
  surface: "#f4f1ea"
  surface_2: "#e2ddd1"
  text: "#111010"
  ink: "#111010"
  muted: "#6b6862"
  border: "#111010"
  accent: "#b23a1e"
  on_accent: "#f4f1ea"
  success: "#3f6b3a"
  warning: "#9a6a12"
  error: "#8f2018"
  info: "#4a4a4a"
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: "Spline Sans Mono"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    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-ink:
    backgroundColor: "{colors.ink}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  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: "#ffffff"
    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"
---

# Mimeo

## Overview

A confrontational monochrome reproduction language: soot-black ink stamped onto a dirty off-white paper field, with a misregistered offset duplicate as its signature. Hierarchy comes from condensed uppercase type-mass and stamped serials, not colour — a single vermilion register mark is the only highlighter. A faithful refinement of the photocopied-poster / anti-design monochrome idea, brought to standard.

### Values

- Visible construction over seamless illusion
- Type as the primary navigation device
- Utility, tension and directness over comfort
- Leave the registration marks on — a reproduction is never pristine

### Anti-Values

- Soft consumer-app friendliness and rounded comfort
- Colour-led delight that does the work type and structure should do
- Invisible boundaries, floating ambiguity and blurred glass depth

### Visual Character

- Every major container is an off-white paper sheet with a 3px soot-black border and a hard offset black shadow, often nudged a fraction of a degree so modules feel misregistered like stacked print sheets.
- Headlines are oversized condensed uppercase Archivo blocks that dominate the viewport and set scanning order before a word of body copy is read.
- The misregistered offset pass is the signature: a black or vermilion duplicate of a shape shifted a few pixels and rotated slightly behind the original — visible as panel shadows, the ghost layer behind chart bars, and the duplicate slab behind feature cards.
- The ground is a dirty off-white paper field with a faint repeating grid and toner grain, handled and slightly worn rather than digitally pristine.
- Controls are stark, square, 3px-bordered mechanical slabs with stamped mono labels and an inverted black-on-paper focus state carrying a single vermilion register ring.
- Metadata, serials and status chips are compact mono with wide letterspacing, giving every screen a marked-up production-sheet character; one vermilion register mark is the only highlighter.

## 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 | `#ece8df` |
| surface | `#f4f1ea` |
| surface_2 | `#e2ddd1` |
| text | `#111010` |
| ink | `#111010` |
| muted | `#6b6862` |
| border | `#111010` |
| accent | `#b23a1e` |
| on_accent | `#f4f1ea` |
| success | `#3f6b3a` |
| warning | `#9a6a12` |
| error | `#8f2018` |
| info | `#4a4a4a` |

## 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**: Spline Sans Mono, 17px, weight 400, line-height 1.5.
- **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

Four-column exposed grid: serial rail, dominant work area, stacked support modules. Tablet collapses to two columns; mobile to a single vertical stack.

### Whitespace

Tight, consistent gutters on an 8px rhythm; negative space is production margin and crop space, not soft luxury padding.

### Density

medium-high

### Responsive

Renders well from 390px mobile to 2560px+ ultra-wide; contained content caps and centres while only the hero spans 100vw; tables collapse to bordered stacked cards; grids use minmax(0,1fr)+min-width:0 so children shrink instead of overflowing.

### Breakpoints

- **Desktop**: 1440+
- **Tablet**: 768-1023
- **Mobile**: 390-767
- **Ultrawide**: 1700+ caps at 1440 contained

## Elevation & Depth

### Shadows

- **Sm**: 4px 4px 0 #111010
- **Md**: 8px 8px 0 #111010
- **Lg**: 12px 12px 0 #111010
- **Philosophy**: Hard offset black shadows and misregistered duplicate sheets only — never blur, glass, glow or gloss.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Dirty off-white paper sheets with 3px soot-black ruling lines, a faint grid + toner grain, and hard black offset shadows that read like stacked printed boards; some nudged a fraction of a degree.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 5px
- **Style**: solid
- **Character**: Hard mechanical soot-black borders, always visible, often paired with a misregistered offset duplicate.

## Components

### Composition

Lay screens on an exposed grid — a narrow serial rail, a dominant work area, and stacked support modules — broken by section strips (thick top rule + hard bottom rule + condensed uppercase title + mono serial). Modules are paper sheets with hard offset shadows, some nudged a fraction of a degree to feel misregistered. Compose real application screens, never a component catalogue.

### Hierarchy

Primary hierarchy comes from typographic mass and border weight, not colour. Oversized condensed uppercase headings and stamped mono serials set scanning order before body copy. The single vermilion register mark is a highlighter, never a structural device.

### Density

Medium-high: tightly packed mono metadata, visible dashed separators and structural gutters on an 8px rhythm. Negative space reads as production margin, not luxury padding.

### Signature

The misregistered offset pass — a black or vermilion duplicate of a shape shifted a few pixels and rotated a fraction of a degree behind the original. It appears as every panel's offset shadow, the ghost layer behind chart bars, the duplicate slab behind feature cards, and the slamming hero panel.

## 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-019ef9d7-744d-7b40-921b-81704c676771/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 Lead with oversized condensed uppercase type before any supporting copy.
- Do Keep 3px borders, dashed rules and hard offset shadows visibly dominant in every module.
- Do Use the misregistered offset pass as the recurring signature across panels, charts and the hero.
- Do Treat serials, timestamps and status chips as stamped production metadata in mono.
- Do Reserve the single vermilion register mark for one accent per region — a highlighter, not a fill field.
- Don't Do not round corners (except status chips), blur shadows, or introduce glass/gloss/glow.
- Don't Do not let colour create hierarchy that type and structure should carry.
- Don't Do not centre everything into a balanced startup-dashboard composition.
- Don't Do not leave any browser-default form control unstyled.
- Don't Do not let the misregistration get so chaotic that scanning or interaction breaks.

### Accessibility

Body 17px+, table rows 14.5px+; soot-black on off-white clears AA comfortably. Focus states invert to high-contrast black-on-paper with a vermilion ring; controls are sized to content and evenly padded. Motion respects prefers-reduced-motion and the settled page renders with no JavaScript. No emoji or symbol glyphs in copy — icons are SVG primitives.

## Imagery Direction

### Pairs With

toner

### Summary

High-contrast black-and-white photocopy reproduction built from misregistered stacked print sheets — coarse halftone, toner grain, registration crosshairs and hard ink rules, soot-black on dirty off-white. Imagery fills the frame edge to edge, strictly monochrome, no text.

### Subjects

- duplicator drums and mimeograph machinery
- tall stacks of pulled and pinned paper sheets
- office and print-shop apparatus
- everyday objects reproduced as misregistered xerox sheets

### Usage

One full-bleed hero per landing driven by background-image: var(--hero-image); feature and empty-state imagery follow the Toner slot recipes. Monochrome only; never add text, colour or gloss.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mimeo",
  "type": "registry:theme",
  "title": "Mimeo shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#ece8df",
      "foreground": "#111010",
      "card": "#f4f1ea",
      "card-foreground": "#111010",
      "popover": "#f4f1ea",
      "popover-foreground": "#111010",
      "primary": "#111010",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6b6862",
      "muted-foreground": "#111010",
      "accent": "#b23a1e",
      "accent-foreground": "#ffffff",
      "destructive": "#8f2018",
      "border": "#111010",
      "input": "#111010",
      "ring": "#b23a1e",
      "chart-1": "#111010",
      "chart-2": "#f4f4f5",
      "chart-3": "#b23a1e",
      "chart-4": "#3f6b3a",
      "chart-5": "#9a6a12",
      "sidebar": "#f4f1ea",
      "sidebar-foreground": "#111010",
      "sidebar-primary": "#111010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4a4a4a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111010",
      "sidebar-ring": "#b23a1e",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111010",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#b23a1e",
      "accent-foreground": "#ffffff",
      "destructive": "#8f2018",
      "border": "#303642",
      "input": "#303642",
      "ring": "#b23a1e",
      "chart-1": "#111010",
      "chart-2": "#f4f4f5",
      "chart-3": "#b23a1e",
      "chart-4": "#3f6b3a",
      "chart-5": "#9a6a12",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#b23a1e",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#b23a1e",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9d7-744d-7b40-921b-81704c676771",
    "slug": "mimeo",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "ink",
        "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"
      ]
    }
  }
}
```