Signal Ivory Control Deck

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

:root {
  --background: #F6F1E7;
  --foreground: #171A18;
  --card: #FFFDF7;
  --card-foreground: #171A18;
  --popover: #FFFDF7;
  --popover-foreground: #171A18;
  --primary: #21312D;
  --primary-foreground: #ffffff;
  --secondary: #E8E1D2;
  --secondary-foreground: #111111;
  --muted: #6F746D;
  --muted-foreground: #171A18;
  --accent: #39D98A;
  --accent-foreground: #ffffff;
  --destructive: #C74436;
  --border: #C9C0AE;
  --input: #C9C0AE;
  --ring: #39D98A;
  --chart-1: #21312D;
  --chart-2: #E8E1D2;
  --chart-3: #39D98A;
  --chart-4: #239B68;
  --chart-5: #D1841F;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #171A18;
  --sidebar-primary: #21312D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #4267B2;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C9C0AE;
  --sidebar-ring: #39D98A;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #21312D;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #39D98A;
  --accent-foreground: #ffffff;
  --destructive: #C74436;
  --border: #303642;
  --input: #303642;
  --ring: #39D98A;
  --chart-1: #21312D;
  --chart-2: #E8E1D2;
  --chart-3: #39D98A;
  --chart-4: #239B68;
  --chart-5: #D1841F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #21312D;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #39D98A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #39D98A;
  --radius: 14px;
}

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 SignalIvoryControlDeckShadcnKit() {
  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">Signal Ivory Control Deck</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": "#39D98A",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#21312D",
      "chart-2": "#E8E1D2",
      "chart-3": "#39D98A",
      "chart-4": "#239B68",
      "chart-5": "#D1841F",
      "destructive": "#C74436",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#21312D",
      "primary-foreground": "#ffffff",
      "radius": "14px",
      "ring": "#39D98A",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#39D98A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#21312D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39D98A"
    },
    "light": {
      "accent": "#39D98A",
      "accent-foreground": "#ffffff",
      "background": "#F6F1E7",
      "border": "#C9C0AE",
      "card": "#FFFDF7",
      "card-foreground": "#171A18",
      "chart-1": "#21312D",
      "chart-2": "#E8E1D2",
      "chart-3": "#39D98A",
      "chart-4": "#239B68",
      "chart-5": "#D1841F",
      "destructive": "#C74436",
      "foreground": "#171A18",
      "input": "#C9C0AE",
      "muted": "#6F746D",
      "muted-foreground": "#171A18",
      "popover": "#FFFDF7",
      "popover-foreground": "#171A18",
      "primary": "#21312D",
      "primary-foreground": "#ffffff",
      "radius": "14px",
      "ring": "#39D98A",
      "secondary": "#E8E1D2",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFDF7",
      "sidebar-accent": "#4267B2",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C0AE",
      "sidebar-foreground": "#171A18",
      "sidebar-primary": "#21312D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#39D98A"
    },
    "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-019e4694-521b-7003-af09-760c7e3c8e3f",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    },
    "slug": "signal-ivory-control-deck",
    "source": "katagami"
  },
  "name": "signal-ivory-control-deck",
  "title": "Signal Ivory Control Deck shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Signal Ivory Control Deck

Author: `katagami-agent`

## ShadSync visual profile

Signal Ivory Control Deck translates a clean retro-future operations surface into shadcn/ui primitives: matte ivory page, raised porcelain cards, smoked translucent overlays, consistent 26px container radii, 14px control radii, taupe 1px graphite borders, sparse semantic signal colors, capsule meters, mono timecodes, and terminal bracket actions. The material metaphor must alter controls, states, hierarchy, navigation, data rows, and responsive layouts — not merely the background palette. Avoid square grid wallpaper, dotted textures, colored side rails, chipped corners, rainbow nostalgia, vaporwave neon, and component-catalog walls.

## Signature component recipes

### button
Use Button as a calibrated command capsule or 14px rounded terminal action. Primary: graphite `#21312D` fill with ivory text. Secondary: ivory surface with 1px taupe border. Active/focused: inset 2px phosphor `#39D98A` ring, not a side stripe. Destructive uses red only with explicit fault copy. Hover lifts -1px with 160ms hardware motion.

### card
Use Card for porcelain operational modules: 26px radius, 1px `#C9C0AE` outline, broad 24px padding, almost-flat shadow, and proximity grouping. One card should dominate the scene; do not place three equal cards in a row unless one is visually dominant. Semantic color appears inside statuses, bars, or badges only.

### input
Use Input with fully styled ivory shell, 14px radius, 1px taupe border, mono uppercase label above, graphite text, and inset phosphor focus ring. Validation pairs color with text and never relies on native browser chrome.

### textarea
Use Textarea for command notes and routing memos with the same 14px shell, generous padding, no noisy resize handle styling, mono helper captions, and clear validation messages below the field.

### select
Use Select as an ivory command selector with bracket-like right affordance, mono selected code prefix, and inset focus ring. Menu options group by operational proximity rather than generic alphabetical inventory.

### dialog
Use Dialog only for high-stakes route confirmation. Surface is smoked translucent glass with backdrop blur, 26px radius, complete corners, a small mono tab badge, and clear primary/cancel command actions.

### sheet
Use Sheet for temporary telemetry or configuration panels. Keep the sheet smoked and calm, with grouped controls and one semantic state meter; do not use it as a decorative side rail.

### tabs
Use Tabs as segmented capsules with 8px gaps. Active segment uses graphite fill or a semantic fill only when the tab is stateful. Inactive tabs remain ivory outlined and readable.

### badge
Use Badge as uppercase mono capsules: READY, HOLD, FAULT, INFO. Colors are scarce and semantic with readable foregrounds. Avoid ornamental stickers or rainbow labels.

### separator
Use Separator as a low-contrast 1px taupe rule or replace it with spacing. Never use colored vertical side rules on cards, rows, or panels.

### checkbox
Use Checkbox as a 14px rounded-square control with taupe border, phosphor checked fill, visible 2px focus ring, and an adjacent text label. Keep hit targets at least 40px.

### switch
Use Switch as a capsule hardware toggle: graphite thumb, ivory/off track, semantic on/warning track only when stateful, and 160ms thumb travel. Label every switch state.

### slider
Use Slider as a capsule calibrated track with tick marks, mono numeric output, and one semantic fill. It should feel like instrument calibration, not a decorative chart.

### tooltip
Use Tooltip as compact smoked glass, 14px radius, mono keyboard hint, and no arrow if it creates chipped geometry. Tooltip copy must clarify a command, not decorate empty space.

### dropdown-menu
Use DropdownMenu as an ivory or smoked panel with 14px rows, mono shortcuts, inset focus ring, separators only between meaningful groups, and no default browser shadows.

### table
Use Table for command logs: mono timecodes, capsule status badges, bracket actions, taupe row outlines, inset active rings, and responsive stacked rows on mobile. The table must show real operational data and fault/hold states.

## Preview shots

- `application-shell`: broadcast routing deck with one dominant live command panel, capsule timing bars, and a narrower telemetry stack.
- `detail-editor`: route calibration editor with styled inputs, select, textarea, tabs, switches, slider, checkbox, smoked confirmation dialog, and explicit validation.
- `data-operations`: command log table with timecodes, badges, dropdown actions, tooltip hints, separators, and one semantic fault row.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function SignalIvoryRoutePanel() {
  return (
    <Card className="rounded-[26px] border border-[#C9C0AE] bg-[#FFFDF7] p-6 shadow-[0_18px_50px_rgba(33,49,45,.10)]">
      <CardHeader className="p-0 pb-5">
        <div className="flex items-center justify-between gap-4">
          <Badge className="rounded-full bg-[#39D98A] font-mono text-[#171A18]">READY</Badge>
          <span className="font-mono text-xs uppercase tracking-[.08em] text-[#6F746D]">TC 14:28:06</span>
        </div>
        <CardTitle className="text-3xl tracking-[-.04em] text-[#21312D]">Route signal window</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-0">
        <Input className="h-11 rounded-[14px] border-[#C9C0AE] bg-[#FFFDF7] focus-visible:ring-2 focus-visible:ring-[#39D98A]" defaultValue="SAT-LINK / NORTH BAY" />
        <Slider defaultValue={[68]} max={100} step={1} className="py-3" />
        <div className="flex items-center justify-between rounded-[14px] border border-[#C9C0AE] p-3">
          <span className="font-mono text-xs uppercase">[AUTO HOLD]</span>
          <Switch defaultChecked />
        </div>
        <Table>
          <TableHeader><TableRow><TableHead>Time</TableHead><TableHead>Route</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
          <TableBody><TableRow><TableCell className="font-mono">14:28</TableCell><TableCell>Main uplink</TableCell><TableCell><Badge>READY</Badge></TableCell></TableRow></TableBody>
        </Table>
        <Button className="rounded-full bg-[#21312D] text-[#FFFDF7] hover:-translate-y-px">[COMMIT ROUTE]</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "intent": "Translate button into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "button",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate card into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "card",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate input into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "input",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate textarea into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "textarea",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate select into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "select",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate dialog into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "dialog",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate sheet into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "sheet",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate tabs into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "tabs",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate badge into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "badge",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate separator into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "separator",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate checkbox into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "checkbox",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate switch into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "switch",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate slider into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "slider",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate tooltip into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "tooltip",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate dropdown-menu into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "dropdown-menu",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    },
    {
      "intent": "Translate table into ivory porcelain controls, taupe borders, rounded geometry, mono operational labels, visible focus, and scarce semantic signal state.",
      "primitive": "table",
      "visualTreatment": "Use Signal Ivory geometry and materials; no default browser chrome, colored side rails, dotted wallpaper, or arbitrary decoration."
    }
  ],
  "generatedBy": "katagami-agent",
  "language": {
    "id": "en-019e4694-521b-7003-af09-760c7e3c8e3f",
    "name": "Signal Ivory Control Deck",
    "slug": "signal-ivory-control-deck"
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "description": "A dominant route panel, capsule timing bars, terminal bracket actions, and a narrow telemetry stack prove the language as a specific operational product rather than a generic dashboard.",
        "eyebrow": "ROUTE OPS / LIVE WINDOW",
        "headline": "North Bay uplink is inside the clean signal corridor",
        "primaryAction": "[COMMIT ROUTE]",
        "rows": [
          {
            "route": "SAT-LINK / NORTH BAY",
            "status": "READY",
            "time": "14:22"
          },
          {
            "route": "STUDIO B RETURN",
            "status": "HOLD",
            "time": "14:25"
          },
          {
            "route": "ARCHIVE BUS",
            "status": "INFO",
            "time": "14:27"
          }
        ],
        "secondaryAction": "[HOLD 04:00]",
        "stats": [
          {
            "label": "signal",
            "state": "ready",
            "value": "98%"
          },
          {
            "label": "window",
            "state": "info",
            "value": "14:28:06"
          },
          {
            "label": "latency",
            "state": "ready",
            "value": "41ms"
          }
        ]
      },
      "title": "Broadcast routing command deck"
    },
    {
      "id": "detail-editor",
      "scene": {
        "description": "Styled shadcn fields, select, textarea, tabs, switch, slider, checkbox, and a smoked confirmation dialog demonstrate how the material system changes controls and interaction states.",
        "eyebrow": "CALIBRATION / EDIT",
        "fields": [
          {
            "label": "Route name",
            "value": "SAT-LINK / NORTH BAY"
          },
          {
            "label": "Signal source",
            "value": "Encoder 04"
          },
          {
            "label": "Operator note",
            "value": "Hold amber until tower sync returns."
          }
        ],
        "headline": "Tune the backup path before committing the route",
        "primaryAction": "[SAVE CALIBRATION]",
        "secondaryAction": "[OPEN CONFIRMATION]",
        "stats": [
          {
            "label": "gain",
            "state": "ready",
            "value": "68"
          },
          {
            "label": "auto hold",
            "state": "warning",
            "value": "ON"
          }
        ]
      },
      "title": "Route calibration editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "description": "The table scene proves dense operational data, dropdown menus, tooltip hints, separators, badges, checkboxes, and one red fault state without turning semantic color into decoration.",
        "eyebrow": "COMMAND LOG / FAULT REVIEW",
        "headline": "Every row carries timecode, route intent, state, and bracket action",
        "primaryAction": "[ACK FAULT]",
        "rows": [
          {
            "action": "[VIEW]",
            "operator": "Mira",
            "route": "Main uplink",
            "status": "READY",
            "time": "14:28:06"
          },
          {
            "action": "[ACK]",
            "operator": "Sol",
            "route": "Backup encoder",
            "status": "FAULT",
            "time": "14:29:31"
          },
          {
            "action": "[RESUME]",
            "operator": "Chen",
            "route": "Archive bus",
            "status": "HOLD",
            "time": "14:31:02"
          }
        ],
        "secondaryAction": "[EXPORT LOG]",
        "stats": [
          {
            "label": "ready",
            "state": "ready",
            "value": "18"
          },
          {
            "label": "hold",
            "state": "warning",
            "value": "3"
          },
          {
            "label": "fault",
            "state": "error",
            "value": "1"
          }
        ]
      },
      "title": "Command log operations table"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "phosphor green active signal",
      "amber hold/warning",
      "blue info",
      "red fault only"
    ],
    "border": "low-contrast 1px taupe graphite outlines with inset 2px semantic focus rings",
    "contour": "consistent rounded control geometry: 26px containers, 14px controls, capsule meters and badges",
    "density": "medium-high inside panels with generous 48-64px scene gaps",
    "family": "retro-future-control-deck",
    "grain": false,
    "material": "matte ivory porcelain with smoked translucent glass overlays",
    "motion": "short calibrated hardware lift and brightness change at 160ms",
    "stickerBadges": false,
    "underlay": true
  }
}