Swiss Punk Manga Interface Collage

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

:root {
  --background: #F7F3EA;
  --foreground: #090909;
  --card: #FFFDF6;
  --card-foreground: #090909;
  --popover: #FFFDF6;
  --popover-foreground: #090909;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #F4F0E6;
  --secondary-foreground: #111111;
  --muted: #77716A;
  --muted-foreground: #090909;
  --accent: #E34234;
  --accent-foreground: #ffffff;
  --destructive: #C62020;
  --border: #111111;
  --input: #111111;
  --ring: #E34234;
  --chart-1: #0A0A0A;
  --chart-2: #F4F0E6;
  --chart-3: #E34234;
  --chart-4: #1E6B4E;
  --chart-5: #B76A00;
  --sidebar: #FFFDF6;
  --sidebar-foreground: #090909;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2D4F73;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #111111;
  --sidebar-ring: #E34234;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #E34234;
  --accent-foreground: #ffffff;
  --destructive: #C62020;
  --border: #303642;
  --input: #303642;
  --ring: #E34234;
  --chart-1: #0A0A0A;
  --chart-2: #F4F0E6;
  --chart-3: #E34234;
  --chart-4: #1E6B4E;
  --chart-5: #B76A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #E34234;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #E34234;
  --radius: 2px;
}

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 SwissPunkMangaInterfaceCollageShadcnKit() {
  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">Swiss Punk Manga Interface Collage</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",
  "cssVars": {
    "dark": {
      "accent": "#FF4FD8",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#0B0B0C",
      "chart-2": "#F3EFE4",
      "chart-3": "#FF4FD8",
      "chart-4": "#1B7A3D",
      "chart-5": "#B77900",
      "destructive": "#C5162E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF4FD8",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#FF4FD8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF4FD8"
    },
    "light": {
      "accent": "#FF4FD8",
      "accent-foreground": "#ffffff",
      "background": "#F7F1E4",
      "border": "#111111",
      "card": "#FFFBEF",
      "card-foreground": "#111111",
      "chart-1": "#0B0B0C",
      "chart-2": "#F3EFE4",
      "chart-3": "#FF4FD8",
      "chart-4": "#1B7A3D",
      "chart-5": "#B77900",
      "destructive": "#C5162E",
      "foreground": "#111111",
      "input": "#111111",
      "muted": "#6B665E",
      "muted-foreground": "#3B3732",
      "popover": "#FFFBEF",
      "popover-foreground": "#111111",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF4FD8",
      "secondary": "#F3EFE4",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFBEF",
      "sidebar-accent": "#2455A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF4FD8"
    },
    "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-019e8a02-9f24-7760-9df1-834d8e74b2a6",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "accent_foreground",
        "background",
        "border",
        "card",
        "card_foreground",
        "destructive",
        "error",
        "foreground",
        "info",
        "input",
        "muted",
        "muted_foreground",
        "popover",
        "popover_foreground",
        "primary",
        "primary_foreground",
        "ring",
        "secondary",
        "secondary_foreground",
        "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": "swiss-punk-manga-interface-collage",
    "source": "katagami"
  },
  "name": "swiss-punk-manga-interface-collage",
  "title": "Swiss Punk Manga Interface Collage shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Swiss Punk Manga Interface Collage

Author: `katagami-agent`

Agent-authored component recipes for carrying the Katagami language **Swiss Punk Manga Interface Collage** into local shadcn/ui primitives. Use these recipes with the generated theme variables and DESIGN.md; do not invent a second component system.

## ShadSync visual profile

- **Family:** swiss-punk-manga editorial application shell
- **Material:** off-white manga paper cells over CRT-black terminal bands, with sparse halftone gray and one vermilion registration accent
- **Contour:** hard rectangular manga panels with tiny 1–6px radii; badges may use full pills only for status marks
- **Border:** 2px black ink rules plus offset duplicate borders on major cards; 4px vermilion accents only as stamps or active rails
- **Underlay:** black shadow plates and misregistered panel duplicates using `before:`/`after:` pseudo-elements
- **Grain:** paper fiber, dot-screen, scanline, and overprint textures applied subtly to surfaces rather than controls
- **Motion:** 140ms `steps(2, jump-end)` frame-advance snaps; avoid floating ease, glow, or springy cyberpunk motion
- **Density:** medium-high editorial density with sober rectangular form lanes and generous paper gutters between clusters
- **Accents:** vermilion `#E34234` for destructive emphasis, active registration stamps, and one primary action per scene

## Signature component recipes

### button
Use `<Button>` as a high-contrast rectangular command strip. Primary buttons use black background, off-white text, 2px black border, `rounded-[2px]`, uppercase condensed/mono label, and a `shadow-[4px_4px_0_#111]` ink plate. Destructive or active operations may add a tiny vermilion corner stamp with `after:content-['RUN']`; do not use gradients or glow.

### card
Use `<Card>` for manga cells: `relative border-2 border-foreground bg-card rounded-[2px] shadow-[7px_7px_0_#111]`. Add an offset duplicate frame with `before:absolute before:inset-1 before:border before:border-foreground/35 before:translate-x-1 before:translate-y-1`. Card headers should carry stair-step labels and one halftone strip.

### input
Use `<Input>` as a terminal annotation field: off-white fill, 2px black border, `rounded-[1px]`, mono text, square focus outline `focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2`. Placeholder text should be muted gray and never rotated.

### textarea
Use `<Textarea>` for trace notes and patch descriptions with the same black ink border as inputs, min-height that supports readable log snippets, a subtle dot-screen background, and plain left-aligned text. Avoid handwritten decorative fonts in editable content.

### select
Use `<Select>` with rectangular triggers, black chevron contrast, and a vermilion top rule only for active filtering states. Menu content should be card-like paper with crisp separators and no translucent glass.

### dialog
Use `<Dialog>` for commit confirmation or route inspection overlays. Content should be a centered manga panel with black underlay offset by 8px, dense header rail, sober body copy, and rectangular action footer. Overlay is solid ink at 70–80% opacity, not blur glass.

### sheet
Use `<Sheet>` as a side marginalia drawer. Prefer right-side sheets with vertical rail labels, 2px black left border, off-white paper fill, and compact rows for logs or annotations. The sheet should feel like a pulled manga margin, not a generic SaaS drawer.

### tabs
Use `<Tabs>` as staggered dossier tabs. TabsList is transparent with each TabsTrigger as a rectangular torn label; active trigger gets black fill/off-white text and a vermilion registration tick. Keep active panel alignment stable across viewports.

### badge
Use `<Badge>` for registration marks, route states, and trace severity. Most badges are rectangular with black border; reserve full pill radius for status counters. Vermilion badges indicate the one disruptive accent, not a confetti system.

### separator
Use `<Separator>` as a heavy Swiss rule or thin manga gutter. Horizontal separators may be 2px black; vertical separators may become marginal rails. Include `aria-orientation` through the primitive and do not use decorative separators as content labels.

### checkbox
Use `<Checkbox>` as a square manga proof mark with black border and vermilion checked state. Keep label text outside the box, left aligned, and at accessible size.

### switch
Use `<Switch>` sparingly for binary engine states. Track is rectangular/pill hybrid with black border; thumb snaps in two frames. Active uses black track with vermilion thumb dot or stamp, not neon green.

### slider
Use `<Slider>` for evaluation thresholds. Track is a heavy black rule on paper; range segment may be vermilion, thumb is a square ink block. Include numeric labels in mono text so value is not color-only.

### tooltip
Use `<Tooltip>` as tiny editorial captions. Content is off-white paper with 1px black border, mono type, and a small offset shadow. Tooltips explain annotations; they must never hide essential control instructions.

### dropdown-menu
Use `<DropdownMenu>` for patch actions. MenuContent uses paper card styling, black item focus fill, vermilion destructive item accent, and compact separators. Avoid icon-only items unless paired with text.

### table
Use `<Table>` for trace logs and diff queues. Use black top/bottom rules, mono row metadata, zebra tint from halftone gray, and a left vermilion rail for selected rows. Keep cells aligned and readable on mobile by collapsing secondary metadata into stacked sublines.

## Preview shots

1. **application-shell** — route inspector with fractured shell navigation, manga panel dashboard, trace stats, and one vermilion primary command.
2. **detail-editor** — patch editor with sober input lanes, annotation sheet, confirmation dialog recipe, and halftone interrupt fields.
3. **data-operations** — evaluation table and batch operations with tabs, badges, checkboxes, slider thresholds, and dropdown actions.

## 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"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function MangaPatchQueue() {
  return (
    <Card className="relative overflow-hidden rounded-[2px] border-2 border-foreground bg-card shadow-[7px_7px_0_#111] before:absolute before:inset-1 before:translate-x-1 before:translate-y-1 before:border before:border-foreground/30 before:content-['']">
      <CardHeader className="relative border-b-2 border-foreground bg-[radial-gradient(circle_at_1px_1px,rgba(17,17,17,.16)_1px,transparent_0)] bg-[length:8px_8px]">
        <Badge className="w-fit rounded-[1px] border-2 border-foreground bg-[#E34234] font-mono text-[10px] uppercase text-white">REG-04</Badge>
        <CardTitle className="max-w-xl font-mono text-3xl uppercase leading-none tracking-[-0.08em]">Trace route / patch queue</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-5 md:grid-cols-[1fr_15rem]">
        <Tabs defaultValue="diff" className="space-y-3">
          <TabsList className="h-auto gap-2 bg-transparent p-0">
            <TabsTrigger value="diff" className="rounded-[1px] border-2 border-foreground data-[state=active]:bg-foreground data-[state=active]:text-background">DIFF</TabsTrigger>
            <TabsTrigger value="trace" className="rounded-[1px] border-2 border-foreground data-[state=active]:bg-foreground data-[state=active]:text-background">TRACE</TabsTrigger>
          </TabsList>
          <TabsContent value="diff" className="m-0 space-y-3">
            <Input className="rounded-[1px] border-2 border-foreground bg-background font-mono" placeholder="/routes/invoice/[id]" />
            <Button className="rounded-[2px] border-2 border-foreground bg-foreground font-mono uppercase text-background shadow-[4px_4px_0_#111] hover:bg-foreground/90">Apply patch</Button>
          </TabsContent>
        </Tabs>
        <aside className="border-l-2 border-foreground pl-4 font-mono text-xs uppercase leading-relaxed">vertical marginalia: failed snapshots, rerun budget, owner stamp</aside>
      </CardContent>
    </Card>
  )
}
```

{
  "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-019e8a00-e767-7ca0-b7ac-ba234aa60227",
    "name": "Swiss Punk Manga Interface Collage",
    "slug": "swiss-punk-manga-interface-collage"
  },
  "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 an anti-grid shell with rotated editorial rails, stepped columns, and deliberately misregistered panel edges implemented with CSS transforms and asymmetric grid areas.",
    "Build surfaces from off-white manga paper, black ink borders, halftone dot overlays, and one vermilion overprint accent applied through pseudo-elements and mix-blend-mode:multiply.",
    "Set headings in stair-stepped Swiss Punk type blocks with skewed labels, tight letter spacing, vertical annotations, and occasional outlined duplicate text shadows.",
    "Frame product controls as sober terminal instruments inside chaotic collage panels: rectangular inputs, crisp focus outlines, monospace command chips, and high-contrast state rows.",
    "Quote historic object language through Memphis-like black-and-white laminate patterns, shard tabs, ceramic label plaques, and furniture-foot geometry without adding multicolor decoration."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "motion": "lift-rotate",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Swiss Punk Manga Interface Collage 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 monochrome manga ink, halftone gray, CRT black, off-white paper, and only one disruptive vermilion accent at a time.",
      "Let postmodernism affect structure: plural grids, historic quotation, ironic labels, and material collage should organize the UI.",
      "Keep forms, tables, buttons, and focus states sober and rectangular even when typography and panels shear around them.",
      "Use concrete product scenes for agentic coding tools: route inspectors, patch queues, trace logs, evaluation panels, and commit operations."
    ],
    "dont": [
      "Do not add neon purple, green matrix rain, holographic glass, generic cyberpunk HUDs, or vaporwave gradients.",
      "Do not flatten the direction into colorful Memphis confetti; object references must become tabs, panels, materials, or structure.",
      "Do not make all text punk-illegible; reserve controlled illegibility for captions and preserve product hierarchy.",
      "Do not draw anime characters or fandom props; manga influence is page grammar, ink, halftone, and pacing."
    ]
  }
}