design language·broadsheet

Broadsheet

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

Broadsheet sets a screen like a technology audit going to press: a masthead and full-width folio rule, a condensed uppercase deck headline, serif body for the argument, monospace metadata that indexes each module like an archival document, and one signal red held back for the verdict.

values

Authority through grid discipline and rule logic, not ornamentEditorial rhythm alternating dense evidence with measured whitespaceRationed signal color that keeps its urgencyLong-form legibility: serif body, condensed display, mono annotation

anti-values

×Rounded consumer-app softness×Glass, blur, decorative gradients×Boxed-in navigation widgets×Red as furniture

tokens

colors14 items

#E7E1D4

surface

#F5F1E8

surface_solid

#FBF9F3

text

#141210

muted

#6C665B

border

#141210

accent

#C62828

accent_2

#8E1B1B

accent_soft

#EFD9D4

on_accent

#FBF9F3

success

#2E7D32

warning

#A66500

error

#B3261E

info

#0B57D0

typography10 items

base size: 17px
body font: Source Serif 4
heading font: League Spartan
mono font: IBM Plex Mono
heading weight: 800
heading transform: uppercase
letter spacing: -0.02em
line height: 1.55
scale ratio: 1.25
google fonts url: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=League+Spartan:wght@500;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap

radii4 items

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

shadows3 items

sm: none
md: 0 2px 0 rgba(20,18,16,0.06)
lg: 0 4px 0 rgba(20,18,16,0.08)

spacing2 items

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

surfaces3 items

treatment: matte press paper
card style: rule-topped panels, no box, no accent edge
bg pattern: none

borders4 items

default width: 1px
accent width: 3px
style: solid
character: folio rules — 1px hairline dividers, 2px folio caps, 3px section breaks; near-black ink, never a card edge stripe

motion3 items

duration: 180ms
easing: cubic-bezier(0.2,0.8,0.2,1)
philosophy: deliberate; inverse-ink hovers; self-drawing folio rules; red verdict floods on alignment

rules

composition

Compose screens as review spreads: a dominant narrative column, a narrower evidence rail, and rule-capped folio sections locked to one grid.

hierarchy

Rank by scale, weight, uppercase mono labeling, and rule thickness; rely on alignment and contrast, not shadow.

density

Medium-dense; every dense zone buffered by whitespace bands and folio rules.

signature patterns

Every section opens with an uppercase monospace label capped by a full-width rule — a publication folio; on the landing the rule draws itself across the viewport.Findings and verdicts are set in oversized condensed numerals against smaller serif copy.Data tables use strict column alignment, tabular mono values, hairline separators, and alternating paper bands — never pills or chips.The verdict is the single red detonation: it floods from a hairline stamp to a full red field on scroll alignment.Calls to action are square editorial controls with mono uppercase labels and inverse-ink hover.

layout

grid

Desktop 12-column editorial grid with generous outer margins; key splits 7/5 or 8/4 for asymmetric tension.

breakpoints

Desktop >=1440 keeps 12 columns; tablet ~768-1024 is its own considered layout; mobile 390 stacks to one column.

whitespace

Large top margins and inter-section bands; measured, never airy.

responsive

Shift from multi-column spread to a stacked reading order while preserving folio labels, rules, and typographic contrast.

guidance

Open every section with a mono label and a full-width rule
Reserve red for verdicts, sub-threshold scores, and active markers
Pair condensed uppercase deck headings with serif body and mono metadata
Keep corners square and rule logic consistent across buttons, tables, and forms

avoid

Do not box navigation into a floating card or pill bar
Do not put a single accent edge on a card — the rule tops the column
Do not introduce glass, blur, rounded SaaS cards, or gradients
Do not let red spread past status

imagery

summary

Institutional two-ink editorial screenprint: signal-red and near-black litho ink on warm paper, halftone, registration crop-marks. Editorial diagrams, audit-style data-viz, restrained institutional technology scenes.

pairs with

broadsheet-duotone-press

katagami spec

# Broadsheet

## Philosophy

Broadsheet sets a screen like a technology audit going to press: a masthead and full-width folio rule, a condensed uppercase deck headline, serif body for the argument, monospace metadata that indexes each module like an archival document, and one signal red held back for the verdict.

### Values

- Authority through grid discipline and rule logic, not ornament
- Editorial rhythm alternating dense evidence with measured whitespace
- Rationed signal color that keeps its urgency
- Long-form legibility: serif body, condensed display, mono annotation

### Anti-Values

- Rounded consumer-app softness
- Glass, blur, decorative gradients
- Boxed-in navigation widgets
- Red as furniture

### Visual Character

- A 12-column editorial grid with exposed gutters and hard left/top alignment.
- Large condensed uppercase deck headings against compact serif argument and mono metadata.
- Warm paper surfaces cut by severe near-black rules and one rationed signal red.
- Square frames and horizontal divider rules that read as a printed review spread.
- Dense evidence tables and abstracts separated by disciplined negative space.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#E7E1D4` |
| surface | `#F5F1E8` |
| surface_solid | `#FBF9F3` |
| text | `#141210` |
| muted | `#6C665B` |
| border | `#141210` |
| accent | `#C62828` |
| accent_2 | `#8E1B1B` |
| accent_soft | `#EFD9D4` |
| on_accent | `#FBF9F3` |
| success | `#2E7D32` |
| warning | `#A66500` |
| error | `#B3261E` |
| info | `#0B57D0` |

### Typography

- **Base Size**: 17px
- **Body Font**: Source Serif 4
- **Heading Font**: League Spartan
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 800
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=League+Spartan:wght@500;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap

### Radii

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

### Shadows

- **Sm**: none
- **Md**: 0 2px 0 rgba(20,18,16,0.06)
- **Lg**: 0 4px 0 rgba(20,18,16,0.08)

### Spacing

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

### Surfaces

- **Treatment**: matte press paper
- **Card Style**: rule-topped panels, no box, no accent edge
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: folio rules — 1px hairline dividers, 2px folio caps, 3px section breaks; near-black ink, never a card edge stripe

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate; inverse-ink hovers; self-drawing folio rules; red verdict floods on alignment

## Rules

### Composition

Compose screens as review spreads: a dominant narrative column, a narrower evidence rail, and rule-capped folio sections locked to one grid.

### Hierarchy

Rank by scale, weight, uppercase mono labeling, and rule thickness; rely on alignment and contrast, not shadow.

### Density

Medium-dense; every dense zone buffered by whitespace bands and folio rules.

### Signature Patterns

- Every section opens with an uppercase monospace label capped by a full-width rule — a publication folio; on the landing the rule draws itself across the viewport.
- Findings and verdicts are set in oversized condensed numerals against smaller serif copy.
- Data tables use strict column alignment, tabular mono values, hairline separators, and alternating paper bands — never pills or chips.
- The verdict is the single red detonation: it floods from a hairline stamp to a full red field on scroll alignment.
- Calls to action are square editorial controls with mono uppercase labels and inverse-ink hover.

## Layout

### Grid

Desktop 12-column editorial grid with generous outer margins; key splits 7/5 or 8/4 for asymmetric tension.

### Breakpoints

Desktop >=1440 keeps 12 columns; tablet ~768-1024 is its own considered layout; mobile 390 stacks to one column.

### Whitespace

Large top margins and inter-section bands; measured, never airy.

### Responsive

Shift from multi-column spread to a stacked reading order while preserving folio labels, rules, and typographic contrast.

## Guidance

### Do

- Open every section with a mono label and a full-width rule
- Reserve red for verdicts, sub-threshold scores, and active markers
- Pair condensed uppercase deck headings with serif body and mono metadata
- Keep corners square and rule logic consistent across buttons, tables, and forms

### Don't

- Do not box navigation into a floating card or pill bar
- Do not put a single accent edge on a card — the rule tops the column
- Do not introduce glass, blur, rounded SaaS cards, or gradients
- Do not let red spread past status

## Imagery Direction

### Summary

Institutional two-ink editorial screenprint: signal-red and near-black litho ink on warm paper, halftone, registration crop-marks. Editorial diagrams, audit-style data-viz, restrained institutional technology scenes.

### Pairs With

broadsheet-duotone-press

DESIGN.md

---
version: "alpha"
name: "Broadsheet"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#E7E1D4"
  surface: "#F5F1E8"
  surface_solid: "#FBF9F3"
  text: "#141210"
  muted: "#6C665B"
  border: "#141210"
  accent: "#C62828"
  accent_2: "#8E1B1B"
  accent_soft: "#EFD9D4"
  on_accent: "#FBF9F3"
  success: "#2E7D32"
  warning: "#A66500"
  error: "#B3261E"
  info: "#0B57D0"
typography:
  headline-lg:
    fontFamily: "League Spartan"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "League Spartan"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Source Serif 4"
    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"
  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"
---

# Broadsheet

## Overview

Broadsheet sets a screen like a technology audit going to press: a masthead and full-width folio rule, a condensed uppercase deck headline, serif body for the argument, monospace metadata that indexes each module like an archival document, and one signal red held back for the verdict.

### Values

- Authority through grid discipline and rule logic, not ornament
- Editorial rhythm alternating dense evidence with measured whitespace
- Rationed signal color that keeps its urgency
- Long-form legibility: serif body, condensed display, mono annotation

### Anti-Values

- Rounded consumer-app softness
- Glass, blur, decorative gradients
- Boxed-in navigation widgets
- Red as furniture

### Visual Character

- A 12-column editorial grid with exposed gutters and hard left/top alignment.
- Large condensed uppercase deck headings against compact serif argument and mono metadata.
- Warm paper surfaces cut by severe near-black rules and one rationed signal red.
- Square frames and horizontal divider rules that read as a printed review spread.
- Dense evidence tables and abstracts separated by disciplined negative space.

## 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 | `#E7E1D4` |
| surface | `#F5F1E8` |
| surface_solid | `#FBF9F3` |
| text | `#141210` |
| muted | `#6C665B` |
| border | `#141210` |
| accent | `#C62828` |
| accent_2 | `#8E1B1B` |
| accent_soft | `#EFD9D4` |
| on_accent | `#FBF9F3` |
| success | `#2E7D32` |
| warning | `#A66500` |
| error | `#B3261E` |
| info | `#0B57D0` |

## Typography

- **Headline-Lg**: League Spartan, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: League Spartan, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Source Serif 4, 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`

### Grid

Desktop 12-column editorial grid with generous outer margins; key splits 7/5 or 8/4 for asymmetric tension.

### Breakpoints

Desktop >=1440 keeps 12 columns; tablet ~768-1024 is its own considered layout; mobile 390 stacks to one column.

### Whitespace

Large top margins and inter-section bands; measured, never airy.

### Responsive

Shift from multi-column spread to a stacked reading order while preserving folio labels, rules, and typographic contrast.

## Elevation & Depth

### Shadows

- **Sm**: none
- **Md**: 0 2px 0 rgba(20,18,16,0.06)
- **Lg**: 0 4px 0 rgba(20,18,16,0.08)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: matte press paper
- **Card Style**: rule-topped panels, no box, no accent edge
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: folio rules — 1px hairline dividers, 2px folio caps, 3px section breaks; near-black ink, never a card edge stripe

## Components

### Composition

Compose screens as review spreads: a dominant narrative column, a narrower evidence rail, and rule-capped folio sections locked to one grid.

### Hierarchy

Rank by scale, weight, uppercase mono labeling, and rule thickness; rely on alignment and contrast, not shadow.

### Density

Medium-dense; every dense zone buffered by whitespace bands and folio rules.

### Signature Patterns

- Every section opens with an uppercase monospace label capped by a full-width rule — a publication folio; on the landing the rule draws itself across the viewport.
- Findings and verdicts are set in oversized condensed numerals against smaller serif copy.
- Data tables use strict column alignment, tabular mono values, hairline separators, and alternating paper bands — never pills or chips.
- The verdict is the single red detonation: it floods from a hairline stamp to a full red field on scroll alignment.
- Calls to action are square editorial controls with mono uppercase labels and inverse-ink hover.

## 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-019f709e-0c14-73a2-8f4d-d9469cb0b173/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 Open every section with a mono label and a full-width rule
- Do Reserve red for verdicts, sub-threshold scores, and active markers
- Do Pair condensed uppercase deck headings with serif body and mono metadata
- Do Keep corners square and rule logic consistent across buttons, tables, and forms
- Don't Do not box navigation into a floating card or pill bar
- Don't Do not put a single accent edge on a card — the rule tops the column
- Don't Do not introduce glass, blur, rounded SaaS cards, or gradients
- Don't Do not let red spread past status

## Imagery Direction

### Summary

Institutional two-ink editorial screenprint: signal-red and near-black litho ink on warm paper, halftone, registration crop-marks. Editorial diagrams, audit-style data-viz, restrained institutional technology scenes.

### Pairs With

broadsheet-duotone-press

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "broadsheet",
  "type": "registry:theme",
  "title": "Broadsheet shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E7E1D4",
      "foreground": "#141210",
      "card": "#F5F1E8",
      "card-foreground": "#141210",
      "popover": "#F5F1E8",
      "popover-foreground": "#141210",
      "primary": "#141210",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6C665B",
      "muted-foreground": "#141210",
      "accent": "#C62828",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#141210",
      "input": "#141210",
      "ring": "#C62828",
      "chart-1": "#141210",
      "chart-2": "#f4f4f5",
      "chart-3": "#C62828",
      "chart-4": "#2E7D32",
      "chart-5": "#A66500",
      "sidebar": "#F5F1E8",
      "sidebar-foreground": "#141210",
      "sidebar-primary": "#141210",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0B57D0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#141210",
      "sidebar-ring": "#C62828",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#141210",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C62828",
      "accent-foreground": "#ffffff",
      "destructive": "#B3261E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C62828",
      "chart-1": "#141210",
      "chart-2": "#f4f4f5",
      "chart-3": "#C62828",
      "chart-4": "#2E7D32",
      "chart-5": "#A66500",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#141210",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C62828",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C62828",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f709e-0c14-73a2-8f4d-d9469cb0b173",
    "slug": "broadsheet",
    "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 · broadsheet

DESIGN.md

at a glance

Typography

headline-lgLeague Spartan · 33px · 700

The quick brown fox jumps

headline-mdLeague Spartan · 27px · 600

The quick brown fox jumps

body-mdSource Serif 4 · 17px · 400

The quick brown fox jumps

label-mdIBM Plex 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.

primaryaccentsurfacemutedwarningerror

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: #E7E1D4;
  --foreground: #141210;
  --card: #F5F1E8;
  --card-foreground: #141210;
  --popover: #F5F1E8;
  --popover-foreground: #141210;
  --primary: #141210;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6C665B;
  --muted-foreground: #141210;
  --accent: #C62828;
  --accent-foreground: #ffffff;
  --destructive: #B3261E;
  --border: #141210;
  --input: #141210;
  --ring: #C62828;
  --chart-1: #141210;
  --chart-2: #f4f4f5;
  --chart-3: #C62828;
  --chart-4: #2E7D32;
  --chart-5: #A66500;
  --sidebar: #F5F1E8;
  --sidebar-foreground: #141210;
  --sidebar-primary: #141210;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0B57D0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #141210;
  --sidebar-ring: #C62828;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #141210;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C62828;
  --accent-foreground: #ffffff;
  --destructive: #B3261E;
  --border: #303642;
  --input: #303642;
  --ring: #C62828;
  --chart-1: #141210;
  --chart-2: #f4f4f5;
  --chart-3: #C62828;
  --chart-4: #2E7D32;
  --chart-5: #A66500;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #141210;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C62828;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C62828;
  --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 BroadsheetShadcnKit() {
  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">Broadsheet</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": "broadsheet",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Broadsheet",
  "description": "Institutional review theme for shadcn/ui: warm press paper, near-black litho ink, condensed uppercase display, serif body, monospace metadata, and one rationed signal red for the verdict. Square corners, folio rules, no boxed chrome.",
  "cssVars": {
    "theme": {
      "font-sans": "League Spartan, Arial, sans-serif",
      "font-serif": "Source Serif 4, Georgia, serif",
      "font-mono": "IBM Plex Mono, ui-monospace, monospace",
      "radius": "0px"
    },
    "light": {
      "background": "#E7E1D4",
      "foreground": "#141210",
      "card": "#F5F1E8",
      "card-foreground": "#141210",
      "popover": "#FBF9F3",
      "popover-foreground": "#141210",
      "primary": "#C62828",
      "primary-foreground": "#FBF9F3",
      "secondary": "#F5F1E8",
      "secondary-foreground": "#141210",
      "muted": "#EDE7DA",
      "muted-foreground": "#6C665B",
      "accent": "#141210",
      "accent-foreground": "#FBF9F3",
      "destructive": "#B3261E",
      "destructive-foreground": "#FBF9F3",
      "border": "#141210",
      "input": "#141210",
      "ring": "#C62828",
      "chart-1": "#C62828",
      "chart-2": "#141210",
      "chart-3": "#8E1B1B",
      "chart-4": "#6C665B",
      "chart-5": "#A66500",
      "radius": "0px"
    },
    "dark": {
      "background": "#141210",
      "foreground": "#F1ECE1",
      "card": "#1D1A16",
      "card-foreground": "#F1ECE1",
      "popover": "#1D1A16",
      "popover-foreground": "#F1ECE1",
      "primary": "#E4574F",
      "primary-foreground": "#141210",
      "secondary": "#26221D",
      "secondary-foreground": "#F1ECE1",
      "muted": "#26221D",
      "muted-foreground": "#A49E92",
      "accent": "#F1ECE1",
      "accent-foreground": "#141210",
      "destructive": "#E4574F",
      "destructive-foreground": "#141210",
      "border": "#3A352E",
      "input": "#3A352E",
      "ring": "#E4574F",
      "chart-1": "#E4574F",
      "chart-2": "#F1ECE1",
      "chart-3": "#E07A6E",
      "chart-4": "#A49E92",
      "chart-5": "#D19A4A",
      "radius": "0px"
    }
  },
  "visualProfile": {
    "family": "institutional-editorial",
    "material": "matte press paper, flat litho ink",
    "contour": "square",
    "border": "hairline-to-heavy near-black rules (1/2/3px); folio rules, not boxes",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "deliberate, 180ms cubic-bezier(0.2,0.8,0.2,1); inverse-ink hovers",
    "density": "medium-dense",
    "accents": ["#C62828", "#141210", "#6C665B"]
  },
  "notes": "Square corners are the identity — keep radius 0 everywhere except round pips/dots (9999px). Reserve primary red for the verdict, sub-threshold scores, and active markers; never as a surface fill. Navigation and chrome breathe as page furniture under a rule; do not wrap them in floating cards. Display type is condensed uppercase League Spartan; body is Source Serif 4; all metadata/labels are uppercase IBM Plex Mono."
}

component recipesstored

# shadcn/ui Components — Broadsheet

Author: `katagami-agent`
Registry theme: `broadsheet` (`registry:theme`)

Broadsheet dresses shadcn/ui as an institutional review going to press: warm press
paper, near-black litho ink, condensed uppercase display, serif body, monospace
metadata, and one rationed signal red held back for the verdict. Square corners, folio
rules instead of boxes, inverse-ink hovers.

## ShadSync visual profile

- **family**: institutional-editorial
- **material**: matte press paper, flat litho ink (subtle grain, no gloss)
- **contour**: square (`--radius: 0px`); `9999px` only for pips, dots, radio marks
- **border**: near-black rules — 1px hairline dividers, 2px folio caps, 3px section breaks; a rule tops a column, it is never a card edge stripe
- **underlay**: false — no glass, no blur, no drop-shadow depth
- **grain**: true — faint paper tooth on large surfaces
- **stickerBadges**: false — badges are flat mono caps with a coloured pip
- **motion**: deliberate, 180ms `cubic-bezier(0.2,0.8,0.2,1)`; hover flips paper → ink
- **density**: medium-dense
- **accents**: `#C62828` signal red, `#141210` ink, `#6C665B` annotation

Type roles: **display** = League Spartan 800/900 uppercase `-0.02em`; **body** = Source
Serif 4 17px; **mono** = IBM Plex Mono uppercase `.12em`. No fourth typeface.

## Signature component recipes

- **Button (primary)** — square, mono uppercase label, red or ink fill, `on-accent` paper
  text; hover flips to solid ink. One primary per view; the rest are quiet outline buttons
  with a near-black rule. Chevrons are inline SVG, never glyph characters or emoji.
- **Card** — treated as a *panel*, not a box: a mono label row capped by a full-width rule,
  content below on paper. Never nest cards; never add a single accent edge. The rule is the
  structure.
- **Table** — strict columns, tabular numerals, hairline row separators, alternating paper
  bands; scores set in oversized condensed League Spartan, red below the 70 threshold.
- **Badge** — flat mono caps + a coloured pip (`success`/`warning`/`info`/`primary`); the
  filled variant reverses paper out of red.
- **Input / Select / Textarea** — raised paper fill, 2px ink rule, red inset ring on focus;
  every control explicitly styled, no browser defaults. Select caret is an inline SVG chevron.
- **Tabs** — underline stepper: labels in mono caps, the active tab marked by a 3px red
  underline on a shared bottom rule, never a filled pill.
- **Dialog / Sheet** — square paper surface, a folio label + rule as the header, ink rule
  framing the footer actions; no rounded corners, no shadow scrim beyond a plain ink veil.
- **Switch / Slider / Checkbox / Radio** — square track and thumb (checkbox/switch), round
  pip only for radios and the "on" fill; red marks the checked/active state.

## Preview shots

Rendered scenes live in `preview-shots.json` (`preview-shots-v1`, `renderable-v1`). Three+
product scenes exercise all 16 primitives against the Broadsheet visual profile:

1. **Review verdict header** — masthead, folio rule, verdict badge, primary/quiet buttons.
2. **Evidence matrix** — table with condensed scores, status badges, tabs, separators.
3. **Peer dossier form** — inputs, select, textarea, checkbox, switch, slider, dialog trigger.

Each shot names `mustShow` (folio rule, square corners, rationed red, mono labels) and
`avoid` (rounded cards, boxed nav, accent edge stripes, glyph carets, red as a surface).

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

export function VerdictPanel() {
  return (
    <Card className="rounded-none border-0 bg-card">
      <CardHeader className="pb-2">
        <div className="flex items-end justify-between">
          <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-primary">
            Editorial Verdict
          </span>
          <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-muted-foreground">
            Sheet 04
          </span>
        </div>
        <Separator className="mt-2 h-[3px] bg-foreground" />
        <CardTitle className="mt-4 font-sans text-5xl font-extrabold uppercase tracking-tight">
          Conditional Approval
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="font-serif text-[17px] leading-relaxed">
          Deployment is acceptable only when budget controls, model fallback policies,
          and incident annotation are enforced at the orchestration layer.
        </p>
        <div className="flex items-center gap-3">
          <Badge className="rounded-none bg-primary font-mono uppercase tracking-wider text-primary-foreground">
            Active Review
          </Badge>
          <Button className="rounded-none bg-primary font-mono uppercase tracking-wider">
            Sign off
          </Button>
          <Button variant="outline" className="rounded-none border-2 border-foreground font-mono uppercase tracking-wider">
            Archive
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
```

Every primitive imports from `@/components/ui/` and inherits the `broadsheet` theme tokens
in `export.json`; the recipes above only add square corners, folio rules, and the mono /
serif / display type roles on top.

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": "en-019d9bb8-04c8-7ca0-84e7-1eb5719e43aa",
    "name": "Broadsheet",
    "slug": "broadsheet"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/broadsheet.json",
  "primitives": [
    "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
    "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"
  ],
  "identityNotes": [
    "Every section opens with a monospace uppercase label capped by a full-width rule — the folio device.",
    "Square corners everywhere (radius 0); round only pips, dots, and radio marks.",
    "Signal red is rationed: verdicts, sub-threshold scores, active markers, focus rings — never a surface fill.",
    "Display is condensed uppercase League Spartan; body is Source Serif 4; all labels are uppercase IBM Plex Mono.",
    "Chrome breathes as page furniture under a rule; navigation is never boxed in a floating card or pill bar.",
    "Depth is flat — alignment and rule weight carry authority, not shadow or glass."
  ],
  "visualProfile": {
    "family": "institutional-editorial",
    "material": "matte press paper, flat litho ink",
    "contour": "square",
    "border": "near-black rules 1/2/3px; folio rules, not card edges",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "deliberate 180ms cubic-bezier(0.2,0.8,0.2,1); inverse-ink hover",
    "density": "medium-dense",
    "accents": ["#C62828", "#141210", "#6C665B"]
  },
  "tokens": {
    "background": "#E7E1D4",
    "foreground": "#141210",
    "card": "#F5F1E8",
    "popover": "#FBF9F3",
    "primary": "#C62828",
    "primary-foreground": "#FBF9F3",
    "secondary": "#F5F1E8",
    "muted": "#EDE7DA",
    "muted-foreground": "#6C665B",
    "accent": "#141210",
    "accent-foreground": "#FBF9F3",
    "destructive": "#B3261E",
    "border": "#141210",
    "input": "#141210",
    "ring": "#C62828",
    "radius": "0px",
    "font-sans": "League Spartan, Arial, sans-serif",
    "font-serif": "Source Serif 4, Georgia, serif",
    "font-mono": "IBM Plex Mono, ui-monospace, monospace"
  },
  "shots": [
    {
      "id": "verdict-header",
      "title": "Review verdict header",
      "viewport": "desktop",
      "primitives": ["button", "badge", "separator", "tabs", "dropdown-menu"],
      "composition": "Masthead wordmark and issue line, a monospace folio label capped by a full-width rule, then a condensed uppercase verdict title with an active-review badge, a primary sign-off button, a quiet outline archive button, a tabs row underneath, and a dropdown for issue actions.",
      "mustShow": ["full-width folio rule under the label", "square corners", "one rationed red on the verdict badge and primary button", "uppercase monospace labels"],
      "avoid": ["rounded cards", "boxed or pill navigation", "single accent edge stripe on a panel", "emoji or glyph icons"],
      "scene": {
        "headline": "Conditional Approval",
        "description": "Cloud inference under production load — Issue 07, panel of five, confidence 72%.",
        "stats": [
          {"label": "Weighted Score", "value": "72/100"},
          {"label": "Criteria", "value": "19"},
          {"label": "Alerts", "value": "03"}
        ]
      }
    },
    {
      "id": "evidence-matrix",
      "title": "Evidence matrix table",
      "viewport": "desktop",
      "primitives": ["table", "badge", "separator", "tooltip", "tabs"],
      "composition": "A folio-labelled evidence table: strict columns with tabular numerals, hairline row separators, alternating paper bands, status badges with coloured pips, oversized condensed score numerals set red when below the 70 threshold, and a tooltip on the flagged criterion.",
      "mustShow": ["condensed red score numerals below threshold", "hairline separators and alternating bands", "monospace column headers", "square status badges with pips"],
      "avoid": ["rounded pill chips", "heavy grid borders on every cell", "red used as a row background", "drop shadows"],
      "scene": {
        "headline": "Evidence Matrix",
        "description": "Nineteen criteria, each anchored to an observed state, a trend, and a weighted score.",
        "rows": [
          {"criterion": "Audit Retention", "state": "Partial", "score": "61"},
          {"criterion": "Fallback Policy", "state": "Strong", "score": "84"},
          {"criterion": "Prompt Governance", "state": "Mixed", "score": "69"},
          {"criterion": "Human Escalation", "state": "Strong", "score": "81"}
        ]
      }
    },
    {
      "id": "peer-dossier",
      "title": "Peer dossier form",
      "viewport": "desktop",
      "primitives": ["input", "textarea", "select", "checkbox", "switch", "slider", "button", "dialog"],
      "composition": "A submission dossier under a folio rule: reviewer and institution inputs, a submission-tier select with an inline SVG caret, a commentary textarea, appendix and redline checkboxes, standard-cycle radios, a peer-commentary switch, a confidence slider at 72, a primary submit button, and a confirm dialog trigger.",
      "mustShow": ["raised paper inputs with 2px ink rule", "red inset focus ring", "square checkboxes with round radio pips", "monospace field labels"],
      "avoid": ["browser-default unstyled controls", "rounded input corners", "glyph select caret", "red as the input fill"],
      "scene": {
        "headline": "Peer Submission",
        "description": "Recommend publishing with conditions and route to the methods board.",
        "fields": [
          {"label": "Reviewer", "value": "Dr. Elin Moreno"},
          {"label": "Submission Tier", "value": "External reviewer"},
          {"label": "Confidence Weighting", "value": "72"}
        ]
      }
    },
    {
      "id": "mobile-issue",
      "title": "Mobile review sheet",
      "viewport": "mobile",
      "primitives": ["card", "button", "badge", "separator", "sheet"],
      "composition": "A single-column review sheet at 390px: masthead collapses to wordmark and folio counter, the verdict panel stacks full-width, KPI columns stack under rules, and a sheet trigger opens the section index.",
      "mustShow": ["single column stack", "folio rule preserved at mobile", "full-width primary button", "no horizontal overflow"],
      "avoid": ["shrunk desktop layout", "clipped condensed headline", "boxed floating nav"],
      "scene": {
        "headline": "Issue 07 · Sheet 04",
        "description": "The verdict reads first; evidence follows below the rule.",
        "stats": [
          {"label": "Verdict", "value": "Conditional"},
          {"label": "Confidence", "value": "72%"}
        ]
      }
    }
  ],
  "componentRecipes": [
    {"primitive": "button", "intent": "Primary sign-off: square red fill, mono uppercase label, paper text, hover flips to solid ink; one primary per view."},
    {"primitive": "button", "intent": "Quiet outline: transparent with a 2px near-black rule, mono caps, inverse-ink hover."},
    {"primitive": "card", "intent": "Treated as a panel: mono folio label + full-width rule + paper content; never nested, never edge-striped."},
    {"primitive": "input", "intent": "Raised paper fill, 2px ink rule, red inset ring on focus, serif value text."},
    {"primitive": "textarea", "intent": "Same as input, min 120px, vertical resize, serif line-height 1.5."},
    {"primitive": "select", "intent": "Paper fill with an inline SVG chevron caret; square, ink rule, red focus ring."},
    {"primitive": "dialog", "intent": "Square paper surface, folio label + rule header, ink veil scrim, ink-ruled footer actions."},
    {"primitive": "sheet", "intent": "Edge-anchored square panel for the section index; folio rule header, mono nav links, no card box."},
    {"primitive": "tabs", "intent": "Underline stepper: mono caps labels on a shared bottom rule, active tab marked by a 3px red underline."},
    {"primitive": "badge", "intent": "Flat mono caps with a coloured pip; filled variant reverses paper out of red — no rounded sticker."},
    {"primitive": "separator", "intent": "The folio rule itself: 1px hairline divider, 2px folio cap, 3px section break, near-black ink."},
    {"primitive": "checkbox", "intent": "Square 18px, 2px ink rule, red fill with a paper tick when checked."},
    {"primitive": "switch", "intent": "Square track and thumb; off is paper band, on is red with the thumb reversed to paper."},
    {"primitive": "slider", "intent": "Thin paper-band track, square red thumb, tabular value read-out in mono."},
    {"primitive": "tooltip", "intent": "Square ink block, paper text, mono caps micro-label; appears on the flagged criterion."},
    {"primitive": "dropdown-menu", "intent": "Square paper menu, mono uppercase items, hairline separators, red active marker; no rounded surface."},
    {"primitive": "table", "intent": "Strict columns, tabular numerals, hairline separators, alternating paper bands, condensed red scores below threshold."}
  ],
  "qualityRules": {
    "do": [
      "Open every panel with a monospace label and a full-width rule.",
      "Keep every corner square; reserve 9999px for pips, dots, and radio marks only.",
      "Ration red to verdicts, sub-threshold scores, active markers, and focus rings.",
      "Use the three declared type roles — display / body / mono — and no fourth face.",
      "Let navigation and chrome breathe as page furniture under a rule."
    ],
    "dont": [
      "Box navigation into a floating card or pill bar.",
      "Put a single accent edge stripe on a card or panel.",
      "Introduce glass, blur, rounded SaaS cards, or decorative gradients.",
      "Let red spread into surfaces or become furniture.",
      "Use glyph characters or emoji for carets and icons — inline SVG only."
    ]
  }
}

built with

Palette

Agent-generated

remix lane

try a remix

Keep Broadsheetand 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

Broadsheet

Palette

Art style

Landing PageBroadsheet · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

lineage

Family

Descended from

Institutional Modernist Tech ReviewArchived