Letterer

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels.

Its pictures are drawn in Overprint.

Made by Claude · Claude Code · claude-sonnet-5-5

Download DESIGN.md

Tokens, rules and the paired art style Overprint.

Preview

Open full page

Built with

The art style its pictures are drawn in and the colours its tokens carry.

Art styleOverprintprintView

accent#D5311B

bg#F2C14E

surface#F9E6B4

text#16130C

muted#63512A

border#16130C

surface 2#E8A92E

gutter#FBF6EA

on accent#FBF6EA

PaletteIts colours: 9 of its 15 colour tokens

Typography

Each face set in this language's own words.

headline lgBangers, 31px, 700

Letterer

headline mdBangers, 25px, 600

Letterer

body mdArchivo Narrow, 16px, 400

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and p...

label mdShare Tech Mono, 12px, 600

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and p...

Specification

Philosophy

summary

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels.

Tokens

colors15

#F2C14E

surface

#F9E6B4

surface 2

#E8A92E

gutter

#FBF6EA

text

#16130C

muted

#63512A

border

#16130C

accent

#D5311B

on accent

#FBF6EA

accent 2

#1F4FE0

on accent 2

#FBF6EA

success

#1B7A3D

warning

#C2820E

error

#C2392F

info

#1F4FE0

typography4

heading font: Bangers
body font: Archivo Narrow
mono font: Share Tech Mono
google fonts url: https://fonts.googleapis.com/css2?family=Bangers&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

radii5

none: 0px
sm: 0px
md: 0px
lg: 0px
full: 9999px

spacing11

base: 8px
gutter: 10px
s 1: 4px
s 2: 8px
s 3: 12px
s 4: 16px
s 5: 24px
s 6: 32px
s 7: 48px
s 8: 64px
s 9: 96px

Rules

components

- **Masthead.** An open printed banner across the top: the brand in Bangers at about 32px beside a mono issue line, nav links in mono with a 2px underline for the current page. Never trapped in a pill or a floating card. On the landing it sits over the hero, each link on a small ink block. - **Panel.** Surface fill, 3px ink keyline, zero radius, no shadow, 24px padding. Variants: `ink` (near-black with near-white lettering), `dot` (ink Ben-Day screen), `dot-red` and `dot-blue` (the screen in a spot ink), and `splash` (solid vermillion). - **Knockout.** Inside a dotted panel, paragraphs, labels and titles carry a surface-coloured backing with a 4px spread, so the dot screen stops at the letters. - **Caption box.** Near-white, 3px ink keyline, mono at 14px; a vermillion lead word ("CAPTION.", "META.") opens it. - **Balloon.** Near-white with a 3px ink keyline, fully round lobes (9999px) and a skewed drawn tail; body face at 17 to 18px. The shout balloon is cobalt with near-white lettering. - **Buttons.** One rectangular shape and height (46 to 48px), zero radius, 3px ink keyline, mono 15px uppercase at weight 400, label centred and never wrapping. One primary per group in vermillion; the quieter ones are near-white outline, transparent ghost or cobalt. Hover lifts the button 2px up and left. - **Chips and pips.** Chips are mono 12.5px in a 2px ink frame, near-white, vermillion or cobalt. Pips are 10px round status dots in a 2px ink ring, always beside a text word. - **Stat.** A mono label, a Bangers numeral at 56 to 58px in ink, vermillion or cobalt, and a mono footnote. - **Table (ledger).** An ink header row in mono 12.5px uppercase on near-white lettering; rows in the body face at 15.5px with 2px ink rules; marks and plate names in mono. - **Form fields.** Near-white fill, 3px ink keyline, zero radius, body face at 17px; mono labels above. Focus is a 3px cobalt outline. Toggles are round tracks in an ink ring with a vermillion or near-white knob; on is cobalt. - **Progress bar.** An 18px near-white track in an ink keyline, filled with 45-degree spot-ink stripes. - **Burst.** A round vermillion halftone burst in the top corner of a loud panel; the panel's copy sits above it. - **Footer.** An ink band with the brand in Bangers and mono links in pulp yellow. ### Motion Panels snap into the tier like frames being pasted onto a page: a short translate and ink-in, 200ms, `cubic-bezier(0.2, 0.85, 0.25, 1)`. The settled, fully rendered page is the default and is visible with no JavaScript; an inline script gates the hidden start state behind `html.anim` and respects `prefers-reduced-motion`. ### Imagery Imagery is risograph comic-ink overprint, from the paired art style Overprint: dense black linework, coarse Ben-Day halftone screens and a few flat spot-colour passes (black, vermillion, cobalt) deliberately misregistered, on golden newsprint pulp. The landing hero is a full-bleed splash panel, the opening frame of the issue, set through `background-image: var(--hero-image)`, with an ink plate carrying the headline, a balloon and the call to action over its lower band, never a gradient scrim. Fetch https://katagami.ai/art-styles/en-019ef728-5a0f-7ba1-93b3-5164fee4c337 for the full recipe and generate real images in it; never substitute CSS shapes, stock photography or placeholders.

Layout

summary

- **Comic tier system.** Each row is a grid of unequal `minmax(0, 1fr)` panels separated by a 10px gutter, with `min-width: 0` children so grids never blow out. Rows vary: 2+1, 1+2, 3-up, 1.6+1+1, full-bleed splash. - **The gutter is the whitespace.** One constant channel between panels; generous padding inside panels (24px); 64px between tiers; padding above every title so it never sticks to a container top. - **Density.** Dense within panels, released by the gutter and by full-bleed splash and pull-quote moments between tiers. The condensed lettering lets a panel hold a full sentence without growing. - **The page.** Golden pulp under a 7px Ben-Day screen, capped at 1320px and centred between 5px ink rules; the body outside it is the near-white gutter. - **Responsive.** Renders from about 390px to 2560px and wider. Wide tiers relax to two-up below 860px and stack to a single column below 560px, with the gutter as vertical breathing room. Non-essential nav links and table columns drop on mobile; nothing overflows horizontally. On a phone the hero plate tightens its side padding and its kicker tracking so the kicker stays on one line. Ultra-wide caps and centres the page while only the hero splash spans 100vw.

Guidance

Do

lay screens out as comic tiers held apart by the gutter, and vary panel widths for pacing.
letter shouts, panel titles and numerals in Bangers capitals at +0.02em, a fifth larger than a wide grotesque would need.
fit caption-length copy into narrow boxes with Archivo Narrow and Share Tech Mono instead of shrinking the type.
knock the dot screen out under every line of copy on a dotted panel.
carry metadata in caption boxes and primary voice in balloons with a drawn tail.
keep ink near-black and the pulp golden, and use vermillion and cobalt like highlighters.

Avoid

fake a bold: Bangers and Share Tech Mono have one weight, so set `font-synthesis: none` and mark emphasis with the vermillion lead word.
track Bangers negative; its letters touch.
float cards on drop shadows or give a panel a single coloured accent edge; depth is the gutter and the dot.
round the corners of panels or controls, or trap the nav in a pill bar.
let a button or chip label wrap; the row wraps instead.
use emoji or symbol glyphs in copy; use SVG primitives.

Imagery

pairs with

overprint

art style id

en-019ef728-5a0f-7ba1-93b3-5164fee4c337

Katagami spec file

# Letterer

## Philosophy

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2C14E` |
| surface | `#F9E6B4` |
| surface_2 | `#E8A92E` |
| gutter | `#FBF6EA` |
| text | `#16130C` |
| muted | `#63512A` |
| border | `#16130C` |
| accent | `#D5311B` |
| on_accent | `#FBF6EA` |
| accent_2 | `#1F4FE0` |
| on_accent_2 | `#FBF6EA` |
| success | `#1B7A3D` |
| warning | `#C2820E` |
| error | `#C2392F` |
| info | `#1F4FE0` |

### Typography

- **Heading Font**: Bangers
- **Body Font**: Archivo Narrow
- **Mono Font**: Share Tech Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bangers&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Radii

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

### Spacing

- **Base**: 8px
- **Gutter**: 10px
- **S-1**: 4px
- **S-2**: 8px
- **S-3**: 12px
- **S-4**: 16px
- **S-5**: 24px
- **S-6**: 32px
- **S-7**: 48px
- **S-8**: 64px
- **S-9**: 96px

## Rules

### Components

- **Masthead.** An open printed banner across the top: the brand in Bangers at about 32px beside a mono issue line, nav links in mono with a 2px underline for the current page. Never trapped in a pill or a floating card. On the landing it sits over the hero, each link on a small ink block.
- **Panel.** Surface fill, 3px ink keyline, zero radius, no shadow, 24px padding. Variants: `ink` (near-black with near-white lettering), `dot` (ink Ben-Day screen), `dot-red` and `dot-blue` (the screen in a spot ink), and `splash` (solid vermillion).
- **Knockout.** Inside a dotted panel, paragraphs, labels and titles carry a surface-coloured backing with a 4px spread, so the dot screen stops at the letters.
- **Caption box.** Near-white, 3px ink keyline, mono at 14px; a vermillion lead word ("CAPTION.", "META.") opens it.
- **Balloon.** Near-white with a 3px ink keyline, fully round lobes (9999px) and a skewed drawn tail; body face at 17 to 18px. The shout balloon is cobalt with near-white lettering.
- **Buttons.** One rectangular shape and height (46 to 48px), zero radius, 3px ink keyline, mono 15px uppercase at weight 400, label centred and never wrapping. One primary per group in vermillion; the quieter ones are near-white outline, transparent ghost or cobalt. Hover lifts the button 2px up and left.
- **Chips and pips.** Chips are mono 12.5px in a 2px ink frame, near-white, vermillion or cobalt. Pips are 10px round status dots in a 2px ink ring, always beside a text word.
- **Stat.** A mono label, a Bangers numeral at 56 to 58px in ink, vermillion or cobalt, and a mono footnote.
- **Table (ledger).** An ink header row in mono 12.5px uppercase on near-white lettering; rows in the body face at 15.5px with 2px ink rules; marks and plate names in mono.
- **Form fields.** Near-white fill, 3px ink keyline, zero radius, body face at 17px; mono labels above. Focus is a 3px cobalt outline. Toggles are round tracks in an ink ring with a vermillion or near-white knob; on is cobalt.
- **Progress bar.** An 18px near-white track in an ink keyline, filled with 45-degree spot-ink stripes.
- **Burst.** A round vermillion halftone burst in the top corner of a loud panel; the panel's copy sits above it.
- **Footer.** An ink band with the brand in Bangers and mono links in pulp yellow.

### Motion

Panels snap into the tier like frames being pasted onto a page: a short translate and ink-in, 200ms, `cubic-bezier(0.2, 0.85, 0.25, 1)`. The settled, fully rendered page is the default and is visible with no JavaScript; an inline script gates the hidden start state behind `html.anim` and respects `prefers-reduced-motion`.

### Imagery

Imagery is risograph comic-ink overprint, from the paired art style Overprint: dense black linework, coarse Ben-Day halftone screens and a few flat spot-colour passes (black, vermillion, cobalt) deliberately misregistered, on golden newsprint pulp. The landing hero is a full-bleed splash panel, the opening frame of the issue, set through `background-image: var(--hero-image)`, with an ink plate carrying the headline, a balloon and the call to action over its lower band, never a gradient scrim. Fetch https://katagami.ai/art-styles/en-019ef728-5a0f-7ba1-93b3-5164fee4c337 for the full recipe and generate real images in it; never substitute CSS shapes, stock photography or placeholders.

## Layout

### Summary

- **Comic tier system.** Each row is a grid of unequal `minmax(0, 1fr)` panels separated by a 10px gutter, with `min-width: 0` children so grids never blow out. Rows vary: 2+1, 1+2, 3-up, 1.6+1+1, full-bleed splash.
- **The gutter is the whitespace.** One constant channel between panels; generous padding inside panels (24px); 64px between tiers; padding above every title so it never sticks to a container top.
- **Density.** Dense within panels, released by the gutter and by full-bleed splash and pull-quote moments between tiers. The condensed lettering lets a panel hold a full sentence without growing.
- **The page.** Golden pulp under a 7px Ben-Day screen, capped at 1320px and centred between 5px ink rules; the body outside it is the near-white gutter.
- **Responsive.** Renders from about 390px to 2560px and wider. Wide tiers relax to two-up below 860px and stack to a single column below 560px, with the gutter as vertical breathing room. Non-essential nav links and table columns drop on mobile; nothing overflows horizontally. On a phone the hero plate tightens its side padding and its kicker tracking so the kicker stays on one line. Ultra-wide caps and centres the page while only the hero splash spans 100vw.

## Guidance

### Do

- lay screens out as comic tiers held apart by the gutter, and vary panel widths for pacing.
- letter shouts, panel titles and numerals in Bangers capitals at +0.02em, a fifth larger than a wide grotesque would need.
- fit caption-length copy into narrow boxes with Archivo Narrow and Share Tech Mono instead of shrinking the type.
- knock the dot screen out under every line of copy on a dotted panel.
- carry metadata in caption boxes and primary voice in balloons with a drawn tail.
- keep ink near-black and the pulp golden, and use vermillion and cobalt like highlighters.

### Don't

- fake a bold: Bangers and Share Tech Mono have one weight, so set `font-synthesis: none` and mark emphasis with the vermillion lead word.
- track Bangers negative; its letters touch.
- float cards on drop shadows or give a panel a single coloured accent edge; depth is the gutter and the dot.
- round the corners of panels or controls, or trap the nav in a pill bar.
- let a button or chip label wrap; the row wraps instead.
- use emoji or symbol glyphs in copy; use SVG primitives.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019ef728-5a0f-7ba1-93b3-5164fee4c337

DESIGN.md file

---
version: "alpha"
name: "Letterer"
description: "Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels."
colors:
  bg: "#F2C14E"
  surface: "#F9E6B4"
  surface_2: "#E8A92E"
  gutter: "#FBF6EA"
  text: "#16130C"
  muted: "#63512A"
  border: "#16130C"
  accent: "#D5311B"
  on_accent: "#FBF6EA"
  accent_2: "#1F4FE0"
  on_accent_2: "#FBF6EA"
  success: "#1B7A3D"
  warning: "#C2820E"
  error: "#C2392F"
  info: "#1F4FE0"
typography:
  headline-lg:
    fontFamily: "Bangers"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Bangers"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo Narrow"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  gutter: "10px"
  s-1: "4px"
  s-2: "8px"
  s-3: "12px"
  s-4: "16px"
  s-5: "24px"
  s-6: "32px"
  s-7: "48px"
  s-8: "64px"
  s-9: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-gutter:
    backgroundColor: "{colors.gutter}"
  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-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-on_accent_2:
    backgroundColor: "{colors.on_accent_2}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Letterer

## Overview

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels.

## 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 | `#F2C14E` |
| surface | `#F9E6B4` |
| surface_2 | `#E8A92E` |
| gutter | `#FBF6EA` |
| text | `#16130C` |
| muted | `#63512A` |
| border | `#16130C` |
| accent | `#D5311B` |
| on_accent | `#FBF6EA` |
| accent_2 | `#1F4FE0` |
| on_accent_2 | `#FBF6EA` |
| success | `#1B7A3D` |
| warning | `#C2820E` |
| error | `#C2392F` |
| info | `#1F4FE0` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Bangers&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

- **Headline-Lg**: Bangers, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Bangers, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo Narrow, 16px, weight 400, line-height 1.5.
- **Label-Md**: Share Tech Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Gutter**: `10px`
- **S-1**: `4px`
- **S-2**: `8px`
- **S-3**: `12px`
- **S-4**: `16px`
- **S-5**: `24px`
- **S-6**: `32px`
- **S-7**: `48px`
- **S-8**: `64px`
- **S-9**: `96px`

### Summary

- **Comic tier system.** Each row is a grid of unequal `minmax(0, 1fr)` panels separated by a 10px gutter, with `min-width: 0` children so grids never blow out. Rows vary: 2+1, 1+2, 3-up, 1.6+1+1, full-bleed splash.
- **The gutter is the whitespace.** One constant channel between panels; generous padding inside panels (24px); 64px between tiers; padding above every title so it never sticks to a container top.
- **Density.** Dense within panels, released by the gutter and by full-bleed splash and pull-quote moments between tiers. The condensed lettering lets a panel hold a full sentence without growing.
- **The page.** Golden pulp under a 7px Ben-Day screen, capped at 1320px and centred between 5px ink rules; the body outside it is the near-white gutter.
- **Responsive.** Renders from about 390px to 2560px and wider. Wide tiers relax to two-up below 860px and stack to a single column below 560px, with the gutter as vertical breathing room. Non-essential nav links and table columns drop on mobile; nothing overflows horizontally. On a phone the hero plate tightens its side padding and its kicker tracking so the kicker stays on one line. Ultra-wide caps and centres the page while only the hero splash spans 100vw.

## Shapes

### Rounded

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

## Components

### Components

- **Masthead.** An open printed banner across the top: the brand in Bangers at about 32px beside a mono issue line, nav links in mono with a 2px underline for the current page. Never trapped in a pill or a floating card. On the landing it sits over the hero, each link on a small ink block.
- **Panel.** Surface fill, 3px ink keyline, zero radius, no shadow, 24px padding. Variants: `ink` (near-black with near-white lettering), `dot` (ink Ben-Day screen), `dot-red` and `dot-blue` (the screen in a spot ink), and `splash` (solid vermillion).
- **Knockout.** Inside a dotted panel, paragraphs, labels and titles carry a surface-coloured backing with a 4px spread, so the dot screen stops at the letters.
- **Caption box.** Near-white, 3px ink keyline, mono at 14px; a vermillion lead word ("CAPTION.", "META.") opens it.
- **Balloon.** Near-white with a 3px ink keyline, fully round lobes (9999px) and a skewed drawn tail; body face at 17 to 18px. The shout balloon is cobalt with near-white lettering.
- **Buttons.** One rectangular shape and height (46 to 48px), zero radius, 3px ink keyline, mono 15px uppercase at weight 400, label centred and never wrapping. One primary per group in vermillion; the quieter ones are near-white outline, transparent ghost or cobalt. Hover lifts the button 2px up and left.
- **Chips and pips.** Chips are mono 12.5px in a 2px ink frame, near-white, vermillion or cobalt. Pips are 10px round status dots in a 2px ink ring, always beside a text word.
- **Stat.** A mono label, a Bangers numeral at 56 to 58px in ink, vermillion or cobalt, and a mono footnote.
- **Table (ledger).** An ink header row in mono 12.5px uppercase on near-white lettering; rows in the body face at 15.5px with 2px ink rules; marks and plate names in mono.
- **Form fields.** Near-white fill, 3px ink keyline, zero radius, body face at 17px; mono labels above. Focus is a 3px cobalt outline. Toggles are round tracks in an ink ring with a vermillion or near-white knob; on is cobalt.
- **Progress bar.** An 18px near-white track in an ink keyline, filled with 45-degree spot-ink stripes.
- **Burst.** A round vermillion halftone burst in the top corner of a loud panel; the panel's copy sits above it.
- **Footer.** An ink band with the brand in Bangers and mono links in pulp yellow.

### Motion

Panels snap into the tier like frames being pasted onto a page: a short translate and ink-in, 200ms, `cubic-bezier(0.2, 0.85, 0.25, 1)`. The settled, fully rendered page is the default and is visible with no JavaScript; an inline script gates the hidden start state behind `html.anim` and respects `prefers-reduced-motion`.

### Imagery

Imagery is risograph comic-ink overprint, from the paired art style Overprint: dense black linework, coarse Ben-Day halftone screens and a few flat spot-colour passes (black, vermillion, cobalt) deliberately misregistered, on golden newsprint pulp. The landing hero is a full-bleed splash panel, the opening frame of the issue, set through `background-image: var(--hero-image)`, with an ink plate carrying the headline, a balloon and the call to action over its lower band, never a gradient scrim. Fetch https://katagami.ai/art-styles/en-019ef728-5a0f-7ba1-93b3-5164fee4c337 for the full recipe and generate real images in it; never substitute CSS shapes, stock photography or placeholders.

## 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-01a1134c-b702-7270-bae9-6d4fab36b236/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1134c-b702-7270-bae9-6d4fab36b236/shadcn.json` (registry theme), `/language/en-01a1134c-b702-7270-bae9-6d4fab36b236/shadcn-components.md` (component recipes) and `/language/en-01a1134c-b702-7270-bae9-6d4fab36b236/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do lay screens out as comic tiers held apart by the gutter, and vary panel widths for pacing.
- Do letter shouts, panel titles and numerals in Bangers capitals at +0.02em, a fifth larger than a wide grotesque would need.
- Do fit caption-length copy into narrow boxes with Archivo Narrow and Share Tech Mono instead of shrinking the type.
- Do knock the dot screen out under every line of copy on a dotted panel.
- Do carry metadata in caption boxes and primary voice in balloons with a drawn tail.
- Do keep ink near-black and the pulp golden, and use vermillion and cobalt like highlighters.
- Don't fake a bold: Bangers and Share Tech Mono have one weight, so set `font-synthesis: none` and mark emphasis with the vermillion lead word.
- Don't track Bangers negative; its letters touch.
- Don't float cards on drop shadows or give a panel a single coloured accent edge; depth is the gutter and the dot.
- Don't round the corners of panels or controls, or trap the nav in a pill bar.
- Don't let a button or chip label wrap; the row wraps instead.
- Don't use emoji or symbol glyphs in copy; use SVG primitives.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019ef728-5a0f-7ba1-93b3-5164fee4c337

shadcn/ui theme file

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "letterer",
  "type": "registry:theme",
  "title": "Letterer shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2C14E",
      "foreground": "#16130C",
      "card": "#F9E6B4",
      "card-foreground": "#16130C",
      "popover": "#F9E6B4",
      "popover-foreground": "#16130C",
      "primary": "#16130C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#63512A",
      "muted-foreground": "#16130C",
      "accent": "#D5311B",
      "accent-foreground": "#ffffff",
      "destructive": "#C2392F",
      "border": "#16130C",
      "input": "#16130C",
      "ring": "#D5311B",
      "chart-1": "#16130C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D5311B",
      "chart-4": "#1B7A3D",
      "chart-5": "#C2820E",
      "sidebar": "#F9E6B4",
      "sidebar-foreground": "#16130C",
      "sidebar-primary": "#16130C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F4FE0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#16130C",
      "sidebar-ring": "#D5311B",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#16130C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D5311B",
      "accent-foreground": "#ffffff",
      "destructive": "#C2392F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D5311B",
      "chart-1": "#16130C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D5311B",
      "chart-4": "#1B7A3D",
      "chart-5": "#C2820E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#16130C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D5311B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D5311B",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1134c-b702-7270-bae9-6d4fab36b236",
    "slug": "letterer",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "bg",
        "border",
        "error",
        "gutter",
        "info",
        "muted",
        "on_accent",
        "on_accent_2",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "spacing": [
        "base",
        "gutter",
        "s-1",
        "s-2",
        "s-3",
        "s-4",
        "s-5",
        "s-6",
        "s-7",
        "s-8",
        "s-9"
      ]
    }
  }
}
```

shadcn/ui kit

Theme variables only

The theme variables are generated from the tokens. Component recipes and preview shots have not been written for this language yet.

Theme check

Standard shadcn primitives drawn with this language’s theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

DESIGN.md with shadcn

For an app that uses shadcn/ui: the DESIGN.md plus the install list, theme variables, component recipes, preview shots and a starter TSX file, in one Markdown file.

Implementation filesShow

The same pieces as separate files: theme, CSS, TSX starter, recipes and the 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: #F2C14E;
  --foreground: #16130C;
  --card: #F9E6B4;
  --card-foreground: #16130C;
  --popover: #F9E6B4;
  --popover-foreground: #16130C;
  --primary: #16130C;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #63512A;
  --muted-foreground: #16130C;
  --accent: #D5311B;
  --accent-foreground: #ffffff;
  --destructive: #C2392F;
  --border: #16130C;
  --input: #16130C;
  --ring: #D5311B;
  --chart-1: #16130C;
  --chart-2: #f4f4f5;
  --chart-3: #D5311B;
  --chart-4: #1B7A3D;
  --chart-5: #C2820E;
  --sidebar: #F9E6B4;
  --sidebar-foreground: #16130C;
  --sidebar-primary: #16130C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1F4FE0;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #16130C;
  --sidebar-ring: #D5311B;
  --radius: 0px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #16130C;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D5311B;
  --accent-foreground: #ffffff;
  --destructive: #C2392F;
  --border: #303642;
  --input: #303642;
  --ring: #D5311B;
  --chart-1: #16130C;
  --chart-2: #f4f4f5;
  --chart-3: #D5311B;
  --chart-4: #1B7A3D;
  --chart-5: #C2820E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #16130C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D5311B;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D5311B;
  --radius: 0px;
}

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 LettererShadcnKit() {
  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">Letterer</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 JSONGenerated from the tokens

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "letterer",
  "type": "registry:theme",
  "title": "Letterer shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2C14E",
      "foreground": "#16130C",
      "card": "#F9E6B4",
      "card-foreground": "#16130C",
      "popover": "#F9E6B4",
      "popover-foreground": "#16130C",
      "primary": "#16130C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#63512A",
      "muted-foreground": "#16130C",
      "accent": "#D5311B",
      "accent-foreground": "#ffffff",
      "destructive": "#C2392F",
      "border": "#16130C",
      "input": "#16130C",
      "ring": "#D5311B",
      "chart-1": "#16130C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D5311B",
      "chart-4": "#1B7A3D",
      "chart-5": "#C2820E",
      "sidebar": "#F9E6B4",
      "sidebar-foreground": "#16130C",
      "sidebar-primary": "#16130C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F4FE0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#16130C",
      "sidebar-ring": "#D5311B",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#16130C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D5311B",
      "accent-foreground": "#ffffff",
      "destructive": "#C2392F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D5311B",
      "chart-1": "#16130C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D5311B",
      "chart-4": "#1B7A3D",
      "chart-5": "#C2820E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#16130C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D5311B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D5311B",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1134c-b702-7270-bae9-6d4fab36b236",
    "slug": "letterer",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "bg",
        "border",
        "error",
        "gutter",
        "info",
        "muted",
        "on_accent",
        "on_accent_2",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "spacing": [
        "base",
        "gutter",
        "s-1",
        "s-2",
        "s-3",
        "s-4",
        "s-5",
        "s-6",
        "s-7",
        "s-8",
        "s-9"
      ]
    }
  }
}

component recipesGenerated from the tokens

# Letterer shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-01a1134c-b702-7270-bae9-6d4fab36b236`
Slug: `letterer`

## Intent

Benday's comic page on golden newsprint pulp, re-lettered in condensed comic faces so caption-length text fits narrow balloons, caption boxes and phone-width scene panels.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

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

## Token cues

Colors:

{
  "bg": "#F2C14E",
  "surface": "#F9E6B4",
  "surface_2": "#E8A92E",
  "gutter": "#FBF6EA",
  "text": "#16130C",
  "muted": "#63512A",
  "border": "#16130C",
  "accent": "#D5311B",
  "on_accent": "#FBF6EA",
  "accent_2": "#1F4FE0",
  "on_accent_2": "#FBF6EA",
  "success": "#1B7A3D",
  "warning": "#C2820E",
  "error": "#C2392F",
  "info": "#1F4FE0"
}

Typography:

{
  "heading_font": "Bangers",
  "body_font": "Archivo Narrow",
  "mono_font": "Share Tech Mono",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Bangers&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap"
}

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/letterer/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: lay screens out as comic tiers held apart by the gutter, and vary panel widths for pacing.; letter shouts, panel titles and numerals in Bangers capitals at +0.02em, a fifth larger than a wide grotesque would need.; fit caption-length copy into narrow boxes with Archivo Narrow and Share Tech Mono instead of shrinking the type.; knock the dot screen out under every line of copy on a dotted panel.; carry metadata in caption boxes and primary voice in balloons with a drawn tail.; keep ink near-black and the pulp golden, and use vermillion and cobalt like highlighters.
- Do not: fake a bold: Bangers and Share Tech Mono have one weight, so set `font-synthesis: none` and mark emphasis with the vermillion lead word.; track Bangers negative; its letters touch.; float cards on drop shadows or give a panel a single coloured accent edge; depth is the gutter and the dot.; round the corners of panels or controls, or trap the nav in a pill bar.; let a button or chip label wrap; the row wraps instead.; use emoji or symbol glyphs in copy; use SVG primitives.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
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 LettererShadcnKit() {
  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">Letterer</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>
  );
}
```

## Layout notes

{
  "summary": "- **Comic tier system.** Each row is a grid of unequal `minmax(0, 1fr)` panels separated by a 10px gutter, with `min-width: 0` children so grids never blow out. Rows vary: 2+1, 1+2, 3-up, 1.6+1+1, full-bleed splash.\n- **The gutter is the whitespace.** One constant channel between panels; generous padding inside panels (24px); 64px between tiers; padding above every title so it never sticks to a container top.\n- **Density.** Dense within panels, released by the gutter and by full-bleed splash and pull-quote moments between tiers. The condensed lettering lets a panel hold a full sentence without growing.\n- **The page.** Golden pulp under a 7px Ben-Day screen, capped at 1320px and centred between 5px ink rules; the body outside it is the near-white gutter.\n- **Responsive.** Renders from about 390px to 2560px and wider. Wide tiers relax to two-up below 860px and stack to a single column below 560px, with the gutter as vertical breathing room. Non-essential nav links and table columns drop on mobile; nothing overflows horizontally. On a phone the hero plate tightens its side padding and its kicker tracking so the kicker stays on one line. Ultra-wide caps and centres the page while only the hero splash spans 100vw."
}

preview shotsGenerated from the tokens

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-01a1134c-b702-7270-bae9-6d4fab36b236",
    "name": "Letterer",
    "slug": "letterer"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Letterer launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "lay screens out as comic tiers held apart by the gutter, and vary panel widths for pacing.",
      "letter shouts, panel titles and numerals in Bangers capitals at +0.02em, a fifth larger than a wide grotesque would need.",
      "fit caption-length copy into narrow boxes with Archivo Narrow and Share Tech Mono instead of shrinking the type.",
      "knock the dot screen out under every line of copy on a dotted panel.",
      "carry metadata in caption boxes and primary voice in balloons with a drawn tail.",
      "keep ink near-black and the pulp golden, and use vermillion and cobalt like highlighters."
    ],
    "dont": [
      "fake a bold: Bangers and Share Tech Mono have one weight, so set `font-synthesis: none` and mark emphasis with the vermillion lead word.",
      "track Bangers negative; its letters touch.",
      "float cards on drop shadows or give a panel a single coloured accent edge; depth is the gutter and the dot.",
      "round the corners of panels or controls, or trap the nav in a pill bar.",
      "let a button or chip label wrap; the row wraps instead.",
      "use emoji or symbol glyphs in copy; use SVG primitives."
    ]
  }
}

Try a remix

Keep Letterer and swap a palette and an art style onto it. The landing recolors live.

UI language

Letterer

Palette

Art style

Family

Evolved from

Benday