design language·errata

Errata

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

A review surface that keeps the institutional editorial authority of a serious technology review — evidence first, verdicts that mean something, red as a restrained signal — but reconceives it as a correction pass: every claim is a redline that reconciles, struck then checked then sealed. The mark is the verdict.

values

Authority through evidence, not embellishmentThe mark carries state — struck, open, sealedRestraint: one vermilion signal on warm proof stockEditorial rhythm of dense ledgers buffered by whitespace

anti-values

×Rounded consumer-app softness×A second chromatic accent or gradient washes×Static decoration mistaken for structure×Muddy neutrals

tokens

colors14 items

#F4EFE4

surface

#FBF8F1

surface_solid

#FFFFFF

text

#171613

muted

#6B655A

border

#171613

accent

#D62B1F

accent_2

#1C1A17

accent_soft

#F0D9CE

on_accent

#FBF8F1

success

#2F6B3A

warning

#9A6410

error

#D62B1F

info

#1F4E9C

typography10 items

base size: 17px
body font: Newsreader
heading font: Fraunces
mono font: Spline Sans Mono
heading weight: 900
heading transform: none
letter spacing: -0.02em
line height: 1.55
scale ratio: 1.28
google fonts url: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

radii4 items

none: 0px
md: 16px
lg: 24px
full: 9999px

shadows3 items

sm: none
md: none
lg: none

spacing2 items

base: 8px
scale: 4, 8, 12, 16, 24, 32, 48, 64

surfaces3 items

treatment: proof paper
card style: square-corner ink-framed panels, no shadow theatre
bg pattern: faint printed baseline grid

borders4 items

default width: 1px
accent width: 3px
style: solid
character: hairline ink rules and boxed correction marks; the redline strike is a solid bar, the tick a graphite check

motion3 items

duration: 180ms
easing: cubic-bezier(0.2,0.8,0.2,1)
philosophy: deliberate

rules

composition

Compose review screens as a correction pass: claims on baselines with margin state-marks, folio section heads, and a strict findings ledger — buffered by whitespace bands.

hierarchy

Oversized Fraunces verdict numerals and mastheads carry rank; mono metadata annotates; the single vermilion figure is the count that failed reconciliation.

density

Medium-dense; dense ledgers and evidence blocks always bracketed by deliberate whitespace and hairline dividers.

signature patterns

Every reviewable claim is a redline that reconciles: struck (red strike + boxed mark), open (amber caret), sealed (graphite tick) — the mark is the verdict.The strike is a real state on the page: it draws on alignment and retracts on reconcile, and a HUD tally counts open redlines down to zero.Verdict numerals are oversized Fraunces figures; the single vermilion figure is the count that failed reconciliation.Section heads are folios: a red section number and mono label capped by a full-width rule.Findings sit in a strict ledger — tabular mono values, hairline separators, alternating proof bands, a measured-vs-claimed delta column.

layout

grid

Editorial reading column with exposed hairline structure; dashboard uses a 236px sidebar spine plus a fluid main. Panels lock to an 8px baseline.

breakpoints

Desktop 1440+ full spread; tablet ~768-1024 as its own considered layout (queue over ledger); mobile 390 single column with the nav folded and tables scrolling internally.

whitespace

Large top margins and inter-section bands; whitespace is measured, buffering dense ledgers.

responsive

Stack to a single reading column while preserving folio heads, state marks, and typographic contrast at every breakpoint.

guidance

reserve vermilion for the strike, the primary action, and the failed count
let the mark carry state and recolour onto semantics
keep corners square, rules hairline, figures tabular mono
pad generously above titles

avoid

add a second chromatic accent, a gradient, or a soft glassy card
box the navigation into a floating pill
give a panel a single decorative accent edge or wrap a control's label
replace the moving redline with a static folio-rule frame

imagery

summary

Editorial graphite and ink line illustration on warm proof stock, rendered as a proofreader's correction pass.

pairs with

grafit-proof-plate

notes

Subject-agnostic technique: dresses a review desk, a portrait, a skyline, or a teapot equally; one vermilion correction stroke.

katagami spec

# Errata

## Philosophy

A review surface that keeps the institutional editorial authority of a serious technology review — evidence first, verdicts that mean something, red as a restrained signal — but reconceives it as a correction pass: every claim is a redline that reconciles, struck then checked then sealed. The mark is the verdict.

### Values

- Authority through evidence, not embellishment
- The mark carries state — struck, open, sealed
- Restraint: one vermilion signal on warm proof stock
- Editorial rhythm of dense ledgers buffered by whitespace

### Anti-Values

- Rounded consumer-app softness
- A second chromatic accent or gradient washes
- Static decoration mistaken for structure
- Muddy neutrals

### Visual Character

- Warm proof-cream surfaces with graphite ink, one vermilion signal, and a faint baseline grid printing through the stock.
- Oversized high-contrast Fraunces verdicts against mono archival metadata — an editorial headline-body tension.
- Square-corner ink-framed panels and hairline rules that read as a correction pass, not app cards.
- The redline as a moving mark: it strikes claims, retracts on reconcile, and drives a live count.
- Disciplined whitespace bands buffering dense ledgers and evidence blocks.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EFE4` |
| surface | `#FBF8F1` |
| surface_solid | `#FFFFFF` |
| text | `#171613` |
| muted | `#6B655A` |
| border | `#171613` |
| accent | `#D62B1F` |
| accent_2 | `#1C1A17` |
| accent_soft | `#F0D9CE` |
| on_accent | `#FBF8F1` |
| success | `#2F6B3A` |
| warning | `#9A6410` |
| error | `#D62B1F` |
| info | `#1F4E9C` |

### Typography

- **Base Size**: 17px
- **Body Font**: Newsreader
- **Heading Font**: Fraunces
- **Mono Font**: Spline Sans Mono
- **Heading Weight**: 900
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: none
- **Md**: none
- **Lg**: none

### Spacing

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

### Surfaces

- **Treatment**: proof paper
- **Card Style**: square-corner ink-framed panels, no shadow theatre
- **Bg Pattern**: faint printed baseline grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: hairline ink rules and boxed correction marks; the redline strike is a solid bar, the tick a graphite check

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose review screens as a correction pass: claims on baselines with margin state-marks, folio section heads, and a strict findings ledger — buffered by whitespace bands.

### Hierarchy

Oversized Fraunces verdict numerals and mastheads carry rank; mono metadata annotates; the single vermilion figure is the count that failed reconciliation.

### Density

Medium-dense; dense ledgers and evidence blocks always bracketed by deliberate whitespace and hairline dividers.

### Signature Patterns

- Every reviewable claim is a redline that reconciles: struck (red strike + boxed mark), open (amber caret), sealed (graphite tick) — the mark is the verdict.
- The strike is a real state on the page: it draws on alignment and retracts on reconcile, and a HUD tally counts open redlines down to zero.
- Verdict numerals are oversized Fraunces figures; the single vermilion figure is the count that failed reconciliation.
- Section heads are folios: a red section number and mono label capped by a full-width rule.
- Findings sit in a strict ledger — tabular mono values, hairline separators, alternating proof bands, a measured-vs-claimed delta column.

## Layout

### Grid

Editorial reading column with exposed hairline structure; dashboard uses a 236px sidebar spine plus a fluid main. Panels lock to an 8px baseline.

### Breakpoints

Desktop 1440+ full spread; tablet ~768-1024 as its own considered layout (queue over ledger); mobile 390 single column with the nav folded and tables scrolling internally.

### Whitespace

Large top margins and inter-section bands; whitespace is measured, buffering dense ledgers.

### Responsive

Stack to a single reading column while preserving folio heads, state marks, and typographic contrast at every breakpoint.

## Guidance

### Do

- reserve vermilion for the strike, the primary action, and the failed count
- let the mark carry state and recolour onto semantics
- keep corners square, rules hairline, figures tabular mono
- pad generously above titles

### Don't

- add a second chromatic accent, a gradient, or a soft glassy card
- box the navigation into a floating pill
- give a panel a single decorative accent edge or wrap a control's label
- replace the moving redline with a static folio-rule frame

## Imagery Direction

### Summary

Editorial graphite and ink line illustration on warm proof stock, rendered as a proofreader's correction pass.

### Pairs With

grafit-proof-plate

### Notes

Subject-agnostic technique: dresses a review desk, a portrait, a skyline, or a teapot equally; one vermilion correction stroke.

DESIGN.md

---
version: "alpha"
name: "Errata"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4EFE4"
  surface: "#FBF8F1"
  surface_solid: "#FFFFFF"
  text: "#171613"
  muted: "#6B655A"
  border: "#171613"
  accent: "#D62B1F"
  accent_2: "#1C1A17"
  accent_soft: "#F0D9CE"
  on_accent: "#FBF8F1"
  success: "#2F6B3A"
  warning: "#9A6410"
  error: "#D62B1F"
  info: "#1F4E9C"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Spline Sans 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"
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: "#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"
---

# Errata

## Overview

A review surface that keeps the institutional editorial authority of a serious technology review — evidence first, verdicts that mean something, red as a restrained signal — but reconceives it as a correction pass: every claim is a redline that reconciles, struck then checked then sealed. The mark is the verdict.

### Values

- Authority through evidence, not embellishment
- The mark carries state — struck, open, sealed
- Restraint: one vermilion signal on warm proof stock
- Editorial rhythm of dense ledgers buffered by whitespace

### Anti-Values

- Rounded consumer-app softness
- A second chromatic accent or gradient washes
- Static decoration mistaken for structure
- Muddy neutrals

### Visual Character

- Warm proof-cream surfaces with graphite ink, one vermilion signal, and a faint baseline grid printing through the stock.
- Oversized high-contrast Fraunces verdicts against mono archival metadata — an editorial headline-body tension.
- Square-corner ink-framed panels and hairline rules that read as a correction pass, not app cards.
- The redline as a moving mark: it strikes claims, retracts on reconcile, and drives a live count.
- Disciplined whitespace bands buffering dense ledgers and evidence blocks.

## 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 | `#F4EFE4` |
| surface | `#FBF8F1` |
| surface_solid | `#FFFFFF` |
| text | `#171613` |
| muted | `#6B655A` |
| border | `#171613` |
| accent | `#D62B1F` |
| accent_2 | `#1C1A17` |
| accent_soft | `#F0D9CE` |
| on_accent | `#FBF8F1` |
| success | `#2F6B3A` |
| warning | `#9A6410` |
| error | `#D62B1F` |
| info | `#1F4E9C` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans 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`

### Grid

Editorial reading column with exposed hairline structure; dashboard uses a 236px sidebar spine plus a fluid main. Panels lock to an 8px baseline.

### Breakpoints

Desktop 1440+ full spread; tablet ~768-1024 as its own considered layout (queue over ledger); mobile 390 single column with the nav folded and tables scrolling internally.

### Whitespace

Large top margins and inter-section bands; whitespace is measured, buffering dense ledgers.

### Responsive

Stack to a single reading column while preserving folio heads, state marks, and typographic contrast at every breakpoint.

## Elevation & Depth

### Shadows

- **Sm**: none
- **Md**: none
- **Lg**: none

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: proof paper
- **Card Style**: square-corner ink-framed panels, no shadow theatre
- **Bg Pattern**: faint printed baseline grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: hairline ink rules and boxed correction marks; the redline strike is a solid bar, the tick a graphite check

## Components

### Composition

Compose review screens as a correction pass: claims on baselines with margin state-marks, folio section heads, and a strict findings ledger — buffered by whitespace bands.

### Hierarchy

Oversized Fraunces verdict numerals and mastheads carry rank; mono metadata annotates; the single vermilion figure is the count that failed reconciliation.

### Density

Medium-dense; dense ledgers and evidence blocks always bracketed by deliberate whitespace and hairline dividers.

### Signature Patterns

- Every reviewable claim is a redline that reconciles: struck (red strike + boxed mark), open (amber caret), sealed (graphite tick) — the mark is the verdict.
- The strike is a real state on the page: it draws on alignment and retracts on reconcile, and a HUD tally counts open redlines down to zero.
- Verdict numerals are oversized Fraunces figures; the single vermilion figure is the count that failed reconciliation.
- Section heads are folios: a red section number and mono label capped by a full-width rule.
- Findings sit in a strict ledger — tabular mono values, hairline separators, alternating proof bands, a measured-vs-claimed delta column.

## 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-019f7097-f7fb-7620-9893-7d412ed147a0/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 reserve vermilion for the strike, the primary action, and the failed count
- Do let the mark carry state and recolour onto semantics
- Do keep corners square, rules hairline, figures tabular mono
- Do pad generously above titles
- Don't add a second chromatic accent, a gradient, or a soft glassy card
- Don't box the navigation into a floating pill
- Don't give a panel a single decorative accent edge or wrap a control's label
- Don't replace the moving redline with a static folio-rule frame

## Imagery Direction

### Summary

Editorial graphite and ink line illustration on warm proof stock, rendered as a proofreader's correction pass.

### Pairs With

grafit-proof-plate

### Notes

Subject-agnostic technique: dresses a review desk, a portrait, a skyline, or a teapot equally; one vermilion correction stroke.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "errata",
  "type": "registry:theme",
  "title": "Errata shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EFE4",
      "foreground": "#171613",
      "card": "#FBF8F1",
      "card-foreground": "#171613",
      "popover": "#FBF8F1",
      "popover-foreground": "#171613",
      "primary": "#171613",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B655A",
      "muted-foreground": "#171613",
      "accent": "#D62B1F",
      "accent-foreground": "#ffffff",
      "destructive": "#D62B1F",
      "border": "#171613",
      "input": "#171613",
      "ring": "#D62B1F",
      "chart-1": "#171613",
      "chart-2": "#f4f4f5",
      "chart-3": "#D62B1F",
      "chart-4": "#2F6B3A",
      "chart-5": "#9A6410",
      "sidebar": "#FBF8F1",
      "sidebar-foreground": "#171613",
      "sidebar-primary": "#171613",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F4E9C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#171613",
      "sidebar-ring": "#D62B1F",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#171613",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D62B1F",
      "accent-foreground": "#ffffff",
      "destructive": "#D62B1F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D62B1F",
      "chart-1": "#171613",
      "chart-2": "#f4f4f5",
      "chart-3": "#D62B1F",
      "chart-4": "#2F6B3A",
      "chart-5": "#9A6410",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#171613",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D62B1F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D62B1F",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f7097-f7fb-7620-9893-7d412ed147a0",
    "slug": "errata",
    "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"
      ]
    }
  }
}
```

in the wild

embodiments

bespoke marketing landingopen full page ↗

landing · errata

DESIGN.md

at a glance

Typography

headline-lgFraunces · 33px · 700

The quick brown fox jumps

headline-mdFraunces · 27px · 600

The quick brown fox jumps

body-mdNewsreader · 17px · 400

The quick brown fox jumps

label-mdSpline Sans Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

needs agent-authored kitstored

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarning

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #F4EFE4;
  --foreground: #171613;
  --card: #FBF8F1;
  --card-foreground: #171613;
  --popover: #FBF8F1;
  --popover-foreground: #171613;
  --primary: #171613;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6B655A;
  --muted-foreground: #171613;
  --accent: #D62B1F;
  --accent-foreground: #ffffff;
  --destructive: #D62B1F;
  --border: #171613;
  --input: #171613;
  --ring: #D62B1F;
  --chart-1: #171613;
  --chart-2: #f4f4f5;
  --chart-3: #D62B1F;
  --chart-4: #2F6B3A;
  --chart-5: #9A6410;
  --sidebar: #FBF8F1;
  --sidebar-foreground: #171613;
  --sidebar-primary: #171613;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1F4E9C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #171613;
  --sidebar-ring: #D62B1F;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #171613;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D62B1F;
  --accent-foreground: #ffffff;
  --destructive: #D62B1F;
  --border: #303642;
  --input: #303642;
  --ring: #D62B1F;
  --chart-1: #171613;
  --chart-2: #f4f4f5;
  --chart-3: #D62B1F;
  --chart-4: #2F6B3A;
  --chart-5: #9A6410;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #171613;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D62B1F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D62B1F;
  --radius: 16px;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function ErrataShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Errata</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONstored

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "errata",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Errata",
  "description": "A review theme where every claim is a redline that reconciles. Warm proof-stock cream, graphite ink, one vermilion signal; square corners, hairline rules, editorial serif display.",
  "cssVars": {
    "theme": {
      "font-sans": "Newsreader, Georgia, serif",
      "font-serif": "Fraunces, Georgia, serif",
      "font-mono": "Spline Sans Mono, ui-monospace, monospace",
      "radius": "0px"
    },
    "light": {
      "background": "#F4EFE4",
      "foreground": "#171613",
      "card": "#FFFFFF",
      "card-foreground": "#171613",
      "popover": "#FBF8F1",
      "popover-foreground": "#171613",
      "primary": "#D62B1F",
      "primary-foreground": "#FBF8F1",
      "secondary": "#FBF8F1",
      "secondary-foreground": "#171613",
      "muted": "#F0ECE2",
      "muted-foreground": "#6B655A",
      "accent": "#F0D9CE",
      "accent-foreground": "#171613",
      "destructive": "#D62B1F",
      "destructive-foreground": "#FBF8F1",
      "border": "#171613",
      "input": "#171613",
      "ring": "#D62B1F",
      "chart-1": "#D62B1F",
      "chart-2": "#171613",
      "chart-3": "#9A6410",
      "chart-4": "#2F6B3A",
      "chart-5": "#1F4E9C",
      "radius": "0px"
    },
    "dark": {
      "background": "#171613",
      "foreground": "#F4EFE4",
      "card": "#1E1C18",
      "card-foreground": "#F4EFE4",
      "popover": "#1E1C18",
      "popover-foreground": "#F4EFE4",
      "primary": "#E8483D",
      "primary-foreground": "#171613",
      "secondary": "#242119",
      "secondary-foreground": "#F4EFE4",
      "muted": "#242119",
      "muted-foreground": "#A79F91",
      "accent": "#3A2620",
      "accent-foreground": "#F4EFE4",
      "destructive": "#E8483D",
      "destructive-foreground": "#171613",
      "border": "#3A362E",
      "input": "#3A362E",
      "ring": "#E8483D",
      "chart-1": "#E8483D",
      "chart-2": "#F4EFE4",
      "chart-3": "#C8912F",
      "chart-4": "#5FA36C",
      "chart-5": "#6E93D8",
      "radius": "0px"
    }
  },
  "visualProfile": {
    "family": "editorial-proof",
    "material": "warm proof-stock cream with graphite ink",
    "contour": "square",
    "border": "hairline ink",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "deliberate",
    "density": "medium-dense",
    "accents": ["#D62B1F", "#171613"]
  },
  "notes": "Radius is 0 across every primitive. Borders are 1px graphite ink, never grey. Primary is the vermilion redline — reserved for the one decisive action; secondary and ghost stay graphite-on-cream. Focus draws a vermilion baseline (ring), not a glow. Fraunces for display/headings, Newsreader for body, Spline Sans Mono for labels and figures. Review state maps to semantics: struck=destructive/red, open=warning/amber, sealed=success/green."
}

component recipesstored

# Errata — shadcn/ui Components

Author: `katagami-agent`
Registry theme: `errata` · component-recipes-v1

Errata dresses shadcn/ui as a **review surface**: every claim is a redline that reconciles. Warm proof-stock cream ground, graphite ink, one vermilion signal. Square corners everywhere, hairline ink borders (never grey), an editorial serif display voice, and mono for labels and figures. The through-line is the *mark*: struck (red), open (amber), sealed (graphite-green).

## ShadSync visual profile

| Attribute | Value |
|---|---|
| family | editorial-proof |
| material | warm proof-stock cream with graphite ink |
| contour | square (radius 0) |
| border | 1px graphite ink hairline — never grey, never heavy |
| underlay | false |
| grain | true (faint printed baseline grid on the stock) |
| stickerBadges | false |
| motion | deliberate (180ms, cubic-bezier(0.2,0.8,0.2,1)) |
| density | medium-dense |
| accents | `#D62B1F` vermilion redline, `#171613` graphite |

The renderer follows this `visualProfile`; it must look like Errata, not a house chassis. Radius is `0` on every primitive. The only pill (`9999`) allowed is the reconcile tick badge.

## Signature component recipes

The mechanic recolours onto semantics. Wire these once and every primitive inherits the review vocabulary.

- **Button (primary)** — the redline action. `bg-primary text-primary-foreground` (vermilion on paper), square, mono uppercase label, inverse ink-fill on hover (`hover:bg-foreground hover:text-background`). Exactly one primary per view.
- **Button (secondary / ghost)** — graphite outline on cream; hover fills ink. Never a second colour.
- **Badge** — the state chip. Square, hairline, mono uppercase, a 7px state dot: `struck` → destructive, `open` → warning, `sealed` → success, `cross-reference` → info.
- **Input / Textarea / Select** — solid white field, 1px ink border, radius 0. Focus draws a vermilion baseline (`ring`) via `focus-visible:shadow-[inset_0_-3px_0_var(--ring)]`, echoing a claim being marked.
- **Checkbox / Switch** — square box (checkbox) and square track (switch); checked state fills vermilion with a paper tick/knob.
- **Table** — findings ledger: mono tabular figures, hairline row separators, alternating proof bands (`even:bg-muted`), a red delta cell where evidence fails.
- **Tabs** — the active tab carries the same vermilion underline as a focused field (`data-[state=active]:shadow-[inset_0_-3px_0_var(--primary)]`).
- **Separator** — hairline ink rule; the section head uses a 2px full-width rule as a folio cap.
- **Slider** — 2px ink track, vermilion square thumb.
- **Tooltip / Dropdown / Dialog / Sheet** — square popovers on `surface`, 1px ink border, no shadow theatre; the evidence block is the one place the redline wash (`accent`) may fill a surface.

## Preview shots

`preview-shots.json` (`renderable-v1`) renders three product scenes on the Errata theme, exercising all 16 primitives:

1. **Correction pass** — the reconcile queue with struck/open/sealed rows, a primary "Seal review" button, and the redline tally.
2. **Review intake** — a claim-under-review form: input, select, textarea, checkboxes, switch, slider, with the vermilion focus baseline.
3. **Findings ledger** — the measured-vs-claimed table with a red delta column, verdict numeral, and state badges.

Each shot names what it `mustShow` and what to `avoid` so the renderer holds the language instead of drifting to a generic card grid.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

// A reconcile row: the mark carries the verdict.
export function ReconcileRow({ claim, state }: { claim: string; state: "struck" | "open" | "sealed" }) {
  const chip = {
    struck: { label: "Struck", variant: "destructive" as const },
    open:   { label: "Open",   variant: "outline" as const },
    sealed: { label: "Sealed", variant: "secondary" as const },
  }[state]

  return (
    <div className="flex items-center gap-4 border-b border-border py-4">
      <span aria-hidden className="h-5 w-5 border-2 border-primary" />
      <p className={state === "sealed" ? "line-through text-muted-foreground" : ""}>{claim}</p>
      <Badge variant={chip.variant} className="ml-auto rounded-none font-mono uppercase tracking-wider">
        {chip.label}
      </Badge>
      {state === "struck" && (
        <Button className="rounded-none bg-primary font-mono uppercase tracking-wider text-primary-foreground">
          Reconcile
        </Button>
      )}
    </div>
  )
}
```

Import primitives from `@/components/ui/` — button, badge, input, textarea, select, checkbox, switch, slider, table, tabs, separator, tooltip, dropdown-menu, dialog, sheet, card. The theme sits in `@/components/ui/` via the `errata` registry item; keep `rounded-none` on any primitive whose default radius leaks through.

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": { "id": "errata", "name": "Errata", "slug": "errata" },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/errata.json",
  "primitives": ["button","card","input","textarea","select","dialog","sheet","tabs","badge","separator","checkbox","switch","slider","tooltip","dropdown-menu","table"],
  "identityNotes": [
    "Every claim is a redline that reconciles: struck (red), open (amber caret), sealed (graphite tick) — the mark is the verdict.",
    "Square corners on every primitive (radius 0); the only pill is the reconcile tick badge.",
    "Hairline graphite ink borders — never grey, never heavy.",
    "One vermilion signal reserved for the strike, the primary action, and the failed count; everything else graphite on cream.",
    "Focus draws a vermilion baseline under the field, echoing a claim being marked — not a glow ring.",
    "Fraunces display serif for verdicts and headings, Newsreader for body, Spline Sans Mono for labels and tabular figures."
  ],
  "visualProfile": {
    "family": "editorial-proof",
    "material": "warm proof-stock cream with graphite ink",
    "contour": "square",
    "border": "hairline ink",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "deliberate",
    "density": "medium-dense",
    "accents": ["#D62B1F", "#171613"]
  },
  "tokens": {
    "background": "#F4EFE4",
    "foreground": "#171613",
    "card": "#FFFFFF",
    "primary": "#D62B1F",
    "primary-foreground": "#FBF8F1",
    "secondary": "#FBF8F1",
    "muted": "#F0ECE2",
    "muted-foreground": "#6B655A",
    "accent": "#F0D9CE",
    "destructive": "#D62B1F",
    "border": "#171613",
    "ring": "#D62B1F",
    "success": "#2F6B3A",
    "warning": "#9A6410",
    "info": "#1F4E9C",
    "radius": "0px",
    "font-serif": "Fraunces, Georgia, serif",
    "font-sans": "Newsreader, Georgia, serif",
    "font-mono": "Spline Sans Mono, ui-monospace, monospace"
  },
  "shots": [
    {
      "id": "correction-pass",
      "title": "Correction pass",
      "viewport": "desktop",
      "primitives": ["card","button","badge","checkbox","separator","tooltip"],
      "composition": "A review queue card: six reconcile rows, each with a square state mark, a claim line, and a state badge. A primary 'Seal review' button and a graphite 'Return draft' secondary sit below; a mono redline tally sits top-right.",
      "mustShow": ["square state marks (struck/open/sealed)","one vermilion primary button","hairline row separators","mono uppercase state badges","redline tally count"],
      "avoid": ["rounded pills","grey borders","drop-shadow cards","a second accent hue"],
      "scene": {
        "headline": "Correction pass — Q3 platform review",
        "description": "Three claims remain struck; the review does not seal until the redline count reaches zero.",
        "rows": [
          { "claim": "Cold-start latency reported from warm cache", "state": "Struck" },
          { "claim": "P99 tail predates the shard rebalance", "state": "Struck" },
          { "claim": "Throughput past 64 shards is untested", "state": "Open" },
          { "claim": "Memory ceiling holds at 4.2 GB", "state": "Sealed" },
          { "claim": "Rollback completes inside 60 s", "state": "Sealed" }
        ]
      }
    },
    {
      "id": "review-intake",
      "title": "Review intake",
      "viewport": "desktop",
      "primitives": ["card","input","select","textarea","checkbox","switch","slider","button","tabs","dropdown-menu"],
      "composition": "A claim-under-review form on a solid white card: claim input, evidence-class select, reviewer-note textarea, two checkboxes, a block-seal switch, and a confidence slider. Focus draws a vermilion baseline under the active field. Tabs above switch between Finding / Trace / Rebuttal.",
      "mustShow": ["vermilion focus baseline on the active field","square controls, radius 0","mono uppercase field labels","active tab with vermilion underline","one primary 'Log mark' button"],
      "avoid": ["browser-default control styling","rounded inputs","glassy translucency","emoji on controls"],
      "scene": {
        "headline": "Log a review mark",
        "description": "Every control is explicitly styled; focus marks the field like a claim under review.",
        "fields": [
          { "label": "Claim under review", "value": "Cold-start latency stays under 200 ms" },
          { "label": "Evidence class", "value": "Benchmark replay" },
          { "label": "Reviewer note", "value": "Warm-cache run mislabelled; re-measure from a cleared cache." },
          { "label": "Confidence in evidence", "value": "72%" }
        ]
      }
    },
    {
      "id": "findings-ledger",
      "title": "Findings ledger",
      "viewport": "desktop",
      "primitives": ["table","badge","card","separator","dialog","sheet"],
      "composition": "A measured-vs-claimed findings table with mono tabular figures, hairline separators, and alternating proof bands. A red delta column flags claims where evidence fails. An oversized Fraunces verdict numeral sits beside the table; a dialog previews a single struck claim's evidence.",
      "mustShow": ["mono tabular figures","alternating proof-band rows","red delta cells for failed claims","oversized serif verdict numeral","square state badges"],
      "avoid": ["rounded chips","grey zebra stripes that muddy the cream","centered symmetric layout","gradient fills"],
      "scene": {
        "headline": "Findings ledger",
        "description": "Measured against claimed. Three deltas fail; the verdict head shows the struck count.",
        "stats": [
          { "label": "Claims in review", "value": "41" },
          { "label": "Struck", "value": "3" },
          { "label": "Open", "value": "1" },
          { "label": "Sealed", "value": "37" }
        ]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Primary = the redline action, vermilion on cream, mono uppercase, inverse ink-fill on hover; exactly one per view." },
    { "primitive": "button", "intent": "Secondary/ghost = graphite outline on cream; hover fills ink; never a second colour." },
    { "primitive": "card", "intent": "Square white or cream panel, 1px ink border, no shadow theatre; the review-panel surface." },
    { "primitive": "input", "intent": "Solid white field, 1px ink border, radius 0; focus draws a vermilion baseline underneath." },
    { "primitive": "textarea", "intent": "Same as input, resize vertical; carries the reviewer note." },
    { "primitive": "select", "intent": "Square field with a graphite caret; no rounded menu; evidence-class picker." },
    { "primitive": "dialog", "intent": "Square popover on surface, 1px ink border; previews a single claim's evidence." },
    { "primitive": "sheet", "intent": "Slide-in evidence panel from the right; square edges, hairline border, no scrim gradient." },
    { "primitive": "tabs", "intent": "Active tab carries the vermilion underline, echoing a focused field; Finding / Trace / Rebuttal." },
    { "primitive": "badge", "intent": "The state chip: square, hairline, mono uppercase, a 7px state dot — struck/open/sealed/cross-reference." },
    { "primitive": "separator", "intent": "Hairline ink rule between rows; 2px full-width rule caps a folio section head." },
    { "primitive": "checkbox", "intent": "Square box; checked fills vermilion with a paper tick." },
    { "primitive": "switch", "intent": "Square track and knob; checked fills vermilion; used for 'block seal while redlines remain'." },
    { "primitive": "slider", "intent": "2px ink track, vermilion square thumb; evidence-confidence control." },
    { "primitive": "tooltip", "intent": "Square graphite tooltip on surface; annotates a state mark's meaning." },
    { "primitive": "dropdown-menu", "intent": "Square menu, hairline border, mono items; reviewer actions (seal, return, export)." },
    { "primitive": "table", "intent": "Findings ledger: mono tabular figures, hairline separators, alternating proof bands, red delta cells." }
  ],
  "qualityRules": {
    "do": [
      "Keep radius 0 on every primitive; only the reconcile tick badge may be a pill.",
      "Reserve vermilion for the strike, the one primary action, and the failed count.",
      "Use mono uppercase for labels, states, and tabular figures.",
      "Map review state onto semantics: struck=destructive, open=warning, sealed=success, cross-reference=info.",
      "Draw a vermilion focus baseline under fields instead of a glow ring."
    ],
    "dont": [
      "Introduce a second chromatic accent or any gradient.",
      "Round corners, add drop-shadow cards, or use grey borders.",
      "Box navigation into a floating pill bar.",
      "Wrap a control's label or let a button become a blob.",
      "Put a single decorative accent edge on a panel."
    ]
  }
}

built with

Palette

Agent-generated

remix lane

try a remix

Keep Errataand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

UI language · fixed

Errata

Palette

Art style

Landing PageErrata · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

lineage

Family

Evolved from

Institutional Modernist Tech ReviewArchived

More like this

Quoinshares editorial · serif-display Driftshares editorial Druckwerkshares editorial Filamentshares editorial Glazeshares editorial Gustshares editorial