Orbital Broadcast Control

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

:root {
  --background: #101113;
  --foreground: #E7E2D6;
  --card: #1B1C1F;
  --card-foreground: #E7E2D6;
  --popover: #1B1C1F;
  --popover-foreground: #E7E2D6;
  --primary: #F0EDE3;
  --primary-foreground: #111111;
  --secondary: #8F9090;
  --secondary-foreground: #ffffff;
  --muted: #9A9A96;
  --muted-foreground: #E7E2D6;
  --accent: #E044A6;
  --accent-foreground: #ffffff;
  --destructive: #D05A7F;
  --border: #CFC8B8;
  --input: #CFC8B8;
  --ring: #E044A6;
  --chart-1: #F0EDE3;
  --chart-2: #8F9090;
  --chart-3: #E044A6;
  --chart-4: #BFC8B0;
  --chart-5: #D3B768;
  --sidebar: #1B1C1F;
  --sidebar-foreground: #E7E2D6;
  --sidebar-primary: #F0EDE3;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #9EA8B7;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CFC8B8;
  --sidebar-ring: #E044A6;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #F0EDE3;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #E044A6;
  --accent-foreground: #ffffff;
  --destructive: #D05A7F;
  --border: #303642;
  --input: #303642;
  --ring: #E044A6;
  --chart-1: #F0EDE3;
  --chart-2: #8F9090;
  --chart-3: #E044A6;
  --chart-4: #BFC8B0;
  --chart-5: #D3B768;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #F0EDE3;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #E044A6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #E044A6;
  --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 OrbitalBroadcastControlShadcnKit() {
  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">Orbital Broadcast Control</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": "orbital-broadcast-control",
  "type": "registry:theme",
  "title": "Orbital Broadcast Control shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#101113",
      "foreground": "#E7E2D6",
      "card": "#1B1C1F",
      "card-foreground": "#E7E2D6",
      "popover": "#1B1C1F",
      "popover-foreground": "#E7E2D6",
      "primary": "#F0EDE3",
      "primary-foreground": "#111111",
      "secondary": "#8F9090",
      "secondary-foreground": "#ffffff",
      "muted": "#9A9A96",
      "muted-foreground": "#E7E2D6",
      "accent": "#E044A6",
      "accent-foreground": "#ffffff",
      "destructive": "#D05A7F",
      "border": "#CFC8B8",
      "input": "#CFC8B8",
      "ring": "#E044A6",
      "chart-1": "#F0EDE3",
      "chart-2": "#8F9090",
      "chart-3": "#E044A6",
      "chart-4": "#BFC8B0",
      "chart-5": "#D3B768",
      "sidebar": "#1B1C1F",
      "sidebar-foreground": "#E7E2D6",
      "sidebar-primary": "#F0EDE3",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9EA8B7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFC8B8",
      "sidebar-ring": "#E044A6",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F0EDE3",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E044A6",
      "accent-foreground": "#ffffff",
      "destructive": "#D05A7F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E044A6",
      "chart-1": "#F0EDE3",
      "chart-2": "#8F9090",
      "chart-3": "#E044A6",
      "chart-4": "#BFC8B0",
      "chart-5": "#D3B768",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F0EDE3",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#E044A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E044A6",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "orbital-broadcast-control",
    "slug": "orbital-broadcast-control",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Orbital Broadcast Control shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `orbital-broadcast-control`
Slug: `orbital-broadcast-control`

## Intent

Orbital Broadcast Control is a quiet transmission-room language for software that feels like a sleeping satellite being acquired by a late-night station operator. It blends black-and-white manga panel discipline with broadcast-safe video practice, terminal precision without hacker theater, and Y2K hardware labeling without nostalgia cosplay. Emotion is expressed through lock states, subtitle timing, signal drift, acquisition pulses, and restrained lower-third cues rather than characters, neon cities, code rain, or generic dashboards.

## 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": "#E044A6",
  "background": "#101113",
  "border": "#CFC8B8",
  "error": "#D05A7F",
  "info": "#9EA8B7",
  "muted": "#9A9A96",
  "primary": "#F0EDE3",
  "secondary": "#8F9090",
  "success": "#BFC8B0",
  "surface": "#1B1C1F",
  "text": "#E7E2D6",
  "warning": "#D3B768"
}

Typography:

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

## Visual character to preserve

- A fixed 16:9 title-safe frame is drawn with inset off-white guide rectangles, edge-safe margins, and clipped graphite fields.
- Thin orbital arcs and antenna acquisition brackets cross asymmetric black-white manga panels with hard gutters and no rounded cards.
- Large quiet timecodes sit behind compact station slugs, while subtitle beds reserve the bottom band for monospaced captions.
- Signal magenta appears as one narrow pulse, tick, underline, or warning rail only when transmission lock or drift is active.
- Subtle scanline overlays, dropout bands, and waveform ticks soften digital geometry while keeping all values video-safe.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": true,
  "motion": "lift",
  "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/orbital-broadcast-control/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 broadcast-safe grayscale values and keep peak whites below pure white.; Reserve signal magenta for lock, drift, warning, subtitle cue, or acquisition states only.; Draw title-safe and action-safe guides as part of the interface structure.; Make captions, frame counters, cue numbers, and station IDs meaningful and legible.; Let one transmission field remain quiet while edge systems carry detail.; Use hard panel divisions, gutters, and cropped arcs instead of rounded component cards.; Represent persona through timing marks, sleeping relay states, and calm operator captions.; Keep terminal references to telemetry and timecoded text, never random code.
- Do not: Do not use green terminal glow, matrix rain, hacker dashboards, or random code waterfalls.; Do not add anime characters, fan-art silhouettes, neon city backgrounds, or cyberpunk gradients.; Do not build three equal SaaS cards or generic analytics widgets.; Do not fill empty black fields with decorative HUD circles or meaningless rings.; Do not use saturated whites that would exceed video-safe peak expectations.; Do not make magenta a general brand wash; it is a narrow signal state.; Do not round corners except for tiny acquisition dots or waveform endpoints.; Do not let captions collide with the bottom safe area or become decorative lorem ipsum.

## 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 OrbitalBroadcastControlShadcnKit() {
  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">Orbital Broadcast Control</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": "1024px+ full 16:9 broadcast control composition",
    "mobile": "0-639px single-column safe frame with caption bed retained",
    "tablet": "640-1023px two stacked panels with orbital arc preserved"
  },
  "density": "Medium-high operational density around the perimeter with a deliberately sparse central transmission window; this contrast makes silence feel intentional.",
  "grid": "Desktop uses a 16:9 safe-area frame inside a 12-column timing grid, 24px gutters, max-width 1280px, with one dominant 7-column signal panel and asymmetric 5-column relay stack.",
  "responsive": "On narrow screens, safe-area rectangles remain visible, subtitle bed moves below the main viewport, and orbital arcs crop rather than shrink into clutter.",
  "whitespace": "Use extreme spacing contrast: 8px telemetry clusters, 32px panel gutters, 96px quiet signal fields, and 128px top/bottom atmospheric 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": "orbital-broadcast-control",
    "name": "Orbital Broadcast Control",
    "slug": "orbital-broadcast-control"
  },
  "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 fixed 16:9 title-safe frame is drawn with inset off-white guide rectangles, edge-safe margins, and clipped graphite fields.",
    "Thin orbital arcs and antenna acquisition brackets cross asymmetric black-white manga panels with hard gutters and no rounded cards.",
    "Large quiet timecodes sit behind compact station slugs, while subtitle beds reserve the bottom band for monospaced captions.",
    "Signal magenta appears as one narrow pulse, tick, underline, or warning rail only when transmission lock or drift is active.",
    "Subtle scanline overlays, dropout bands, and waveform ticks soften digital geometry while keeping all values video-safe."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "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": "Orbital Broadcast Control 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 broadcast-safe grayscale values and keep peak whites below pure white.",
      "Reserve signal magenta for lock, drift, warning, subtitle cue, or acquisition states only.",
      "Draw title-safe and action-safe guides as part of the interface structure.",
      "Make captions, frame counters, cue numbers, and station IDs meaningful and legible.",
      "Let one transmission field remain quiet while edge systems carry detail.",
      "Use hard panel divisions, gutters, and cropped arcs instead of rounded component cards.",
      "Represent persona through timing marks, sleeping relay states, and calm operator captions.",
      "Keep terminal references to telemetry and timecoded text, never random code."
    ],
    "dont": [
      "Do not use green terminal glow, matrix rain, hacker dashboards, or random code waterfalls.",
      "Do not add anime characters, fan-art silhouettes, neon city backgrounds, or cyberpunk gradients.",
      "Do not build three equal SaaS cards or generic analytics widgets.",
      "Do not fill empty black fields with decorative HUD circles or meaningless rings.",
      "Do not use saturated whites that would exceed video-safe peak expectations.",
      "Do not make magenta a general brand wash; it is a narrow signal state.",
      "Do not round corners except for tiny acquisition dots or waveform endpoints.",
      "Do not let captions collide with the bottom safe area or become decorative lorem ipsum."
    ]
  }
}