Silent Shell Manga Noir

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

:root {
  --background: #f2eee4;
  --foreground: #080808;
  --card: #fffaf0;
  --card-foreground: #080808;
  --popover: #fffaf0;
  --popover-foreground: #080808;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #f4f0e7;
  --secondary-foreground: #111111;
  --muted: #6b6860;
  --muted-foreground: #080808;
  --accent: #6fd18a;
  --accent-foreground: #ffffff;
  --destructive: #8f2e25;
  --border: #111111;
  --input: #111111;
  --ring: #6fd18a;
  --chart-1: #050505;
  --chart-2: #f4f0e7;
  --chart-3: #6fd18a;
  --chart-4: #4d8d5e;
  --chart-5: #a87926;
  --sidebar: #fffaf0;
  --sidebar-foreground: #080808;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #4f6f83;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #111111;
  --sidebar-ring: #6fd18a;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #6fd18a;
  --accent-foreground: #ffffff;
  --destructive: #8f2e25;
  --border: #303642;
  --input: #303642;
  --ring: #6fd18a;
  --chart-1: #050505;
  --chart-2: #f4f0e7;
  --chart-3: #6fd18a;
  --chart-4: #4d8d5e;
  --chart-5: #a87926;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #6fd18a;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #6fd18a;
  --radius: 0;
}

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 SilentShellMangaNoirShadcnKit() {
  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">Silent Shell Manga Noir</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>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "silent-shell-manga-noir",
  "type": "registry:theme",
  "title": "Silent Shell Manga Noir shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f2eee4",
      "foreground": "#080808",
      "card": "#fffaf0",
      "card-foreground": "#080808",
      "popover": "#fffaf0",
      "popover-foreground": "#080808",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f0e7",
      "secondary-foreground": "#111111",
      "muted": "#6b6860",
      "muted-foreground": "#080808",
      "accent": "#6fd18a",
      "accent-foreground": "#ffffff",
      "destructive": "#8f2e25",
      "border": "#111111",
      "input": "#111111",
      "ring": "#6fd18a",
      "chart-1": "#050505",
      "chart-2": "#f4f0e7",
      "chart-3": "#6fd18a",
      "chart-4": "#4d8d5e",
      "chart-5": "#a87926",
      "sidebar": "#fffaf0",
      "sidebar-foreground": "#080808",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4f6f83",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-ring": "#6fd18a",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#6fd18a",
      "accent-foreground": "#ffffff",
      "destructive": "#8f2e25",
      "border": "#303642",
      "input": "#303642",
      "ring": "#6fd18a",
      "chart-1": "#050505",
      "chart-2": "#f4f0e7",
      "chart-3": "#6fd18a",
      "chart-4": "#4d8d5e",
      "chart-5": "#a87926",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6fd18a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#6fd18a",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "silent-shell-manga-noir",
    "slug": "silent-shell-manga-noir",
    "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",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Silent Shell Manga Noir shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `silent-shell-manga-noir`
Slug: `silent-shell-manga-noir`

## Intent

Silent Shell Manga Noir is a restrained interface language for products that feel like a calm terminal session unfolding inside a black-and-white seinen manga. It rejects cyberpunk spectacle in favor of precise ink, large quiet voids, cropped human-machine fragments, command syntax, and diagnostic overlays that read like subtitles. The system treats negative space as evidence: every panel, gutter, prompt, cursor, and scan mark exists because it advances an existential technical narrative. Its emotional register is nocturnal and controlled, with sparse signal color reserved only for active state, rupture, or a verified system hit.

## 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": "#6fd18a",
  "background": "#f2eee4",
  "border": "#111111",
  "error": "#8f2e25",
  "info": "#4f6f83",
  "muted": "#6b6860",
  "primary": "#050505",
  "secondary": "#f4f0e7",
  "success": "#4d8d5e",
  "surface": "#fffaf0",
  "text": "#080808",
  "warning": "#a87926"
}

Typography:

{
  "base_size": "16px",
  "body_font": "IBM Plex Sans Condensed",
  "display_letter_spacing": "-0.035em",
  "display_line_height": 1.08,
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fragment+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap",
  "heading_font": "Bebas Neue",
  "letter_spacing": "-0.02em",
  "line_height": 1.55,
  "mono_font": "Fragment Mono",
  "scale_ratio": 1.25
}

## Visual character to preserve

- Use hard rectangular manga panels with 1px ink borders, deliberate white gutters, and occasional thick black title-card bands spanning across the grid.
- Reserve at least one full-height negative-space field where tiny monospace command lines float like subtitles near the lower edge.
- Overlay terminal panes as transparent off-white or ink blocks with prompt prefixes, bracketed labels, scanline backgrounds, and a single phosphor cursor accent.
- Crop figurative silhouettes, hands, and cables with CSS clip-path blocks and halftone radial patterns so they read as manga fragments rather than illustrations.
- Set display typography in compressed uppercase noir title cards, body labels in condensed grotesque, and command voice in monospace with strict negative tracking.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": false,
  "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/silent-shell-manga-noir/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: Start with black, off-white, and grayscale; add phosphor green only after identifying a true active state.; Create one dominant cropped panel rather than distributing visual weight evenly across cards.; Use real command syntax, paths, flags, timestamps, and terse diagnostics to make UI text feel operational.; Let empty paper or ink occupy large areas; a quiet void is a valid component in this language.; Use square corners, hairline borders, heavy black bands, and fixed gutters to preserve manga page structure.; Crop human-machine fragments aggressively so they feel cinematic, not illustrative or mascot-like.; Keep labels condensed, uppercase, and short; keep explanatory copy minimal and emotionally restrained.; Show active state with cursor blocks, scan-hit rules, or single-word warnings rather than buttons full of color.
- Do not: Do not use neon gradients, city skylines, holographic glass, glow stacks, or rainbow cyberpunk palettes.; Do not build a generic analytics dashboard, CRM, kanban board, or three equal feature cards.; Do not add decorative code rain, random binary, lorem ipsum logs, or pseudo-technical clutter.; Do not round panels, add drop shadows, or soften the system into a friendly SaaS aesthetic.; Do not use the accent for charts, backgrounds, secondary buttons, or general brand decoration.; Do not rely on anime screenshots; evoke manga and 90s/2000s interfaces through structure and typography.; Do not place every section at the same density or scale; alternate void, title, fragment, and diagnostic moments.

## 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 SilentShellMangaNoirShadcnKit() {
  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">Silent Shell Manga Noir</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": {
    "desktop": "1025px+ twelve-column cinematic grid",
    "mobile": "0-640px single panel stack",
    "tablet": "641-1024px six-column sequence"
  },
  "density": "Mixed-density layout with one dense command cluster balanced by large voids; this preserves the contemplative shell-session mood while still proving interface utility.",
  "grid": "Desktop uses a 12-column manga page grid with 16px gutters, max-width 1320px, asymmetric spans of 5/7, 3/4/5, and black full-width bands. Tablet collapses to 6 columns; mobile becomes a single sequenced panel stack.",
  "responsive": "On smaller screens, title bands remain oversized, terminal overlays become static captions, and cropped fragments simplify so the command voice remains readable.",
  "whitespace": "Whitespace is architectural: minimum internal panel padding is 16px, quiet fields expand to 96px or more, and unrelated panels are separated by visible paper gutters rather than soft margins."
}

{
  "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": "silent-shell-manga-noir",
    "name": "Silent Shell Manga Noir",
    "slug": "silent-shell-manga-noir"
  },
  "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": [
    "Use hard rectangular manga panels with 1px ink borders, deliberate white gutters, and occasional thick black title-card bands spanning across the grid.",
    "Reserve at least one full-height negative-space field where tiny monospace command lines float like subtitles near the lower edge.",
    "Overlay terminal panes as transparent off-white or ink blocks with prompt prefixes, bracketed labels, scanline backgrounds, and a single phosphor cursor accent.",
    "Crop figurative silhouettes, hands, and cables with CSS clip-path blocks and halftone radial patterns so they read as manga fragments rather than illustrations.",
    "Set display typography in compressed uppercase noir title cards, body labels in condensed grotesque, and command voice in monospace with strict negative tracking."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "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": "Silent Shell Manga Noir 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": [
      "Start with black, off-white, and grayscale; add phosphor green only after identifying a true active state.",
      "Create one dominant cropped panel rather than distributing visual weight evenly across cards.",
      "Use real command syntax, paths, flags, timestamps, and terse diagnostics to make UI text feel operational.",
      "Let empty paper or ink occupy large areas; a quiet void is a valid component in this language.",
      "Use square corners, hairline borders, heavy black bands, and fixed gutters to preserve manga page structure.",
      "Crop human-machine fragments aggressively so they feel cinematic, not illustrative or mascot-like.",
      "Keep labels condensed, uppercase, and short; keep explanatory copy minimal and emotionally restrained.",
      "Show active state with cursor blocks, scan-hit rules, or single-word warnings rather than buttons full of color."
    ],
    "dont": [
      "Do not use neon gradients, city skylines, holographic glass, glow stacks, or rainbow cyberpunk palettes.",
      "Do not build a generic analytics dashboard, CRM, kanban board, or three equal feature cards.",
      "Do not add decorative code rain, random binary, lorem ipsum logs, or pseudo-technical clutter.",
      "Do not round panels, add drop shadows, or soften the system into a friendly SaaS aesthetic.",
      "Do not use the accent for charts, backgrounds, secondary buttons, or general brand decoration.",
      "Do not rely on anime screenshots; evoke manga and 90s/2000s interfaces through structure and typography.",
      "Do not place every section at the same density or scale; alternate void, title, fragment, and diagnostic moments."
    ]
  }
}