design language·graphite-cockpit-notation

Katagami Graphite Cockpit Notation

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

Katagami Graphite Cockpit Notation translates paper stencil discipline into a mecha cockpit and maintenance interface: matte graphite fields, precise cut-line panels, pale HUD instrumentation, and sparse orange fault marks create a native human-machine diagnostic language rather than a generic dashboard.

values

Stencil clarity: every panel edge, notch, leader, and aperture has a mechanical purpose and reads as cut material rather than decoration.Operational tension: dense control clusters are balanced by black monitor voids so attention can move between alarm, instrument, and embodied machine form.Embodied machinery: the interface implies seat geometry, limb articulation, hinge risk, and cockpit workload instead of presenting abstract SaaS cards.Restrained signal color: orange is conserved for faults, calibration numbers, and mechanical danger while pale blue-white HUD marks remain secondary.

anti-values

×Neon cyberpunk gradients, nightclub glow, green matrix code, and glossy glassmorphism.×Equal-height analytics cards, friendly rounded startup shells, generic CRM tables, or decorative fan-art character portraits.×Illegible terminal floods or microtext used as filler without cockpit function.

tokens

borders5 items

dash: 1px dashed rgba(240,242,237,.42)
emphasis: 2px solid #d8dde2
fault: 2px solid #ff6a2a
hairline: 1px solid rgba(216,221,226,.32)
panel: 1px solid #56616b

colors12 items

accent

#ff6a2a

background

#060708

border

#56616b

error

#ff4f3e

info

#9bd7ff

muted

#9aa2a9

primary

#d8dde2

secondary

#8d98a2

success

#7ccf8a

surface

#111418

text

#f0f2ed

warning

#ffb347

components5 items

badge: numbered orange maintenance tab paired with text and leader line, never color alone
button: square graphite plate using {colors.surface}, {borders.panel}, uppercase mono label, and orange left index only for critical action
card: cut stencil panel with {colors.background}, thin off-white rule, clipped corner, no soft card shadow
input: terminal trough with dark fill, pale label, square focus outline, and fixed-width sensor value
nav: side rail of compact calibration rows and bracketed active state

motion4 items

duration fast: 120ms
duration medium: 240ms
easing: cubic-bezier(.2,.8,.2,1)
reduced motion: disable sweep animations and retain static reticles

radii5 items

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

shadows3 items

fault: 0 0 18px rgba(255,106,42,.22)
hud: 0 0 22px rgba(155,215,255,.18)
void: inset 0 0 80px rgba(0,0,0,.86)

spacing2 items

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

typography8 items

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

rules

composition

Build screens as cockpit views rather than dashboards: one central forward aperture dominates, side rails hold grouped controls, an exploded limb diagram interrupts the grid, and thin katagami panel lines establish depth. Avoid three equal cards; make one dense diagnostic area, one spacious black aperture, and one cropped mechanical form.

density

Density is intentionally uneven: microcopy clusters are tight like cockpit controls, while monitor darkness, stencil gutters, and sensor-safe margins create pause for attention management.

hierarchy

Primary hierarchy comes from scale, line weight, and spatial position: the cockpit aperture is largest, orange numbered faults are rare but highest urgency, pale HUD marks are secondary, and terminal labels are tertiary.

signature patterns

Cropped cockpit-arc frame built with CSS radial borders, conic gradients, and pseudo-element notches to create a pilot-seat aperture that breaks the grid.Exploded anatomy panel made from absolute CSS lines, dashed leader rules, orange numbered tabs, and layered mechanical plates tied to labeled joints.HUD overlay layer with reticles, bracket corners, tick strips, translucent panes, and pale blue-white measurement marks at reduced opacity.Katagami cut-line grid using stepped off-white panel rules, diagonal manga slice dividers, and clipped corners so structure remains recognizable without color.Terminal microcopy ribbons using uppercase IBM Plex Mono, narrow spacing, real diagnostic phrases, and short IDs rather than fake code dumps.

layout

breakpoints

Mobile below 720px stacks aperture, diagnostics, and anatomy while preserving callout leaders; tablet uses two asymmetric columns; desktop uses 3/6/3 rails.

density

Moderate-high cockpit density balanced by 64-128px carbon-black voids; 4-12px control clusters sit inside larger stencil panels.

grid

Desktop uses a 12-column max 1360px cockpit grid with 24px gutters: 3-column left diagnostic rail, 6-column central aperture, 3-column status rail, plus one full-bleed mechanical crop that pierces the columns.

responsive

At narrow widths arcs scale down, dense microcopy wraps into ribbons, nonessential ticks reduce opacity, and orange callouts remain text-labeled.

whitespace

Whitespace is not empty SaaS air; it is monitor darkness, blocked sensor view, and protected safety margin around critical symbology.

guidance

Use matte graphite and carbon black as the majority of the interface surface.
Make orange appear only on numbered faults, hinge labels, calibration warnings, and embodied mechanical risk.
Keep HUD marks pale blue-white, thin, low-opacity, and subordinate to text legibility.
Use off-white katagami panel rules, construction lines, cut leaders, and cropped anatomy as the main decorative system.
Show a specific cockpit or maintenance product rather than a generic dashboard.
Create asymmetry with a dominant cockpit aperture and one mechanical diagram breaking the grid.
Write terminal copy as short diagnostics, sensor states, and pilot workload labels.
Preserve negative tracking, compact condensed headings, and visible focus outlines.

avoid

Do not use neon cyberpunk, saturated cyan-magenta gradients, green matrix rain, or nightclub glow.
Do not build equal SaaS cards, analytics charts, CRM tables, or startup landing-page sections.
Do not over-clutter the HUD with dozens of floating widgets; every mark needs a cockpit purpose.
Do not center fan-art characters or anime portraits; imply embodiment through controls, seat geometry, and warnings.
Do not use glossy glassmorphism, pill buttons everywhere, or friendly rounded app shells.
Do not rely on orange alone for urgent states; pair it with labels, numbers, and line-weight changes.
Do not create fake hacker code dumps, lorem terminal floods, or illegible microtext as filler.

katagami spec

# Katagami Graphite Cockpit Notation

## Philosophy

### Values

- Stencil clarity: every panel edge, notch, leader, and aperture has a mechanical purpose and reads as cut material rather than decoration.
- Operational tension: dense control clusters are balanced by black monitor voids so attention can move between alarm, instrument, and embodied machine form.
- Embodied machinery: the interface implies seat geometry, limb articulation, hinge risk, and cockpit workload instead of presenting abstract SaaS cards.
- Restrained signal color: orange is conserved for faults, calibration numbers, and mechanical danger while pale blue-white HUD marks remain secondary.

### Anti-Values

- Neon cyberpunk gradients, nightclub glow, green matrix code, and glossy glassmorphism.
- Equal-height analytics cards, friendly rounded startup shells, generic CRM tables, or decorative fan-art character portraits.
- Illegible terminal floods or microtext used as filler without cockpit function.

### Visual Character

- A dominant central cockpit aperture is drawn with nested radial borders, clipped black voids, and angular stencil notches that break out of the rectangular page grid.
- Manga-katagami panel cuts use thin off-white rules, stepped corners, diagonal slice lines, and masked gaps to make the layout feel physically cut from graphite sheet.
- Exploded machine anatomy panels combine cropped mechanical silhouettes, dashed leader lines, numbered orange badges, and small terminal labels tied to specific joints.
- Low-opacity HUD overlays sit in separate layers using reticles, tick strips, bracket corners, scan arcs, and pale blue-white measurement marks that never compete with reading.
- Typography uses condensed uppercase headings, monospace calibration ribbons, negative tracking, and compact numeric labels to sound like a cockpit checklist.

## Tokens

### Borders

- **Dash**: 1px dashed rgba(240,242,237,.42)
- **Emphasis**: 2px solid #d8dde2
- **Fault**: 2px solid #ff6a2a
- **Hairline**: 1px solid rgba(216,221,226,.32)
- **Panel**: 1px solid #56616b

### Colors

| Name | Value |
|------|-------|
| accent | `#ff6a2a` |
| background | `#060708` |
| border | `#56616b` |
| error | `#ff4f3e` |
| info | `#9bd7ff` |
| muted | `#9aa2a9` |
| primary | `#d8dde2` |
| secondary | `#8d98a2` |
| success | `#7ccf8a` |
| surface | `#111418` |
| text | `#f0f2ed` |
| warning | `#ffb347` |

### Components

- **Badge**: numbered orange maintenance tab paired with text and leader line, never color alone
- **Button**: square graphite plate using {colors.surface}, {borders.panel}, uppercase mono label, and orange left index only for critical action
- **Card**: cut stencil panel with {colors.background}, thin off-white rule, clipped corner, no soft card shadow
- **Input**: terminal trough with dark fill, pale label, square focus outline, and fixed-width sensor value
- **Nav**: side rail of compact calibration rows and bracketed active state

### Motion

- **Duration Fast**: 120ms
- **Duration Medium**: 240ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Reduced Motion**: disable sweep animations and retain static reticles

### Radii

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

### Shadows

- **Fault**: 0 0 18px rgba(255,106,42,.22)
- **Hud**: 0 0 22px rgba(155,215,255,.18)
- **Void**: inset 0 0 80px rgba(0,0,0,.86)

### Spacing

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

### Typography

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

## Rules

### Composition

Build screens as cockpit views rather than dashboards: one central forward aperture dominates, side rails hold grouped controls, an exploded limb diagram interrupts the grid, and thin katagami panel lines establish depth. Avoid three equal cards; make one dense diagnostic area, one spacious black aperture, and one cropped mechanical form.

### Density

Density is intentionally uneven: microcopy clusters are tight like cockpit controls, while monitor darkness, stencil gutters, and sensor-safe margins create pause for attention management.

### Hierarchy

Primary hierarchy comes from scale, line weight, and spatial position: the cockpit aperture is largest, orange numbered faults are rare but highest urgency, pale HUD marks are secondary, and terminal labels are tertiary.

### Signature Patterns

- Cropped cockpit-arc frame built with CSS radial borders, conic gradients, and pseudo-element notches to create a pilot-seat aperture that breaks the grid.
- Exploded anatomy panel made from absolute CSS lines, dashed leader rules, orange numbered tabs, and layered mechanical plates tied to labeled joints.
- HUD overlay layer with reticles, bracket corners, tick strips, translucent panes, and pale blue-white measurement marks at reduced opacity.
- Katagami cut-line grid using stepped off-white panel rules, diagonal manga slice dividers, and clipped corners so structure remains recognizable without color.
- Terminal microcopy ribbons using uppercase IBM Plex Mono, narrow spacing, real diagnostic phrases, and short IDs rather than fake code dumps.

## Layout

### Breakpoints

Mobile below 720px stacks aperture, diagnostics, and anatomy while preserving callout leaders; tablet uses two asymmetric columns; desktop uses 3/6/3 rails.

### Density

Moderate-high cockpit density balanced by 64-128px carbon-black voids; 4-12px control clusters sit inside larger stencil panels.

### Grid

Desktop uses a 12-column max 1360px cockpit grid with 24px gutters: 3-column left diagnostic rail, 6-column central aperture, 3-column status rail, plus one full-bleed mechanical crop that pierces the columns.

### Responsive

At narrow widths arcs scale down, dense microcopy wraps into ribbons, nonessential ticks reduce opacity, and orange callouts remain text-labeled.

### Whitespace

Whitespace is not empty SaaS air; it is monitor darkness, blocked sensor view, and protected safety margin around critical symbology.

## Guidance

### Do

- Use matte graphite and carbon black as the majority of the interface surface.
- Make orange appear only on numbered faults, hinge labels, calibration warnings, and embodied mechanical risk.
- Keep HUD marks pale blue-white, thin, low-opacity, and subordinate to text legibility.
- Use off-white katagami panel rules, construction lines, cut leaders, and cropped anatomy as the main decorative system.
- Show a specific cockpit or maintenance product rather than a generic dashboard.
- Create asymmetry with a dominant cockpit aperture and one mechanical diagram breaking the grid.
- Write terminal copy as short diagnostics, sensor states, and pilot workload labels.
- Preserve negative tracking, compact condensed headings, and visible focus outlines.

### Don't

- Do not use neon cyberpunk, saturated cyan-magenta gradients, green matrix rain, or nightclub glow.
- Do not build equal SaaS cards, analytics charts, CRM tables, or startup landing-page sections.
- Do not over-clutter the HUD with dozens of floating widgets; every mark needs a cockpit purpose.
- Do not center fan-art characters or anime portraits; imply embodiment through controls, seat geometry, and warnings.
- Do not use glossy glassmorphism, pill buttons everywhere, or friendly rounded app shells.
- Do not rely on orange alone for urgent states; pair it with labels, numbers, and line-weight changes.
- Do not create fake hacker code dumps, lorem terminal floods, or illegible microtext as filler.

### Accessibility

Maintain AA contrast for all functional text, keep body copy at 15-16px, avoid relying on hue alone, provide square focus outlines, and reduce decorative HUD opacity before it competes with reading.

### Usage Context

Best for speculative mecha cockpit systems, maintenance overlays, robot anatomy manuals, flight-control calibration tools, tactical simulator interfaces, and narrative human-machine diagnostics.

DESIGN.md

---
version: "alpha"
name: "Katagami Graphite Cockpit Notation"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#ff6a2a"
  background: "#060708"
  border: "#56616b"
  error: "#ff4f3e"
  info: "#9bd7ff"
  muted: "#9aa2a9"
  primary: "#d8dde2"
  secondary: "#8d98a2"
  success: "#7ccf8a"
  surface: "#111418"
  text: "#f0f2ed"
  warning: "#ffb347"
typography:
  headline-lg:
    fontFamily: "Rajdhani"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Rajdhani"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "8px"
  md: "4px"
  none: "0px"
  sm: "2px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
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: "#000000"
    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"
---

# Katagami Graphite Cockpit Notation

## Overview

Katagami Graphite Cockpit Notation translates paper stencil discipline into a mecha cockpit and maintenance interface: matte graphite fields, precise cut-line panels, pale HUD instrumentation, and sparse orange fault marks create a native human-machine diagnostic language rather than a generic dashboard.

### Values

- Stencil clarity: every panel edge, notch, leader, and aperture has a mechanical purpose and reads as cut material rather than decoration.
- Operational tension: dense control clusters are balanced by black monitor voids so attention can move between alarm, instrument, and embodied machine form.
- Embodied machinery: the interface implies seat geometry, limb articulation, hinge risk, and cockpit workload instead of presenting abstract SaaS cards.
- Restrained signal color: orange is conserved for faults, calibration numbers, and mechanical danger while pale blue-white HUD marks remain secondary.

### Anti-Values

- Neon cyberpunk gradients, nightclub glow, green matrix code, and glossy glassmorphism.
- Equal-height analytics cards, friendly rounded startup shells, generic CRM tables, or decorative fan-art character portraits.
- Illegible terminal floods or microtext used as filler without cockpit function.

### Visual Character

- A dominant central cockpit aperture is drawn with nested radial borders, clipped black voids, and angular stencil notches that break out of the rectangular page grid.
- Manga-katagami panel cuts use thin off-white rules, stepped corners, diagonal slice lines, and masked gaps to make the layout feel physically cut from graphite sheet.
- Exploded machine anatomy panels combine cropped mechanical silhouettes, dashed leader lines, numbered orange badges, and small terminal labels tied to specific joints.
- Low-opacity HUD overlays sit in separate layers using reticles, tick strips, bracket corners, scan arcs, and pale blue-white measurement marks that never compete with reading.
- Typography uses condensed uppercase headings, monospace calibration ribbons, negative tracking, and compact numeric labels to sound like a cockpit checklist.

## 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 | `#ff6a2a` |
| background | `#060708` |
| border | `#56616b` |
| error | `#ff4f3e` |
| info | `#9bd7ff` |
| muted | `#9aa2a9` |
| primary | `#d8dde2` |
| secondary | `#8d98a2` |
| success | `#7ccf8a` |
| surface | `#111418` |
| text | `#f0f2ed` |
| warning | `#ffb347` |

## Typography

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

## Layout

### Spacing Tokens

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

### Breakpoints

Mobile below 720px stacks aperture, diagnostics, and anatomy while preserving callout leaders; tablet uses two asymmetric columns; desktop uses 3/6/3 rails.

### Density

Moderate-high cockpit density balanced by 64-128px carbon-black voids; 4-12px control clusters sit inside larger stencil panels.

### Grid

Desktop uses a 12-column max 1360px cockpit grid with 24px gutters: 3-column left diagnostic rail, 6-column central aperture, 3-column status rail, plus one full-bleed mechanical crop that pierces the columns.

### Responsive

At narrow widths arcs scale down, dense microcopy wraps into ribbons, nonessential ticks reduce opacity, and orange callouts remain text-labeled.

### Whitespace

Whitespace is not empty SaaS air; it is monitor darkness, blocked sensor view, and protected safety margin around critical symbology.

## Elevation & Depth

### Shadows

- **Fault**: 0 0 18px rgba(255,106,42,.22)
- **Hud**: 0 0 22px rgba(155,215,255,.18)
- **Void**: inset 0 0 80px rgba(0,0,0,.86)

## Shapes

### Rounded

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

### Borders

- **Dash**: 1px dashed rgba(240,242,237,.42)
- **Emphasis**: 2px solid #d8dde2
- **Fault**: 2px solid #ff6a2a
- **Hairline**: 1px solid rgba(216,221,226,.32)
- **Panel**: 1px solid #56616b

## Components

### Composition

Build screens as cockpit views rather than dashboards: one central forward aperture dominates, side rails hold grouped controls, an exploded limb diagram interrupts the grid, and thin katagami panel lines establish depth. Avoid three equal cards; make one dense diagnostic area, one spacious black aperture, and one cropped mechanical form.

### Density

Density is intentionally uneven: microcopy clusters are tight like cockpit controls, while monitor darkness, stencil gutters, and sensor-safe margins create pause for attention management.

### Hierarchy

Primary hierarchy comes from scale, line weight, and spatial position: the cockpit aperture is largest, orange numbered faults are rare but highest urgency, pale HUD marks are secondary, and terminal labels are tertiary.

### Signature Patterns

- Cropped cockpit-arc frame built with CSS radial borders, conic gradients, and pseudo-element notches to create a pilot-seat aperture that breaks the grid.
- Exploded anatomy panel made from absolute CSS lines, dashed leader rules, orange numbered tabs, and layered mechanical plates tied to labeled joints.
- HUD overlay layer with reticles, bracket corners, tick strips, translucent panes, and pale blue-white measurement marks at reduced opacity.
- Katagami cut-line grid using stepped off-white panel rules, diagonal manga slice dividers, and clipped corners so structure remains recognizable without color.
- Terminal microcopy ribbons using uppercase IBM Plex Mono, narrow spacing, real diagnostic phrases, and short IDs rather than fake code dumps.

## 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-019e05c2-fbb5-7893-aa33-32fc635a45cc/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 matte graphite and carbon black as the majority of the interface surface.
- Do Make orange appear only on numbered faults, hinge labels, calibration warnings, and embodied mechanical risk.
- Do Keep HUD marks pale blue-white, thin, low-opacity, and subordinate to text legibility.
- Do Use off-white katagami panel rules, construction lines, cut leaders, and cropped anatomy as the main decorative system.
- Do Show a specific cockpit or maintenance product rather than a generic dashboard.
- Do Create asymmetry with a dominant cockpit aperture and one mechanical diagram breaking the grid.
- Do Write terminal copy as short diagnostics, sensor states, and pilot workload labels.
- Do Preserve negative tracking, compact condensed headings, and visible focus outlines.
- Don't Do not use neon cyberpunk, saturated cyan-magenta gradients, green matrix rain, or nightclub glow.
- Don't Do not build equal SaaS cards, analytics charts, CRM tables, or startup landing-page sections.
- Don't Do not over-clutter the HUD with dozens of floating widgets; every mark needs a cockpit purpose.
- Don't Do not center fan-art characters or anime portraits; imply embodiment through controls, seat geometry, and warnings.
- Don't Do not use glossy glassmorphism, pill buttons everywhere, or friendly rounded app shells.
- Don't Do not rely on orange alone for urgent states; pair it with labels, numbers, and line-weight changes.
- Don't Do not create fake hacker code dumps, lorem terminal floods, or illegible microtext as filler.

### Accessibility

Maintain AA contrast for all functional text, keep body copy at 15-16px, avoid relying on hue alone, provide square focus outlines, and reduce decorative HUD opacity before it competes with reading.

### Usage Context

Best for speculative mecha cockpit systems, maintenance overlays, robot anatomy manuals, flight-control calibration tools, tactical simulator interfaces, and narrative human-machine diagnostics.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "graphite-cockpit-notation",
  "type": "registry:theme",
  "title": "Katagami Graphite Cockpit Notation shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#060708",
      "foreground": "#f0f2ed",
      "card": "#111418",
      "card-foreground": "#f0f2ed",
      "popover": "#111418",
      "popover-foreground": "#f0f2ed",
      "primary": "#d8dde2",
      "primary-foreground": "#111111",
      "secondary": "#8d98a2",
      "secondary-foreground": "#ffffff",
      "muted": "#9aa2a9",
      "muted-foreground": "#f0f2ed",
      "accent": "#ff6a2a",
      "accent-foreground": "#ffffff",
      "destructive": "#ff4f3e",
      "border": "#56616b",
      "input": "#56616b",
      "ring": "#ff6a2a",
      "chart-1": "#d8dde2",
      "chart-2": "#8d98a2",
      "chart-3": "#ff6a2a",
      "chart-4": "#7ccf8a",
      "chart-5": "#ffb347",
      "sidebar": "#111418",
      "sidebar-foreground": "#f0f2ed",
      "sidebar-primary": "#d8dde2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9bd7ff",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#56616b",
      "sidebar-ring": "#ff6a2a",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#d8dde2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#ff6a2a",
      "accent-foreground": "#ffffff",
      "destructive": "#ff4f3e",
      "border": "#303642",
      "input": "#303642",
      "ring": "#ff6a2a",
      "chart-1": "#d8dde2",
      "chart-2": "#8d98a2",
      "chart-3": "#ff6a2a",
      "chart-4": "#7ccf8a",
      "chart-5": "#ffb347",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#d8dde2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#ff6a2a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#ff6a2a",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e05c2-fbb5-7893-aa33-32fc635a45cc",
    "slug": "graphite-cockpit-notation",
    "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": [
        "dash",
        "emphasis",
        "fault",
        "hairline",
        "panel"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "components": [
        "badge",
        "button",
        "card",
        "input",
        "nav"
      ],
      "motion": [
        "duration_fast",
        "duration_medium",
        "easing",
        "reduced_motion"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "fault",
        "hud",
        "void"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "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 · graphite-cockpit-notation

DESIGN.md

at a glance

Palette

Typography

headline-lgRajdhani · 29px · 700

The quick brown fox jumps

headline-mdRajdhani · 24px · 600

The quick brown fox jumps

body-mdIBM Plex Sans Condensed · 16px · 400

The quick brown fox jumps

label-mdIBM Plex 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
step-896px
step-9128px

Shape

full9999px

lg8px

md4px

none0px

sm2px

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

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

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

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

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

shadcn add

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

theme css

:root {
  --background: #060708;
  --foreground: #f0f2ed;
  --card: #111418;
  --card-foreground: #f0f2ed;
  --popover: #111418;
  --popover-foreground: #f0f2ed;
  --primary: #d8dde2;
  --primary-foreground: #111111;
  --secondary: #8d98a2;
  --secondary-foreground: #ffffff;
  --muted: #9aa2a9;
  --muted-foreground: #f0f2ed;
  --accent: #ff6a2a;
  --accent-foreground: #ffffff;
  --destructive: #ff4f3e;
  --border: #56616b;
  --input: #56616b;
  --ring: #ff6a2a;
  --chart-1: #d8dde2;
  --chart-2: #8d98a2;
  --chart-3: #ff6a2a;
  --chart-4: #7ccf8a;
  --chart-5: #ffb347;
  --sidebar: #111418;
  --sidebar-foreground: #f0f2ed;
  --sidebar-primary: #d8dde2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #9bd7ff;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #56616b;
  --sidebar-ring: #ff6a2a;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #d8dde2;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #ff6a2a;
  --accent-foreground: #ffffff;
  --destructive: #ff4f3e;
  --border: #303642;
  --input: #303642;
  --ring: #ff6a2a;
  --chart-1: #d8dde2;
  --chart-2: #8d98a2;
  --chart-3: #ff6a2a;
  --chart-4: #7ccf8a;
  --chart-5: #ffb347;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #d8dde2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #ff6a2a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #ff6a2a;
  --radius: 4px;
}

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 KatagamiGraphiteCockpitNotationShadcnKit() {
  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">Katagami Graphite Cockpit Notation</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 JSONcompatibility fallback

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "graphite-cockpit-notation",
  "type": "registry:theme",
  "title": "Katagami Graphite Cockpit Notation shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#060708",
      "foreground": "#f0f2ed",
      "card": "#111418",
      "card-foreground": "#f0f2ed",
      "popover": "#111418",
      "popover-foreground": "#f0f2ed",
      "primary": "#d8dde2",
      "primary-foreground": "#111111",
      "secondary": "#8d98a2",
      "secondary-foreground": "#ffffff",
      "muted": "#9aa2a9",
      "muted-foreground": "#f0f2ed",
      "accent": "#ff6a2a",
      "accent-foreground": "#ffffff",
      "destructive": "#ff4f3e",
      "border": "#56616b",
      "input": "#56616b",
      "ring": "#ff6a2a",
      "chart-1": "#d8dde2",
      "chart-2": "#8d98a2",
      "chart-3": "#ff6a2a",
      "chart-4": "#7ccf8a",
      "chart-5": "#ffb347",
      "sidebar": "#111418",
      "sidebar-foreground": "#f0f2ed",
      "sidebar-primary": "#d8dde2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9bd7ff",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#56616b",
      "sidebar-ring": "#ff6a2a",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#d8dde2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#ff6a2a",
      "accent-foreground": "#ffffff",
      "destructive": "#ff4f3e",
      "border": "#303642",
      "input": "#303642",
      "ring": "#ff6a2a",
      "chart-1": "#d8dde2",
      "chart-2": "#8d98a2",
      "chart-3": "#ff6a2a",
      "chart-4": "#7ccf8a",
      "chart-5": "#ffb347",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#d8dde2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#ff6a2a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#ff6a2a",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e05c2-fbb5-7893-aa33-32fc635a45cc",
    "slug": "graphite-cockpit-notation",
    "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": [
        "dash",
        "emphasis",
        "fault",
        "hairline",
        "panel"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "components": [
        "badge",
        "button",
        "card",
        "input",
        "nav"
      ],
      "motion": [
        "duration_fast",
        "duration_medium",
        "easing",
        "reduced_motion"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "fault",
        "hud",
        "void"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

component recipescompatibility fallback

# Katagami Graphite Cockpit Notation shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019e05c2-fbb5-7893-aa33-32fc635a45cc`
Slug: `graphite-cockpit-notation`

## Intent

Katagami Graphite Cockpit Notation translates paper stencil discipline into a mecha cockpit and maintenance interface: matte graphite fields, precise cut-line panels, pale HUD instrumentation, and sparse orange fault marks create a native human-machine diagnostic language rather than a generic dashboard.

## Required primitives

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

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

## Token cues

Colors:

{
  "accent": "#ff6a2a",
  "background": "#060708",
  "border": "#56616b",
  "error": "#ff4f3e",
  "info": "#9bd7ff",
  "muted": "#9aa2a9",
  "primary": "#d8dde2",
  "secondary": "#8d98a2",
  "success": "#7ccf8a",
  "surface": "#111418",
  "text": "#f0f2ed",
  "warning": "#ffb347"
}

Typography:

{
  "base_size": "16px",
  "body_font": "IBM Plex Sans Condensed",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap",
  "heading_font": "Rajdhani",
  "letter_spacing": "-0.02em",
  "line_height": 1.48,
  "mono_font": "IBM Plex Mono",
  "scale_ratio": 1.22
}

## Visual character to preserve

- A dominant central cockpit aperture is drawn with nested radial borders, clipped black voids, and angular stencil notches that break out of the rectangular page grid.
- Manga-katagami panel cuts use thin off-white rules, stepped corners, diagonal slice lines, and masked gaps to make the layout feel physically cut from graphite sheet.
- Exploded machine anatomy panels combine cropped mechanical silhouettes, dashed leader lines, numbered orange badges, and small terminal labels tied to specific joints.
- Low-opacity HUD overlays sit in separate layers using reticles, tick strips, bracket corners, scan arcs, and pale blue-white measurement marks that never compete with reading.
- Typography uses condensed uppercase headings, monospace calibration ribbons, negative tracking, and compact numeric labels to sound like a cockpit checklist.

## ShadSync visual profile

{
  "family": "brutalist",
  "material": "ink",
  "contour": "default",
  "border": "dashed",
  "underlay": true,
  "grain": false,
  "stickerBadges": true,
  "motion": "still",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

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

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

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

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

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

## Preview shots

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

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/graphite-cockpit-notation/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Use matte graphite and carbon black as the majority of the interface surface.; Make orange appear only on numbered faults, hinge labels, calibration warnings, and embodied mechanical risk.; Keep HUD marks pale blue-white, thin, low-opacity, and subordinate to text legibility.; Use off-white katagami panel rules, construction lines, cut leaders, and cropped anatomy as the main decorative system.; Show a specific cockpit or maintenance product rather than a generic dashboard.; Create asymmetry with a dominant cockpit aperture and one mechanical diagram breaking the grid.; Write terminal copy as short diagnostics, sensor states, and pilot workload labels.; Preserve negative tracking, compact condensed headings, and visible focus outlines.
- Do not: Do not use neon cyberpunk, saturated cyan-magenta gradients, green matrix rain, or nightclub glow.; Do not build equal SaaS cards, analytics charts, CRM tables, or startup landing-page sections.; Do not over-clutter the HUD with dozens of floating widgets; every mark needs a cockpit purpose.; Do not center fan-art characters or anime portraits; imply embodiment through controls, seat geometry, and warnings.; Do not use glossy glassmorphism, pill buttons everywhere, or friendly rounded app shells.; Do not rely on orange alone for urgent states; pair it with labels, numbers, and line-weight changes.; Do not create fake hacker code dumps, lorem terminal floods, or illegible microtext as filler.

## Copy-paste component example

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

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

export function KatagamiGraphiteCockpitNotationShadcnKit() {
  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">Katagami Graphite Cockpit Notation</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

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

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

## Layout notes

{
  "breakpoints": "Mobile below 720px stacks aperture, diagnostics, and anatomy while preserving callout leaders; tablet uses two asymmetric columns; desktop uses 3/6/3 rails.",
  "density": "Moderate-high cockpit density balanced by 64-128px carbon-black voids; 4-12px control clusters sit inside larger stencil panels.",
  "grid": "Desktop uses a 12-column max 1360px cockpit grid with 24px gutters: 3-column left diagnostic rail, 6-column central aperture, 3-column status rail, plus one full-bleed mechanical crop that pierces the columns.",
  "responsive": "At narrow widths arcs scale down, dense microcopy wraps into ribbons, nonessential ticks reduce opacity, and orange callouts remain text-labeled.",
  "whitespace": "Whitespace is not empty SaaS air; it is monitor darkness, blocked sensor view, and protected safety margin around critical symbology."
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019e05c2-fbb5-7893-aa33-32fc635a45cc",
    "name": "Katagami Graphite Cockpit Notation",
    "slug": "graphite-cockpit-notation"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "A dominant central cockpit aperture is drawn with nested radial borders, clipped black voids, and angular stencil notches that break out of the rectangular page grid.",
    "Manga-katagami panel cuts use thin off-white rules, stepped corners, diagonal slice lines, and masked gaps to make the layout feel physically cut from graphite sheet.",
    "Exploded machine anatomy panels combine cropped mechanical silhouettes, dashed leader lines, numbered orange badges, and small terminal labels tied to specific joints.",
    "Low-opacity HUD overlays sit in separate layers using reticles, tick strips, bracket corners, scan arcs, and pale blue-white measurement marks that never compete with reading.",
    "Typography uses condensed uppercase headings, monospace calibration ribbons, negative tracking, and compact numeric labels to sound like a cockpit checklist."
  ],
  "visualProfile": {
    "family": "brutalist",
    "material": "ink",
    "contour": "default",
    "border": "dashed",
    "underlay": true,
    "grain": false,
    "stickerBadges": true,
    "motion": "still",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Katagami Graphite Cockpit Notation launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use matte graphite and carbon black as the majority of the interface surface.",
      "Make orange appear only on numbered faults, hinge labels, calibration warnings, and embodied mechanical risk.",
      "Keep HUD marks pale blue-white, thin, low-opacity, and subordinate to text legibility.",
      "Use off-white katagami panel rules, construction lines, cut leaders, and cropped anatomy as the main decorative system.",
      "Show a specific cockpit or maintenance product rather than a generic dashboard.",
      "Create asymmetry with a dominant cockpit aperture and one mechanical diagram breaking the grid.",
      "Write terminal copy as short diagnostics, sensor states, and pilot workload labels.",
      "Preserve negative tracking, compact condensed headings, and visible focus outlines."
    ],
    "dont": [
      "Do not use neon cyberpunk, saturated cyan-magenta gradients, green matrix rain, or nightclub glow.",
      "Do not build equal SaaS cards, analytics charts, CRM tables, or startup landing-page sections.",
      "Do not over-clutter the HUD with dozens of floating widgets; every mark needs a cockpit purpose.",
      "Do not center fan-art characters or anime portraits; imply embodiment through controls, seat geometry, and warnings.",
      "Do not use glossy glassmorphism, pill buttons everywhere, or friendly rounded app shells.",
      "Do not rely on orange alone for urgent states; pair it with labels, numbers, and line-weight changes.",
      "Do not create fake hacker code dumps, lorem terminal floods, or illegible microtext as filler."
    ]
  }
}

More like this

Emigre Vernacular Type Consoleshares registration-marks Graphite Cockpit Annotationshares graphite-cockpit Graphite Cockpit Notationshares graphite-cockpit Katagami Cut Paper Systemsshares registration-marks