design language·usable-anti-interface-panels

Usable Anti-Interface Panels

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 postmodern product language for agentic software that treats the interface as an annotated control room: visible grid bones, named panels, decorated-shed signage, and manga-like black gutters make every system state explicit without becoming chaotic.

values

Explicit structure over seamless glassOperational honesty with high-taste restraintPostmodern quotation as usable wayfindingBlack-and-white manga rhythm tempered by terminal precisionAssertive controls that feel engineered, not playful by default

anti-values

×Invisible chrome, floating glassmorphism, and generic SaaS softness×Random Memphis confetti or cyberpunk neon overload without interface purpose×Illegible deconstruction that sacrifices task completion×AI-generated decoration that is not tied to data, state, or navigation

tokens

borders4 items

accent width: 4px
character: Hard black rules expose construction; accent borders become state rails, tabs, and focused control outlines.
default width: 2px
style: solid

colors12 items

accent

#39FF14

background

#F6F2E8

border

#111111

error

#E11D2E

info

#0047FF

muted

#6E6A60

primary

#111111

secondary

#0047FF

success

#138A36

surface

#FFFDF5

text

#111111

warning

#FFB000

motion3 items

duration: 120ms
easing: steps(2, end)
philosophy: Mechanical snap: controls depress, panels register a one-step shift, and overlays appear like operator sheets rather than drifting.

radii5 items

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

shadows3 items

lg: 8px 8px 0 #111111
md: 5px 5px 0 #111111
sm: 3px 3px 0 #111111

spacing2 items

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

surfaces3 items

bg pattern: Low-opacity manga screentone dots combined with faint 16px grid lines and occasional terminal-green coordinate ticks.
card style: Rectangular panel cards with 2px borders, square shadows, internal title bars, and state strips on one edge.
treatment: Off-white slabs, black ink borders, corner tabs, screentone underlays, and thin calibration labels that identify purpose.

typography8 items

base size: 16px
body font: Inter
google fonts url: https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap
heading font: IBM Plex Sans Condensed
letter spacing: -0.015em
line height: 1.48
mono font: Fragment Mono
scale ratio: 1.22

rules

composition

Build screens from an obvious 12-column operating grid with heavy gutters, nested panels, and at least one vertical status rail; asymmetry comes from panel spans, not random placement.

density

Medium-high density with many useful labels, but every cluster must have a clear task, a visible container, and enough gutter space to breathe.

hierarchy

Lead with a signage bar, then a large operational panel, then mono detail strips; uppercase condensed labels name each object and body copy stays calm and readable.

signature patterns

Decorated-shed panel headers: black or cobalt title bars clipped into the panel border with a small mono route code and visible bolt dots.Manga operator gutters: thick black dividers and screentone fields separate moments of attention like comic panels while keeping content aligned.Terminal registration tabs: green or cobalt corner tabs, coordinate ticks, and command chips mark state, not decoration.Pressable brutal controls: square buttons and fields use 2px borders, 5px offset shadows, and active translate states that visibly reduce the shadow.Deconstructed but aligned typography: rotated micro-labels and overscaled numerals are allowed only when they lock to grid lines and do not obscure primary reading.

layout

breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

grid

Desktop uses a 12-column grid with 16px gutters and black internal seams; tablet compresses to 6 columns; mobile becomes one column with preserved title bars and state rails.

whitespace

Whitespace is treated as marked gutter: generous 16-32px lanes between panels, with faint grid marks so empty space still feels intentional.

guidance

Use black-and-white manga discipline first, then add one cobalt or terminal-green state accent per region.
Name panels, routes, states, and controls visibly so the product explains itself.
Let shadows, borders, and tabs carry interactivity instead of glossy gradients.
Keep deconstructive type locked to a grid and supplementary to the task.

avoid

Do not scatter Memphis shapes as wallpaper; geometry must describe controls, states, or materials.
Do not use neon cyberpunk palettes, glow effects, or generic Y2K chrome.
Do not hide inputs in borderless cards or rely on browser-default form styling.
Do not make every panel tilted, torn, or noisy; one controlled rupture per screen is enough.

katagami spec

# Usable Anti-Interface Panels

## Philosophy

A postmodern product language for agentic software that treats the interface as an annotated control room: visible grid bones, named panels, decorated-shed signage, and manga-like black gutters make every system state explicit without becoming chaotic.

### Values

- Explicit structure over seamless glass
- Operational honesty with high-taste restraint
- Postmodern quotation as usable wayfinding
- Black-and-white manga rhythm tempered by terminal precision
- Assertive controls that feel engineered, not playful by default

### Anti-Values

- Invisible chrome, floating glassmorphism, and generic SaaS softness
- Random Memphis confetti or cyberpunk neon overload without interface purpose
- Illegible deconstruction that sacrifices task completion
- AI-generated decoration that is not tied to data, state, or navigation

### Visual Character

- CSS grid containers expose their column and row seams with 2px black borders, inset rule lines, and named panel headers that sit flush to the grid edge.
- Primary surfaces are off-white slabs with hard black outlines and cobalt or terminal-green registration tabs clipped to corners using pseudo-elements.
- Hierarchy uses condensed uppercase signage bands, mono status readouts, and overscaled numeric labels aligned to a rigid baseline rather than soft card stacks.
- Interactive controls cast square 5px black offset shadows, collapse to 2px on active press, and retain visible focus rings in cobalt instead of browser defaults.
- Backgrounds use restrained manga screentone dots and technical calibration marks behind content, never random decorative blobs.

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: Hard black rules expose construction; accent borders become state rails, tabs, and focused control outlines.
- **Default Width**: 2px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#39FF14` |
| background | `#F6F2E8` |
| border | `#111111` |
| error | `#E11D2E` |
| info | `#0047FF` |
| muted | `#6E6A60` |
| primary | `#111111` |
| secondary | `#0047FF` |
| success | `#138A36` |
| surface | `#FFFDF5` |
| text | `#111111` |
| warning | `#FFB000` |

### Motion

- **Duration**: 120ms
- **Easing**: steps(2, end)
- **Philosophy**: Mechanical snap: controls depress, panels register a one-step shift, and overlays appear like operator sheets rather than drifting.

### Radii

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

### Shadows

- **Lg**: 8px 8px 0 #111111
- **Md**: 5px 5px 0 #111111
- **Sm**: 3px 3px 0 #111111

### Spacing

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

### Surfaces

- **Bg Pattern**: Low-opacity manga screentone dots combined with faint 16px grid lines and occasional terminal-green coordinate ticks.
- **Card Style**: Rectangular panel cards with 2px borders, square shadows, internal title bars, and state strips on one edge.
- **Treatment**: Off-white slabs, black ink borders, corner tabs, screentone underlays, and thin calibration labels that identify purpose.

### Typography

- **Base Size**: 16px
- **Body Font**: Inter
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap
- **Heading Font**: IBM Plex Sans Condensed
- **Letter Spacing**: -0.015em
- **Line Height**: 1.48
- **Mono Font**: Fragment Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Build screens from an obvious 12-column operating grid with heavy gutters, nested panels, and at least one vertical status rail; asymmetry comes from panel spans, not random placement.

### Density

Medium-high density with many useful labels, but every cluster must have a clear task, a visible container, and enough gutter space to breathe.

### Hierarchy

Lead with a signage bar, then a large operational panel, then mono detail strips; uppercase condensed labels name each object and body copy stays calm and readable.

### Signature Patterns

- Decorated-shed panel headers: black or cobalt title bars clipped into the panel border with a small mono route code and visible bolt dots.
- Manga operator gutters: thick black dividers and screentone fields separate moments of attention like comic panels while keeping content aligned.
- Terminal registration tabs: green or cobalt corner tabs, coordinate ticks, and command chips mark state, not decoration.
- Pressable brutal controls: square buttons and fields use 2px borders, 5px offset shadows, and active translate states that visibly reduce the shadow.
- Deconstructed but aligned typography: rotated micro-labels and overscaled numerals are allowed only when they lock to grid lines and do not obscure primary reading.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

### Grid

Desktop uses a 12-column grid with 16px gutters and black internal seams; tablet compresses to 6 columns; mobile becomes one column with preserved title bars and state rails.

### Whitespace

Whitespace is treated as marked gutter: generous 16-32px lanes between panels, with faint grid marks so empty space still feels intentional.

## Guidance

### Do

- Use black-and-white manga discipline first, then add one cobalt or terminal-green state accent per region.
- Name panels, routes, states, and controls visibly so the product explains itself.
- Let shadows, borders, and tabs carry interactivity instead of glossy gradients.
- Keep deconstructive type locked to a grid and supplementary to the task.

### Don't

- Do not scatter Memphis shapes as wallpaper; geometry must describe controls, states, or materials.
- Do not use neon cyberpunk palettes, glow effects, or generic Y2K chrome.
- Do not hide inputs in borderless cards or rely on browser-default form styling.
- Do not make every panel tilted, torn, or noisy; one controlled rupture per screen is enough.

DESIGN.md

---
version: "alpha"
name: "Usable Anti-Interface Panels"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#39FF14"
  background: "#F6F2E8"
  border: "#111111"
  error: "#E11D2E"
  info: "#0047FF"
  muted: "#6E6A60"
  primary: "#111111"
  secondary: "#0047FF"
  success: "#138A36"
  surface: "#FFFDF5"
  text: "#111111"
  warning: "#FFB000"
typography:
  headline-lg:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "Fragment Mono"
    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"
---

# Usable Anti-Interface Panels

## Overview

A postmodern product language for agentic software that treats the interface as an annotated control room: visible grid bones, named panels, decorated-shed signage, and manga-like black gutters make every system state explicit without becoming chaotic.

### Values

- Explicit structure over seamless glass
- Operational honesty with high-taste restraint
- Postmodern quotation as usable wayfinding
- Black-and-white manga rhythm tempered by terminal precision
- Assertive controls that feel engineered, not playful by default

### Anti-Values

- Invisible chrome, floating glassmorphism, and generic SaaS softness
- Random Memphis confetti or cyberpunk neon overload without interface purpose
- Illegible deconstruction that sacrifices task completion
- AI-generated decoration that is not tied to data, state, or navigation

### Visual Character

- CSS grid containers expose their column and row seams with 2px black borders, inset rule lines, and named panel headers that sit flush to the grid edge.
- Primary surfaces are off-white slabs with hard black outlines and cobalt or terminal-green registration tabs clipped to corners using pseudo-elements.
- Hierarchy uses condensed uppercase signage bands, mono status readouts, and overscaled numeric labels aligned to a rigid baseline rather than soft card stacks.
- Interactive controls cast square 5px black offset shadows, collapse to 2px on active press, and retain visible focus rings in cobalt instead of browser defaults.
- Backgrounds use restrained manga screentone dots and technical calibration marks behind content, never random decorative blobs.

## 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 | `#39FF14` |
| background | `#F6F2E8` |
| border | `#111111` |
| error | `#E11D2E` |
| info | `#0047FF` |
| muted | `#6E6A60` |
| primary | `#111111` |
| secondary | `#0047FF` |
| success | `#138A36` |
| surface | `#FFFDF5` |
| text | `#111111` |
| warning | `#FFB000` |

## Typography

- **Headline-Lg**: IBM Plex Sans Condensed, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Sans Condensed, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.48.
- **Label-Md**: Fragment Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

### Grid

Desktop uses a 12-column grid with 16px gutters and black internal seams; tablet compresses to 6 columns; mobile becomes one column with preserved title bars and state rails.

### Whitespace

Whitespace is treated as marked gutter: generous 16-32px lanes between panels, with faint grid marks so empty space still feels intentional.

## Elevation & Depth

### Shadows

- **Lg**: 8px 8px 0 #111111
- **Md**: 5px 5px 0 #111111
- **Sm**: 3px 3px 0 #111111

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Low-opacity manga screentone dots combined with faint 16px grid lines and occasional terminal-green coordinate ticks.
- **Card Style**: Rectangular panel cards with 2px borders, square shadows, internal title bars, and state strips on one edge.
- **Treatment**: Off-white slabs, black ink borders, corner tabs, screentone underlays, and thin calibration labels that identify purpose.

### Borders

- **Accent Width**: 4px
- **Character**: Hard black rules expose construction; accent borders become state rails, tabs, and focused control outlines.
- **Default Width**: 2px
- **Style**: solid

## Components

### Composition

Build screens from an obvious 12-column operating grid with heavy gutters, nested panels, and at least one vertical status rail; asymmetry comes from panel spans, not random placement.

### Density

Medium-high density with many useful labels, but every cluster must have a clear task, a visible container, and enough gutter space to breathe.

### Hierarchy

Lead with a signage bar, then a large operational panel, then mono detail strips; uppercase condensed labels name each object and body copy stays calm and readable.

### Signature Patterns

- Decorated-shed panel headers: black or cobalt title bars clipped into the panel border with a small mono route code and visible bolt dots.
- Manga operator gutters: thick black dividers and screentone fields separate moments of attention like comic panels while keeping content aligned.
- Terminal registration tabs: green or cobalt corner tabs, coordinate ticks, and command chips mark state, not decoration.
- Pressable brutal controls: square buttons and fields use 2px borders, 5px offset shadows, and active translate states that visibly reduce the shadow.
- Deconstructed but aligned typography: rotated micro-labels and overscaled numerals are allowed only when they lock to grid lines and do not obscure primary reading.

## 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-3ed1-7e00-ac98-a59a8673b51e/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-white manga discipline first, then add one cobalt or terminal-green state accent per region.
- Do Name panels, routes, states, and controls visibly so the product explains itself.
- Do Let shadows, borders, and tabs carry interactivity instead of glossy gradients.
- Do Keep deconstructive type locked to a grid and supplementary to the task.
- Don't Do not scatter Memphis shapes as wallpaper; geometry must describe controls, states, or materials.
- Don't Do not use neon cyberpunk palettes, glow effects, or generic Y2K chrome.
- Don't Do not hide inputs in borderless cards or rely on browser-default form styling.
- Don't Do not make every panel tilted, torn, or noisy; one controlled rupture per screen is enough.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usable-anti-interface-panels",
  "type": "registry:theme",
  "title": "Usable Anti-Interface Panels shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F2E8",
      "foreground": "#111111",
      "card": "#FFFDF5",
      "card-foreground": "#111111",
      "popover": "#FFFDF5",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#0047FF",
      "secondary-foreground": "#ffffff",
      "muted": "#6E6A60",
      "muted-foreground": "#111111",
      "accent": "#39FF14",
      "accent-foreground": "#111111",
      "destructive": "#E11D2E",
      "border": "#111111",
      "input": "#111111",
      "ring": "#39FF14",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "sidebar": "#FFFDF5",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0047FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-ring": "#39FF14",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#39FF14",
      "accent-foreground": "#111111",
      "destructive": "#E11D2E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#39FF14",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#39FF14",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#39FF14",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e8a06-3ed1-7e00-ac98-a59a8673b51e",
    "slug": "usable-anti-interface-panels",
    "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 · usable-anti-interface-panels

DESIGN.md

at a glance

Palette

Typography

headline-lgIBM Plex Sans Condensed · 29px · 700

The quick brown fox jumps

headline-mdIBM Plex Sans Condensed · 24px · 600

The quick brown fox jumps

body-mdInter · 16px · 400

The quick brown fox jumps

label-mdFragment Mono · 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

Usable Anti-Interface Panels

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

Rectangular panel cards with 2px borders, square shadows, internal title bars, and state strips on one edge.

PANEL 01 / ROUTE BOARDapplication-shell

Agent Route Audit

Review manga-ingest decisions with explicit rails and stamped machine confidence.

buttoncardtabsbadgeseparatortooltipdropdown-menutable

Usable Anti-Interface Panels

shadcn layer

Overview

Components

Reviews

Exports

primaryaccentsurfacemutedwarningerror

Confidence

94%

Open panels

Route

B-07

Component coverage

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

Surface	State	Status
Primary flow	scan	scan
Token coverage	route	route
Responsive proof	hold	hold

Must show

Avoid

glass blur

neon gradients

PANEL 02 / INPUT RAILdetail-editor

Curator Override

Adjust a deconstructed caption decision while keeping the rail and reducing hatch density.

cardinputtextareaselectcheckboxswitchsliderdialog

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

Decision label

Recover deconstructed caption

Severity

Symbolic / readable

Operator note

Keep rotated rail; reduce hatch behind body copy.

Must show

Avoid

rounded pill forms

unlabeled icons

PANEL 03 / BATCH TABLEdata-operations

Evidence Queue

Prioritize OCR, screentone, and typography fragments through a visible rule-based grid.

tablesheetbuttonbadgeseparatortabsdropdown-menucard

Evidence Queue

Prioritize OCR, screentone, and typography fragments through a visible rule-based grid.

passholdwarn

Check	Finding	Status
Button hierarchy	approved	pass
Table rhythm	needs pass	hold
Empty state	designed	warn

Responsive table, menu, tooltip, and badge proof.

Must show

Avoid

inventory wall

generic admin table

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: #F6F2E8;
  --foreground: #111111;
  --card: #FFFDF5;
  --card-foreground: #111111;
  --popover: #FFFDF5;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #0047FF;
  --secondary-foreground: #ffffff;
  --muted: #6E6A60;
  --muted-foreground: #111111;
  --accent: #39FF14;
  --accent-foreground: #111111;
  --destructive: #E11D2E;
  --border: #111111;
  --input: #111111;
  --ring: #39FF14;
  --chart-1: #111111;
  --chart-2: #0047FF;
  --chart-3: #39FF14;
  --chart-4: #138A36;
  --chart-5: #FFB000;
  --sidebar: #FFFDF5;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0047FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #111111;
  --sidebar-ring: #39FF14;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #39FF14;
  --accent-foreground: #111111;
  --destructive: #E11D2E;
  --border: #303642;
  --input: #303642;
  --ring: #39FF14;
  --chart-1: #111111;
  --chart-2: #0047FF;
  --chart-3: #39FF14;
  --chart-4: #138A36;
  --chart-5: #FFB000;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #39FF14;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #39FF14;
  --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 UsableAntiInterfacePanelsShadcnKit() {
  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">Usable Anti-Interface Panels</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": "#39FF14",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "destructive": "#E11D2E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#39FF14",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#39FF14",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39FF14"
    },
    "light": {
      "accent": "#39FF14",
      "accent-foreground": "#111111",
      "background": "#F6F2E8",
      "border": "#111111",
      "card": "#FFFDF5",
      "card-foreground": "#111111",
      "chart-1": "#111111",
      "chart-2": "#0047FF",
      "chart-3": "#39FF14",
      "chart-4": "#138A36",
      "chart-5": "#FFB000",
      "destructive": "#E11D2E",
      "foreground": "#111111",
      "input": "#111111",
      "muted": "#6E6A60",
      "muted-foreground": "#111111",
      "popover": "#FFFDF5",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#39FF14",
      "secondary": "#0047FF",
      "secondary-foreground": "#ffffff",
      "sidebar": "#FFFDF5",
      "sidebar-accent": "#0047FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39FF14"
    },
    "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-3ed1-7e00-ac98-a59a8673b51e",
    "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": "usable-anti-interface-panels",
    "source": "katagami"
  },
  "name": "usable-anti-interface-panels",
  "title": "Usable Anti-Interface Panels shadcn Theme",
  "type": "registry:theme"
}

component recipesstored + verified

# Usable Anti-Interface Panels shadcn/ui Components

Author: `katagami-agent`

## Intent
Translate the visible-grid anti-interface into local shadcn/ui primitives for agent dashboards, editors, and operations tables. Preserve hard borders, named title bars, state rails, square shadows, and manga gutter spacing.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use `{colors.background}` as the screentone page, `{colors.surface}` for slabs, `{colors.border}` for all outlines, `{colors.secondary}` for cobalt route tabs, `{colors.accent}` for terminal-ready state, `{typography.heading_font}` for signage, `{typography.mono_font}` for route labels, `{rounded.sm}` and `{rounded.md}` for nearly square geometry, `{spacing.2}` through `{spacing.6}` for marked gutters.

## Visual character to preserve
Visible 2px grid seams; title bars clipped into card borders; off-white slabs with black square shadows; mono coordinate chips; cobalt/green state tabs; no glass, no glow, no random Memphis confetti.

## ShadSync visual profile
family: postmodern-operator-panel; material: inked-slab; contour: square; border: hard-2px-black; underlay: screentone-grid; grain: false; stickerBadges: true; motion: mechanical-press; density: medium-high; accents: cobalt-route-tabs and terminal-green-state.

## Signature component recipes
- `button`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `card`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `input`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `textarea`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `select`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `dialog`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `sheet`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `tabs`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `badge`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `separator`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `checkbox`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `switch`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `slider`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `tooltip`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `dropdown-menu`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.
- `table`: use square 2px black borders, off-white surface, Fragment Mono micro-labels, cobalt focus ring, and only green/cobalt accents for state.

## Preview shots
- application-shell: side navigation, hero panel, decision queue, stats, and action buttons.
- detail-editor: sheet/dialog editor with inputs, textarea, select, switch, slider, tooltip, and save actions.
- data-operations: table with dropdown-menu row actions, tabs, badges, checkbox selection, and separators.

## Implementation contract
Import local primitives from `@/components/ui/*`; do not invent a second component system. Compose title bars and state rails with className wrappers around primitives. Every interactive primitive needs visible focus, 2px border, and press/selected states.

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

export function OperatorPanelCard() {
  return (
    <Card className="rounded-[2px] border-2 border-black bg-[#FFFDF5] shadow-[5px_5px_0_#111]">
      <CardHeader className="border-b-2 border-black bg-black px-3 py-2 text-[#FFFDF5]">
        <CardTitle className="font-condensed text-sm uppercase tracking-wider">Dispatch Panel <Badge className="ml-2 rounded-none border-2 border-black bg-[#39FF14] text-black">LIVE</Badge></CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 p-4">
        <Input className="rounded-none border-2 border-black bg-[#FFFDF5] font-mono shadow-[3px_3px_0_#111] focus-visible:ring-2 focus-visible:ring-[#0047FF]" defaultValue="agent-run-04" />
        <Button className="rounded-none border-2 border-black bg-[#39FF14] font-extrabold uppercase text-black shadow-[5px_5px_0_#111] active:translate-x-[3px] active:translate-y-[3px] active:shadow-[2px_2px_0_#111]">Approve plan</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored + verified

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "card",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "input",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "textarea",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "select",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "dialog",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "sheet",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "tabs",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "badge",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "separator",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "checkbox",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "switch",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "slider",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "tooltip",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    },
    {
      "component": "table",
      "recipe": "Use square 0 radius, 3px black contour where visible, mono labels for state, and green/cobalt only for selected or active operations."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "glass blur",
        "neon gradients",
        "soft gray borders"
      ],
      "composition": "Three-region agent operations wall with vertical rail, status cards, route table, and stamped action bar.",
      "id": "application-shell",
      "mustShowStates": [
        "primary approval button",
        "active route tab",
        "selected path badge",
        "tooltip coordinate note"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Approve run",
          "Fork evidence"
        ],
        "description": "Review manga-ingest decisions with explicit rails and stamped machine confidence.",
        "eyebrow": "PANEL 01 / ROUTE BOARD",
        "headline": "Agent Route Audit",
        "rows": [
          {
            "risk": "2",
            "source": "CRAN-204",
            "state": "scan"
          },
          {
            "risk": "4",
            "source": "MEM-019",
            "state": "route"
          },
          {
            "risk": "7",
            "source": "VENT-404",
            "state": "hold"
          }
        ],
        "stats": [
          {
            "label": "Confidence",
            "value": "94%"
          },
          {
            "label": "Open panels",
            "value": "18"
          },
          {
            "label": "Route",
            "value": "B-07"
          }
        ]
      }
    },
    {
      "avoid": [
        "rounded pill forms",
        "unlabeled icons"
      ],
      "composition": "Boxed curator override form with coordinate chip, hatch note, square fields, and decision dialog trigger.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input",
        "checked evidence box",
        "active switch",
        "slider with bordered track"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Stamp override",
          "Open diff dialog"
        ],
        "description": "Adjust a deconstructed caption decision while keeping the rail and reducing hatch density.",
        "eyebrow": "PANEL 02 / INPUT RAIL",
        "fields": [
          {
            "label": "Decision label",
            "value": "Recover deconstructed caption"
          },
          {
            "label": "Severity",
            "value": "Symbolic / readable"
          },
          {
            "label": "Operator note",
            "value": "Keep rotated rail; reduce hatch behind body copy."
          }
        ],
        "headline": "Curator Override"
      }
    },
    {
      "avoid": [
        "inventory wall",
        "generic admin table"
      ],
      "composition": "Evidence grid with sheet-based batch controls, stamp badges, and heavy ruled cells.",
      "id": "data-operations",
      "mustShowStates": [
        "open sheet handle",
        "dropdown menu placard",
        "warning badge",
        "black separator rail"
      ],
      "primitives": [
        "table",
        "sheet",
        "button",
        "badge",
        "separator",
        "tabs",
        "dropdown-menu",
        "card"
      ],
      "scene": {
        "actions": [
          "Open batch sheet",
          "Export route"
        ],
        "description": "Prioritize OCR, screentone, and typography fragments through a visible rule-based grid.",
        "eyebrow": "PANEL 03 / BATCH TABLE",
        "headline": "Evidence Queue",
        "rows": [
          {
            "risk": "1",
            "source": "OCR-118",
            "state": "pass"
          },
          {
            "risk": "6",
            "source": "TYPE-305",
            "state": "hold"
          },
          {
            "risk": "5",
            "source": "TONE-442",
            "state": "warn"
          }
        ],
        "stats": [
          {
            "label": "Held",
            "value": "7"
          },
          {
            "label": "Passed",
            "value": "41"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "terminal-green #00F05A",
      "cobalt #1155FF"
    ],
    "border": "heavy-solid-3px",
    "contour": "square",
    "density": "medium-high",
    "family": "postmodern-operations",
    "grain": false,
    "material": "inked-paper-panel",
    "motion": "shadow-collapse",
    "stickerBadges": true,
    "underlay": "dotted-grid-with-clipped-manga-hatch"
  }
}

More like this

Frost Sector Forensicsshares manga-gutters Memphis Command Objectsshares offset-shadows Panel Pop Command Lineshares square-controls Rail Ledger Product UIshares cobalt-accent Rain Capsule Command Shellshares manga-gutters