design language·emigre-vernacular-type-console

Emigre Vernacular Type Console

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

Archived

Download DESIGN.md

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

the spec

specification

philosophy

summary

A high-contrast postmodern console language where Emigre-era typographic pluralism, vernacular sign fragments, Cranbrook layering, and manga sound-effect force are disciplined into a usable agentic software surface. It treats interface state as public signage: everything has a label, a frame, a citation, and an operational consequence.

values

Plural typography as system logic, not decorationDecorated-shed symbolism: signs explain function before ornamentBlack-and-white manga energy translated into panels, captions, and impact marksTerminal explicitness with readable hierarchy and product restraintPostmodern anti-universalism made operational through local labels, stamps, and state codes

anti-values

×Neon cyberpunk, vaporwave gradients, generic Y2K chrome, or hacker cosplay×Flat Memphis confetti with no material or semantic role×AI dashboard sameness: equal cards, vague metrics, soft shadows, default rounded SaaS×Illegible deconstruction that sacrifices task completion

tokens

borders4 items

accent width: 5px
character: Borders behave like printed gutters and terminal frames: thick for ownership, thin for data, dashed for provisional annotations.
default width: 2px
style: solid, double, and selective dashed annotation rules

colors12 items

accent

#111111

background

#F7F4EC

border

#050505

error

#D71920

info

#0057B8

muted

#6E6A61

primary

#050505

secondary

#F4F1E8

success

#138A36

surface

#FFFFFF

text

#050505

warning

#C57A00

motion3 items

duration: 140ms
easing: steps(2, end)
philosophy: Motion should feel like a terminal repaint or manga panel snap: short stepped shifts, no floating ease, no ornamental loops.

radii5 items

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

shadows3 items

lg: 10px 10px 0 #050505
md: 6px 6px 0 #050505
sm: 3px 3px 0 #050505

spacing2 items

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

surfaces3 items

bg pattern: Layered radial bitmap dots plus thin vertical rule columns on warm newsprint.
card style: Hard-edged white or cream panels with double black borders, offset caption tabs, and square ink shadows.
treatment: Monochrome paper-console fields with bitmap dot patterns, hatch strips, and visible registration marks.

typography8 items

base size: 16px
body font: Archivo Narrow
google fonts url: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Bodoni+Moda:opsz,wght@6..96,700;6..96,900&family=Sono:wght@400;500;700&display=swap
heading font: Bodoni Moda
letter spacing: -0.015em
line height: 1.42
mono font: Sono
scale ratio: 1.28

rules

composition

Build screens as decorated operational broadsheets: one dominant console panel, one typographic headline slab, and supporting cards that overlap gutters by small measured offsets. Use signage and labels to clarify why panels differ rather than making arbitrary collage.

density

Medium-high density is acceptable when grouped by strong gutters, black labels, and generous internal leading; no area should become texture-only or unreadable.

hierarchy

Hierarchy comes from typographic collision under control: Bodoni Moda for editorial command, Archivo Narrow for dense UI labels, Sono for machine state. Size jumps are large, but each text role remains consistent across the product.

signature patterns

Corner-pinned vernacular tabs: small black, white, or semantic-color labels rotated one or two degrees and attached to double-bordered panels with CSS transforms.Bitmap-state underlays: repeating-radial-gradient dot fields and hatch strips appear behind terminal logs, empty states, and manga SFX words without reducing text contrast.Manga SFX command bursts: oversized serif or condensed words such as SYNC, CUT, HOLD, or RUN break panel edges and label important system transitions.Decorated-shed affordance stamps: buttons, badges, and warnings use explicit noun labels, serial numbers, arrows, and square shadow offsets instead of icon-only mystery controls.

layout

breakpoints

mobile 375px, tablet 768px, desktop 1200px and above

grid

Twelve-column desktop grid with 2px gutters as visible ink rules; tablet collapses to six columns and mobile to one column while keeping label tabs and double borders.

whitespace

Whitespace is not empty luxury; it is a gutter, caption shelf, or margin note area. Use tight internal padding with larger external panel breaks.

guidance

Use black and warm white as the identity; introduce red, green, amber, or blue only when the interface state requires it.
Make deconstruction legible: every overlap, rotated tab, and type shift should name a product state or relationship.
Pair expressive SFX words with ordinary controls so the surface remains usable for agent monitoring, approvals, and editing.
Keep focus states thick, square, and high contrast for keyboard use.

avoid

Do not use neon gradients, glass panels, chrome, matrix green, or generic cyberpunk terminal clichés.
Do not scatter Memphis shapes as decoration; geometry must be a panel, badge, hatch, tab, or material cue.
Do not let layered typography cover body copy, form fields, or critical state values.
Do not soften the language into rounded SaaS cards or pastel editorial minimalism.

katagami spec

# Emigre Vernacular Type Console

## Philosophy

A high-contrast postmodern console language where Emigre-era typographic pluralism, vernacular sign fragments, Cranbrook layering, and manga sound-effect force are disciplined into a usable agentic software surface. It treats interface state as public signage: everything has a label, a frame, a citation, and an operational consequence.

### Values

- Plural typography as system logic, not decoration
- Decorated-shed symbolism: signs explain function before ornament
- Black-and-white manga energy translated into panels, captions, and impact marks
- Terminal explicitness with readable hierarchy and product restraint
- Postmodern anti-universalism made operational through local labels, stamps, and state codes

### Anti-Values

- Neon cyberpunk, vaporwave gradients, generic Y2K chrome, or hacker cosplay
- Flat Memphis confetti with no material or semantic role
- AI dashboard sameness: equal cards, vague metrics, soft shadows, default rounded SaaS
- Illegible deconstruction that sacrifices task completion

### Visual Character

- Use an asymmetric twelve-column CSS grid with thick black rule dividers, offset panel spans, and small rotated label tabs pinned to panel corners.
- Combine a condensed grotesk interface face, a high-contrast serif headline face, and a monospaced terminal face with intentionally abrupt scale changes between captions, SFX labels, and operational data.
- Render surfaces as monochrome paper-console panels using bitmap dot underlays, diagonal hatch bands, double borders, and clipped caption blocks instead of gradients or soft shadows.
- Reserve color for semantic system state only: red error stamps, green success ticks, amber warning lozenges, and blue information tags against an otherwise black, white, and gray system.

## Tokens

### Borders

- **Accent Width**: 5px
- **Character**: Borders behave like printed gutters and terminal frames: thick for ownership, thin for data, dashed for provisional annotations.
- **Default Width**: 2px
- **Style**: solid, double, and selective dashed annotation rules

### Colors

| Name | Value |
|------|-------|
| accent | `#111111` |
| background | `#F7F4EC` |
| border | `#050505` |
| error | `#D71920` |
| info | `#0057B8` |
| muted | `#6E6A61` |
| primary | `#050505` |
| secondary | `#F4F1E8` |
| success | `#138A36` |
| surface | `#FFFFFF` |
| text | `#050505` |
| warning | `#C57A00` |

### Motion

- **Duration**: 140ms
- **Easing**: steps(2, end)
- **Philosophy**: Motion should feel like a terminal repaint or manga panel snap: short stepped shifts, no floating ease, no ornamental loops.

### Radii

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

### Shadows

- **Lg**: 10px 10px 0 #050505
- **Md**: 6px 6px 0 #050505
- **Sm**: 3px 3px 0 #050505

### Spacing

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

### Surfaces

- **Bg Pattern**: Layered radial bitmap dots plus thin vertical rule columns on warm newsprint.
- **Card Style**: Hard-edged white or cream panels with double black borders, offset caption tabs, and square ink shadows.
- **Treatment**: Monochrome paper-console fields with bitmap dot patterns, hatch strips, and visible registration marks.

### Typography

- **Base Size**: 16px
- **Body Font**: Archivo Narrow
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Bodoni+Moda:opsz,wght@6..96,700;6..96,900&family=Sono:wght@400;500;700&display=swap
- **Heading Font**: Bodoni Moda
- **Letter Spacing**: -0.015em
- **Line Height**: 1.42
- **Mono Font**: Sono
- **Scale Ratio**: 1.28

## Rules

### Composition

Build screens as decorated operational broadsheets: one dominant console panel, one typographic headline slab, and supporting cards that overlap gutters by small measured offsets. Use signage and labels to clarify why panels differ rather than making arbitrary collage.

### Density

Medium-high density is acceptable when grouped by strong gutters, black labels, and generous internal leading; no area should become texture-only or unreadable.

### Hierarchy

Hierarchy comes from typographic collision under control: Bodoni Moda for editorial command, Archivo Narrow for dense UI labels, Sono for machine state. Size jumps are large, but each text role remains consistent across the product.

### Signature Patterns

- Corner-pinned vernacular tabs: small black, white, or semantic-color labels rotated one or two degrees and attached to double-bordered panels with CSS transforms.
- Bitmap-state underlays: repeating-radial-gradient dot fields and hatch strips appear behind terminal logs, empty states, and manga SFX words without reducing text contrast.
- Manga SFX command bursts: oversized serif or condensed words such as SYNC, CUT, HOLD, or RUN break panel edges and label important system transitions.
- Decorated-shed affordance stamps: buttons, badges, and warnings use explicit noun labels, serial numbers, arrows, and square shadow offsets instead of icon-only mystery controls.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px and above

### Grid

Twelve-column desktop grid with 2px gutters as visible ink rules; tablet collapses to six columns and mobile to one column while keeping label tabs and double borders.

### Whitespace

Whitespace is not empty luxury; it is a gutter, caption shelf, or margin note area. Use tight internal padding with larger external panel breaks.

## Guidance

### Do

- Use black and warm white as the identity; introduce red, green, amber, or blue only when the interface state requires it.
- Make deconstruction legible: every overlap, rotated tab, and type shift should name a product state or relationship.
- Pair expressive SFX words with ordinary controls so the surface remains usable for agent monitoring, approvals, and editing.
- Keep focus states thick, square, and high contrast for keyboard use.

### Don't

- Do not use neon gradients, glass panels, chrome, matrix green, or generic cyberpunk terminal clichés.
- Do not scatter Memphis shapes as decoration; geometry must be a panel, badge, hatch, tab, or material cue.
- Do not let layered typography cover body copy, form fields, or critical state values.
- Do not soften the language into rounded SaaS cards or pastel editorial minimalism.

### Accessibility

Maintain high contrast for all primary text, preserve semantic colors with text labels, use visible focus outlines, and ensure deconstructive overlays never obscure inputs or data.

### Usage Context

Best for agent command centers, manga publishing operations, technical research consoles, moderation queues, and high-taste editorial product surfaces needing visible structure and plural labels.

DESIGN.md

---
version: "alpha"
name: "Emigre Vernacular Type Console"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#111111"
  background: "#F7F4EC"
  border: "#050505"
  error: "#D71920"
  info: "#0057B8"
  muted: "#6E6A61"
  primary: "#050505"
  secondary: "#F4F1E8"
  success: "#138A36"
  surface: "#FFFFFF"
  text: "#050505"
  warning: "#C57A00"
typography:
  headline-lg:
    fontFamily: "Bodoni Moda"
    fontSize: "2.097rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Bodoni Moda"
    fontSize: "1.638rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Archivo Narrow"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.42
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "Sono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "4px"
  md: "2px"
  none: "0px"
  sm: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Emigre Vernacular Type Console

## Overview

A high-contrast postmodern console language where Emigre-era typographic pluralism, vernacular sign fragments, Cranbrook layering, and manga sound-effect force are disciplined into a usable agentic software surface. It treats interface state as public signage: everything has a label, a frame, a citation, and an operational consequence.

### Values

- Plural typography as system logic, not decoration
- Decorated-shed symbolism: signs explain function before ornament
- Black-and-white manga energy translated into panels, captions, and impact marks
- Terminal explicitness with readable hierarchy and product restraint
- Postmodern anti-universalism made operational through local labels, stamps, and state codes

### Anti-Values

- Neon cyberpunk, vaporwave gradients, generic Y2K chrome, or hacker cosplay
- Flat Memphis confetti with no material or semantic role
- AI dashboard sameness: equal cards, vague metrics, soft shadows, default rounded SaaS
- Illegible deconstruction that sacrifices task completion

### Visual Character

- Use an asymmetric twelve-column CSS grid with thick black rule dividers, offset panel spans, and small rotated label tabs pinned to panel corners.
- Combine a condensed grotesk interface face, a high-contrast serif headline face, and a monospaced terminal face with intentionally abrupt scale changes between captions, SFX labels, and operational data.
- Render surfaces as monochrome paper-console panels using bitmap dot underlays, diagonal hatch bands, double borders, and clipped caption blocks instead of gradients or soft shadows.
- Reserve color for semantic system state only: red error stamps, green success ticks, amber warning lozenges, and blue information tags against an otherwise black, white, and gray system.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#111111` |
| background | `#F7F4EC` |
| border | `#050505` |
| error | `#D71920` |
| info | `#0057B8` |
| muted | `#6E6A61` |
| primary | `#050505` |
| secondary | `#F4F1E8` |
| success | `#138A36` |
| surface | `#FFFFFF` |
| text | `#050505` |
| warning | `#C57A00` |

## Typography

- **Headline-Lg**: Bodoni Moda, 2.097rem, weight 700, line-height 1.1.
- **Headline-Md**: Bodoni Moda, 1.638rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo Narrow, 16px, weight 400, line-height 1.42.
- **Label-Md**: Sono, 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`

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px and above

### Grid

Twelve-column desktop grid with 2px gutters as visible ink rules; tablet collapses to six columns and mobile to one column while keeping label tabs and double borders.

### Whitespace

Whitespace is not empty luxury; it is a gutter, caption shelf, or margin note area. Use tight internal padding with larger external panel breaks.

## Elevation & Depth

### Shadows

- **Lg**: 10px 10px 0 #050505
- **Md**: 6px 6px 0 #050505
- **Sm**: 3px 3px 0 #050505

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Layered radial bitmap dots plus thin vertical rule columns on warm newsprint.
- **Card Style**: Hard-edged white or cream panels with double black borders, offset caption tabs, and square ink shadows.
- **Treatment**: Monochrome paper-console fields with bitmap dot patterns, hatch strips, and visible registration marks.

### Borders

- **Accent Width**: 5px
- **Character**: Borders behave like printed gutters and terminal frames: thick for ownership, thin for data, dashed for provisional annotations.
- **Default Width**: 2px
- **Style**: solid, double, and selective dashed annotation rules

## Components

### Composition

Build screens as decorated operational broadsheets: one dominant console panel, one typographic headline slab, and supporting cards that overlap gutters by small measured offsets. Use signage and labels to clarify why panels differ rather than making arbitrary collage.

### Density

Medium-high density is acceptable when grouped by strong gutters, black labels, and generous internal leading; no area should become texture-only or unreadable.

### Hierarchy

Hierarchy comes from typographic collision under control: Bodoni Moda for editorial command, Archivo Narrow for dense UI labels, Sono for machine state. Size jumps are large, but each text role remains consistent across the product.

### Signature Patterns

- Corner-pinned vernacular tabs: small black, white, or semantic-color labels rotated one or two degrees and attached to double-bordered panels with CSS transforms.
- Bitmap-state underlays: repeating-radial-gradient dot fields and hatch strips appear behind terminal logs, empty states, and manga SFX words without reducing text contrast.
- Manga SFX command bursts: oversized serif or condensed words such as SYNC, CUT, HOLD, or RUN break panel edges and label important system transitions.
- Decorated-shed affordance stamps: buttons, badges, and warnings use explicit noun labels, serial numbers, arrows, and square shadow offsets instead of icon-only mystery controls.

## 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-019e8a06-84ef-7383-b9a9-b58c50bc77f7/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

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

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

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

## Do's and Don'ts

- Do Use black and warm white as the identity; introduce red, green, amber, or blue only when the interface state requires it.
- Do Make deconstruction legible: every overlap, rotated tab, and type shift should name a product state or relationship.
- Do Pair expressive SFX words with ordinary controls so the surface remains usable for agent monitoring, approvals, and editing.
- Do Keep focus states thick, square, and high contrast for keyboard use.
- Don't Do not use neon gradients, glass panels, chrome, matrix green, or generic cyberpunk terminal clichés.
- Don't Do not scatter Memphis shapes as decoration; geometry must be a panel, badge, hatch, tab, or material cue.
- Don't Do not let layered typography cover body copy, form fields, or critical state values.
- Don't Do not soften the language into rounded SaaS cards or pastel editorial minimalism.

### Accessibility

Maintain high contrast for all primary text, preserve semantic colors with text labels, use visible focus outlines, and ensure deconstructive overlays never obscure inputs or data.

### Usage Context

Best for agent command centers, manga publishing operations, technical research consoles, moderation queues, and high-taste editorial product surfaces needing visible structure and plural labels.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emigre-vernacular-type-console",
  "type": "registry:theme",
  "title": "Emigre Vernacular Type Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F4EC",
      "foreground": "#050505",
      "card": "#FFFFFF",
      "card-foreground": "#050505",
      "popover": "#FFFFFF",
      "popover-foreground": "#050505",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "secondary": "#F4F1E8",
      "secondary-foreground": "#111111",
      "muted": "#6E6A61",
      "muted-foreground": "#050505",
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "destructive": "#D71920",
      "border": "#050505",
      "input": "#050505",
      "ring": "#111111",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#050505",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0057B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#050505",
      "sidebar-ring": "#111111",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "destructive": "#D71920",
      "border": "#303642",
      "input": "#303642",
      "ring": "#111111",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#111111",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e8a06-84ef-7383-b9a9-b58c50bc77f7",
    "slug": "emigre-vernacular-type-console",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · emigre-vernacular-type-console

DESIGN.md

at a glance

Palette

Typography

headline-lgBodoni Moda · 34px · 700

The quick brown fox jumps

headline-mdBodoni Moda · 26px · 600

The quick brown fox jumps

body-mdArchivo Narrow · 16px · 400

The quick brown fox jumps

label-mdSono · 12px · 600

The quick brown fox jumps

Components

New

Card title

Components rendered with this language’s tokens — colors, type, and rounded corners as specified.

Spacing

base8px
xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px
4xl64px

Shape

full9999px

lg4px

md2px

none0px

sm0px

shadcn/ui

implementation kit

agent-authored kitstored + verified

shadcn implementation kit

These scenes and recipes came from the Katagami review agent and can be copied as the shadcn implementation layer.

shadsync shotsstored + verifiedpaper-collage

Emigre Vernacular Type Console

Agent-authored scenes, component recipes, and visual profile rendered on local shadcn-style primitives.

Hard-edged white or cream panels with double black borders, offset caption tabs, and square ink shadows.

OPS / BROADSHEET 04application-shell

SYNC RUNS IN PUBLIC

A rail-led command center for supervising agent batches, approvals, and exceptions on a warm paper-console grid.

buttoncardbadgeseparatortabstabletooltipdropdown-menu

Emigre Vernacular Type Console

shadcn layer

Overview

Components

Reviews

Exports

primaryaccentsurfacemutedwarningerror

queued cuts

128

ready proofs

redline faults

Component coverage

Filters, state, and row density rendered with the generated theme.

Surface	State	Status
Primary flow	Sono-7	READY
Token coverage	Bodoni	HOLD
Responsive proof	Narrow	ERR

Must show

Avoid

DETAIL / CUT 19Bdetail-editor

HOLD THE BALLOON COPY

Editors compare agent output, write approval notes, toggle safety states, and prepare an overprinted command dialog.

textareainputselectdialogcheckboxswitchbadgebutton

Recipe details

Labels, validation, written guidance, and controls stay visible.

Component familyState treatment

Guidance copy

Require keyboard stateAgent-authored shot

Density68

FocusInvalidConfirmed

Context sheet

Generated with the language job

sheet

speaker code

MIO-07

localization lane

formal honorific pass

editorial note

Keep the impact word outside the balloon crop; preserve legibility at mobile width.

Must show

Avoid

DATA OPS / LEDGERdata-operations

CUT / HOLD / RELEASE

A data operations screen filters archive jobs, calibrates risk thresholds, opens a side sheet, and scans state-coded rows.

tableslidersheetdropdown-menuseparatorbadgecardswitch

CUT / HOLD / RELEASE

A data operations screen filters archive jobs, calibrates risk thresholds, opens a side sheet, and scans state-coded rows.

WARNREADYERR

Check	Finding	Status
Button hierarchy	approved	WARN
Table rhythm	needs pass	READY
Empty state	designed	ERR

Responsive table, menu, tooltip, and badge proof.

Must show

Avoid

recommendedagent kit includedverified

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: #F7F4EC;
  --foreground: #050505;
  --card: #FFFFFF;
  --card-foreground: #050505;
  --popover: #FFFFFF;
  --popover-foreground: #050505;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #F4F1E8;
  --secondary-foreground: #111111;
  --muted: #6E6A61;
  --muted-foreground: #050505;
  --accent: #111111;
  --accent-foreground: #ffffff;
  --destructive: #D71920;
  --border: #050505;
  --input: #050505;
  --ring: #111111;
  --chart-1: #050505;
  --chart-2: #F4F1E8;
  --chart-3: #111111;
  --chart-4: #138A36;
  --chart-5: #C57A00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #050505;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0057B8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #050505;
  --sidebar-ring: #111111;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #111111;
  --accent-foreground: #ffffff;
  --destructive: #D71920;
  --border: #303642;
  --input: #303642;
  --ring: #111111;
  --chart-1: #050505;
  --chart-2: #F4F1E8;
  --chart-3: #111111;
  --chart-4: #138A36;
  --chart-5: #C57A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #111111;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #111111;
  --radius: 2px;
}

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 EmigreVernacularTypeConsoleShadcnKit() {
  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">Emigre Vernacular Type Console</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 + verified

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "cssVars": {
    "dark": {
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "destructive": "#D71920",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#111111"
    },
    "light": {
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "background": "#F7F4EC",
      "border": "#050505",
      "card": "#FFFFFF",
      "card-foreground": "#050505",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "destructive": "#D71920",
      "foreground": "#050505",
      "input": "#050505",
      "muted": "#6E6A61",
      "muted-foreground": "#050505",
      "popover": "#FFFFFF",
      "popover-foreground": "#050505",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#111111",
      "secondary": "#F4F1E8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#0057B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#050505",
      "sidebar-foreground": "#050505",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#111111"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e8a06-84ef-7383-b9a9-b58c50bc77f7",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    },
    "slug": "emigre-vernacular-type-console",
    "source": "katagami"
  },
  "name": "emigre-vernacular-type-console",
  "title": "Emigre Vernacular Type Console shadcn Theme",
  "type": "registry:theme"
}

component recipesstored + verified

# shadcn/ui Components — Emigre Vernacular Type Console

Author: `katagami-agent`

## ShadSync visual profile
Translate this Katagami language into local shadcn/ui primitives as a monochrome postmodern type console: warm newsprint background #F7F4EC, white paper panels #FFFFFF, black ink #050505, doubled mechanical borders, rotated vernacular tabs, bitmap dot underlays, hatch strips, manga SFX state words, and semantic-only red/green/amber/blue status accents. Typography is Bodoni Moda for command slabs, Archivo Narrow for dense UI labels, and Sono for telemetry. Shape scale is disciplined: containers and cards use square to 4px corners, controls use 0-2px mechanical corners, and pill radius is reserved for explicit status badges only.

Visual profile values: family `postmodern-vernacular-type-console`; material `ink-on-warm-newsprint-console-paper`; contour `rectangular-cropped-panels-with-rotated-sign-tabs`; border `thick-black-double-rules-crop-ticks-dashed-annotations`; underlay/grain enabled; stickerBadges enabled; density `dense-but-framed`; motion `step-shift-command-tick`.

## Signature component recipes

### `button`
Use Button as an explicit command stamp: uppercase Archivo Narrow label, optional Sono prefix like RUN/ or ACK/, 0-2px radius, 2px black border, square offset shadow, and semantic fills only for destructive/success actions. Hover translates exactly 2px with stepped timing; focus adds a hard 3px outline.

### `card`
Use Card as a white or cream printed console panel with double black rules, crop ticks, a rotated corner tab, bitmap dot underlay, and a clipped jumbo SFX word behind non-critical content. Keep content readable and grouped by thick gutters.

### `input`
Use Input with mono value text, bracketed label, square paper background, 2px black border, and offset focus ring. Validation uses red/green stamps plus text, never color alone.

### `textarea`
Use Textarea as an editorial command note field with line-number gutter, COMMAND/ prompt strip, double-rule frame, and hatching limited to the margin so prose remains legible.

### `select`
Use SelectTrigger as a rectangular sign tab with uppercase selected value, boxed black chevron, and dropdown rows divided by mechanical rules with monospaced metadata.

### `dialog`
Use DialogContent as an overprinted command sheet: thick perimeter, registration crosses, cropped headline word, status badge in the title rail, and stark footer actions aligned to the black rule grid.

### `sheet`
Use Sheet as a side command rail with vertical or rotated labels on desktop, numbered stacked sections on mobile, double-rule separators, and no blur/glass treatment.

### `tabs`
Use TabsList as numbered vernacular sign tabs; active trigger reverses to black ink with an offset underline and bracket corners, inactive triggers remain outlined paper labels.

### `badge`
Use Badge as functional SFX punctuation such as POW/READY/ERR; square or slightly skewed rectangular labels attach to rows/cards and use semantic fill only for state.

### `separator`
Use Separator as a visible mechanical rule: black 1-2px line, doubled for major breaks, occasionally paired with crop ticks or metadata labels.

### `checkbox`
Use Checkbox as a hard square proof mark with black border, mono label, and green tick or red exception stamp when state has operational meaning.

### `switch`
Use Switch like a small labeled relay: rectangular track, black thumb, ON/OFF text, stepped snap motion, and adjacent status code rather than soft pill gloss.

### `slider`
Use Slider as a calibration rail with tick marks, mono endpoints, square thumb, and hatch-filled track segments showing threshold zones.

### `tooltip`
Use Tooltip as a tiny paper citation tag with black border, Sono timestamp/code, no blur, and arrow styled like a crop tick.

### `dropdown-menu`
Use DropdownMenu as a stacked sign-board with rule-divided options, command prefixes, keyboard hints in Sono, and destructive rows stamped red with text.

### `table`
Use Table for dense operational ledgers: ruled rows, uppercase headers, mono IDs, attached status badges, sticky caption rail, and strong row focus/selection outlines.

## Preview shots
- `application-shell`: agent command center with rail navigation, active command cards, telemetry table, and semantic state badges.
- `detail-editor`: manga-publishing approval editor with textarea, tabs, select, switch, checkbox, tooltip, and dialog-ready action cluster.
- `data-operations`: ledger operations screen with filters, dropdown menu, slider thresholds, sheet rail, dense table, and warning/error/success stamps.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"

export function VernacularCommandCard() {
  return (
    <Card className="relative overflow-hidden rounded-[2px] border-2 border-black bg-[#FFFFFF] shadow-[6px_6px_0_#050505] before:absolute before:inset-0 before:bg-[radial-gradient(#050505_1px,transparent_1px)] before:bg-[length:12px_12px] before:opacity-10">
      <div className="absolute -top-3 left-4 rotate-[-2deg] bg-black px-2 py-1 font-mono text-xs uppercase text-white">QUEUE/17</div>
      <CardHeader className="relative border-b-2 border-black">
        <Badge className="w-fit rounded-[1px] bg-[#C57A00] font-mono text-black">HOLD</Badge>
        <CardTitle className="font-serif text-5xl uppercase leading-none">Cut Sync</CardTitle>
      </CardHeader>
      <CardContent className="relative grid gap-3 p-4">
        <Input className="rounded-none border-2 border-black bg-[#F7F4EC] font-mono focus-visible:ring-4 focus-visible:ring-black" defaultValue="AGENT-204" />
        <Button className="rounded-[1px] border-2 border-black bg-black font-bold uppercase text-white shadow-[3px_3px_0_#050505]">RUN / APPROVE</Button>
      </CardContent>
    </Card>
  )
}
```

Use these recipes with DESIGN.md, `/language/en-019e8a06-84ef-7383-b9a9-b58c50bc77f7/DESIGN.with-shadcn.md`, `/shadcn.json`, `/shadcn-components.md`, and `/shadcn-shots.json`. Import local primitives from `@/components/ui/*`, apply the generated theme variables, and do not invent a second component system.

preview shotsstored + verified

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Use Button as an explicit command stamp: uppercase Archivo Narrow label, optional Sono prefix like RUN/ or ACK/, 0-2px radius, 2px black border, square offset shadow, and semantic fills only for destructive/success actions. Hover translates exactly 2px with stepped timing; focus adds a hard 3px outline.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "card",
      "recipe": "Use Card as a white or cream printed console panel with double black rules, crop ticks, a rotated corner tab, bitmap dot underlay, and a clipped jumbo SFX word behind non-critical content. Keep content readable and grouped by thick gutters.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "input",
      "recipe": "Use Input with mono value text, bracketed label, square paper background, 2px black border, and offset focus ring. Validation uses red/green stamps plus text, never color alone.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "textarea",
      "recipe": "Use Textarea as an editorial command note field with line-number gutter, COMMAND/ prompt strip, double-rule frame, and hatching limited to the margin so prose remains legible.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "select",
      "recipe": "Use SelectTrigger as a rectangular sign tab with uppercase selected value, boxed black chevron, and dropdown rows divided by mechanical rules with monospaced metadata.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "dialog",
      "recipe": "Use DialogContent as an overprinted command sheet: thick perimeter, registration crosses, cropped headline word, status badge in the title rail, and stark footer actions aligned to the black rule grid.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "sheet",
      "recipe": "Use Sheet as a side command rail with vertical or rotated labels on desktop, numbered stacked sections on mobile, double-rule separators, and no blur/glass treatment.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "tabs",
      "recipe": "Use TabsList as numbered vernacular sign tabs; active trigger reverses to black ink with an offset underline and bracket corners, inactive triggers remain outlined paper labels.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "badge",
      "recipe": "Use Badge as functional SFX punctuation such as POW/READY/ERR; square or slightly skewed rectangular labels attach to rows/cards and use semantic fill only for state.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "separator",
      "recipe": "Use Separator as a visible mechanical rule: black 1-2px line, doubled for major breaks, occasionally paired with crop ticks or metadata labels.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "checkbox",
      "recipe": "Use Checkbox as a hard square proof mark with black border, mono label, and green tick or red exception stamp when state has operational meaning.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "switch",
      "recipe": "Use Switch like a small labeled relay: rectangular track, black thumb, ON/OFF text, stepped snap motion, and adjacent status code rather than soft pill gloss.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "slider",
      "recipe": "Use Slider as a calibration rail with tick marks, mono endpoints, square thumb, and hatch-filled track segments showing threshold zones.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "tooltip",
      "recipe": "Use Tooltip as a tiny paper citation tag with black border, Sono timestamp/code, no blur, and arrow styled like a crop tick.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Use DropdownMenu as a stacked sign-board with rule-divided options, command prefixes, keyboard hints in Sono, and destructive rows stamped red with text.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    },
    {
      "primitive": "table",
      "recipe": "Use Table for dense operational ledgers: ruled rows, uppercase headers, mono IDs, attached status badges, sticky caption rail, and strong row focus/selection outlines.",
      "requiredVisualTraits": [
        "hard black rule",
        "warm paper surface",
        "explicit label text",
        "stepped focus/motion"
      ]
    }
  ],
  "generatedBy": "katagami-agent",
  "language": {
    "id": "en-019e8a06-84ef-7383-b9a9-b58c50bc77f7",
    "name": "Emigre Vernacular Type Console",
    "slug": "emigre-vernacular-type-console"
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "badge",
        "separator",
        "tabs",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "RUN / APPROVE",
          "HOLD / INSPECT",
          "OPEN MENU"
        ],
        "description": "A rail-led command center for supervising agent batches, approvals, and exceptions on a warm paper-console grid.",
        "eyebrow": "OPS / BROADSHEET 04",
        "headline": "SYNC RUNS IN PUBLIC",
        "rows": [
          {
            "id": "AG-204",
            "owner": "Sono-7",
            "state": "READY",
            "task": "Panel OCR reconciliation"
          },
          {
            "id": "AG-318",
            "owner": "Bodoni",
            "state": "HOLD",
            "task": "Translation conflict pass"
          },
          {
            "id": "AG-422",
            "owner": "Narrow",
            "state": "ERR",
            "task": "Archive stamp export"
          }
        ],
        "stats": [
          {
            "label": "queued cuts",
            "tone": "info",
            "value": "128"
          },
          {
            "label": "ready proofs",
            "tone": "success",
            "value": "43"
          },
          {
            "label": "redline faults",
            "tone": "error",
            "value": "7"
          }
        ]
      },
      "title": "Agent Broadsheet Command Shell",
      "visualIntent": "A plausible agent monitoring console where labels, frames, SFX words, and semantic stamps organize dense operations without generic dashboard softness."
    },
    {
      "components": [
        "textarea",
        "input",
        "select",
        "dialog",
        "checkbox",
        "switch",
        "badge",
        "button",
        "tabs"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "ACK / SAVE NOTE",
          "OPEN / DIALOG",
          "STAMP / ERROR"
        ],
        "description": "Editors compare agent output, write approval notes, toggle safety states, and prepare an overprinted command dialog.",
        "eyebrow": "DETAIL / CUT 19B",
        "fields": [
          {
            "label": "speaker code",
            "type": "input",
            "value": "MIO-07"
          },
          {
            "label": "localization lane",
            "type": "select",
            "value": "formal honorific pass"
          },
          {
            "label": "editorial note",
            "type": "textarea",
            "value": "Keep the impact word outside the balloon crop; preserve legibility at mobile width."
          }
        ],
        "headline": "HOLD THE BALLOON COPY",
        "stats": [
          {
            "label": "focus ring",
            "tone": "success",
            "value": "VISIBLE"
          },
          {
            "label": "semantic stamp",
            "tone": "warning",
            "value": "WARN"
          }
        ]
      },
      "title": "Manga Proof Detail Editor",
      "visualIntent": "A real editorial review screen with deconstructive labels tied to usable controls, not decoration."
    },
    {
      "components": [
        "table",
        "slider",
        "sheet",
        "dropdown-menu",
        "separator",
        "badge",
        "card",
        "switch",
        "button",
        "input"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "FILTER / APPLY",
          "SHEET / OPEN",
          "EXPORT / LEDGER"
        ],
        "description": "A data operations screen filters archive jobs, calibrates risk thresholds, opens a side sheet, and scans state-coded rows.",
        "eyebrow": "DATA OPS / LEDGER",
        "fields": [
          {
            "label": "archive query",
            "type": "input",
            "value": "ink density > 0.72"
          },
          {
            "label": "relay",
            "type": "switch",
            "value": "ON / stepped snap"
          }
        ],
        "headline": "CUT / HOLD / RELEASE",
        "rows": [
          {
            "chapter": "No. 008",
            "id": "ROW-11",
            "risk": "72%",
            "state": "WARN"
          },
          {
            "chapter": "No. 009",
            "id": "ROW-12",
            "risk": "31%",
            "state": "READY"
          },
          {
            "chapter": "No. 010",
            "id": "ROW-13",
            "risk": "94%",
            "state": "ERR"
          }
        ],
        "stats": [
          {
            "label": "threshold",
            "tone": "warning",
            "value": "72%"
          },
          {
            "label": "released",
            "tone": "success",
            "value": "311"
          },
          {
            "label": "blocked",
            "tone": "error",
            "value": "12"
          }
        ]
      },
      "title": "Ledger Operations With Threshold Rail",
      "visualIntent": "A dense operations ledger where threshold controls, sheet navigation, and row states keep the vernacular grammar app-like."
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "semantic red error stamps",
      "green success ticks",
      "amber warning lozenges",
      "blue information tags"
    ],
    "border": "thick-black-double-rules-crop-ticks-dashed-annotations",
    "contour": "rectangular-cropped-panels-with-rotated-sign-tabs",
    "density": "dense-but-framed",
    "family": "postmodern-vernacular-type-console",
    "grain": true,
    "material": "ink-on-warm-newsprint-console-paper",
    "motion": "step-shift-command-tick",
    "stickerBadges": true,
    "underlay": true
  }
}

More like this

Emigre Vernacular Type Consoleshares vernacular-typography · manga-sfx-labels