Luminous AI Dark Glass

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

:root {
  --background: #05070B;
  --foreground: #F6FAFF;
  --card: #101722;
  --card-foreground: #F6FAFF;
  --popover: #101722;
  --popover-foreground: #F6FAFF;
  --primary: #58E6FF;
  --primary-foreground: #111111;
  --secondary: #9B6CFF;
  --secondary-foreground: #ffffff;
  --muted: #8A9AAD;
  --muted-foreground: #9CADBF;
  --accent: #19F2B8;
  --accent-foreground: #111111;
  --destructive: #FF4D6D;
  --border: #263545;
  --input: #263545;
  --ring: #19F2B8;
  --chart-1: #58E6FF;
  --chart-2: #9B6CFF;
  --chart-3: #19F2B8;
  --chart-4: #23E0A2;
  --chart-5: #FFD166;
  --sidebar: #101722;
  --sidebar-foreground: #F6FAFF;
  --sidebar-primary: #58E6FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #71B7FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #263545;
  --sidebar-ring: #19F2B8;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #58E6FF;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #19F2B8;
  --accent-foreground: #111111;
  --destructive: #FF4D6D;
  --border: #303642;
  --input: #303642;
  --ring: #19F2B8;
  --chart-1: #58E6FF;
  --chart-2: #9B6CFF;
  --chart-3: #19F2B8;
  --chart-4: #23E0A2;
  --chart-5: #FFD166;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #58E6FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #19F2B8;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #19F2B8;
  --radius: 16px;
}

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 LuminousAiDarkGlassShadcnKit() {
  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">Luminous AI Dark Glass</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": "luminous-ai-dark-glass",
  "type": "registry:theme",
  "title": "Luminous AI Dark Glass shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#05070B",
      "foreground": "#F6FAFF",
      "card": "#101722",
      "card-foreground": "#F6FAFF",
      "popover": "#101722",
      "popover-foreground": "#F6FAFF",
      "primary": "#58E6FF",
      "primary-foreground": "#111111",
      "secondary": "#9B6CFF",
      "secondary-foreground": "#ffffff",
      "muted": "#8A9AAD",
      "muted-foreground": "#9CADBF",
      "accent": "#19F2B8",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#263545",
      "input": "#263545",
      "ring": "#19F2B8",
      "chart-1": "#58E6FF",
      "chart-2": "#9B6CFF",
      "chart-3": "#19F2B8",
      "chart-4": "#23E0A2",
      "chart-5": "#FFD166",
      "sidebar": "#101722",
      "sidebar-foreground": "#F6FAFF",
      "sidebar-primary": "#58E6FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#71B7FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#263545",
      "sidebar-ring": "#19F2B8",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#58E6FF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#19F2B8",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#19F2B8",
      "chart-1": "#58E6FF",
      "chart-2": "#9B6CFF",
      "chart-3": "#19F2B8",
      "chart-4": "#23E0A2",
      "chart-5": "#FFD166",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#58E6FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#19F2B8",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#19F2B8",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-1125-7f13-a8e8-b7966b1c4b93",
    "slug": "luminous-ai-dark-glass",
    "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",
        "active",
        "character",
        "default_width",
        "glow",
        "hairline",
        "radius_badge",
        "radius_card",
        "radius_control",
        "style"
      ],
      "colors": [
        "accent",
        "accent_foreground",
        "background",
        "border",
        "destructive",
        "error",
        "foreground",
        "info",
        "muted",
        "muted_foreground",
        "primary",
        "primary_foreground",
        "secondary",
        "secondary_foreground",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "ambient",
        "duration",
        "easing",
        "focus",
        "hover",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "base",
        "bg_pattern",
        "card_style",
        "elevated",
        "glass_panel",
        "neon_wash",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# shadcn/ui Components — Luminous AI Dark Glass

Author: `katagami-agent`

## ShadSync visual profile
- Family: luminous dark glass AI product surface
- Material: translucent graphite glass with blur, hairline borders, and restrained neon glow
- Shape scale: 24px cards, 14px controls, pill badges; roles stay consistent across screens
- Density: compact operations UI with high-contrast labels, tabular numeric telemetry, and responsive grid collapse
- Motion: subtle 180ms lift, focus ring expansion, and low-amplitude ambient shimmer with reduced-motion support

## Signature component recipes
### button
Use the local `@/components/ui/button` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep button content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### card
Use the local `@/components/ui/card` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep card content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### input
Use the local `@/components/ui/input` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep input content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### textarea
Use the local `@/components/ui/textarea` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep textarea content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### select
Use the local `@/components/ui/select` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep select content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### dialog
Use the local `@/components/ui/dialog` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep dialog content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### sheet
Use the local `@/components/ui/sheet` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep sheet content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### tabs
Use the local `@/components/ui/tabs` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep tabs content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### badge
Use the local `@/components/ui/badge` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep badge content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### separator
Use the local `@/components/ui/separator` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep separator content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### checkbox
Use the local `@/components/ui/checkbox` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep checkbox content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### switch
Use the local `@/components/ui/switch` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep switch content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### slider
Use the local `@/components/ui/slider` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep slider content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### tooltip
Use the local `@/components/ui/tooltip` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep tooltip content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### dropdown-menu
Use the local `@/components/ui/dropdown-menu` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep dropdown-menu content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.
### table
Use the local `@/components/ui/table` primitive with dark glass styling, `border-cyan-300/25`, `bg-slate-950/70`, cyan focus-visible rings, and violet/mint accents. Keep table content concrete: AI jobs, prompts, model routing, confidence, latency, or review state rather than placeholder lorem ipsum.

## Preview shots
- `application-shell`: command center with navigation, model routing, prompt queue, and live generation health.
- `detail-editor`: prompt tuning editor with glass form controls, sheet/dialog overlays, and confidence badges.
- `data-operations`: evaluation table with filters, sliders, switches, checkboxes, 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"

export function LuminousAIOperationsCard() {
  return (
    <Card className="border-cyan-300/25 bg-slate-950/70 text-slate-50 shadow-[0_0_60px_rgba(40,215,255,.14)] backdrop-blur-2xl">
      <CardHeader className="space-y-2">
        <Badge className="w-fit rounded-full border border-cyan-300/40 bg-cyan-300/10 text-cyan-100">Model live</Badge>
        <CardTitle className="font-semibold tracking-tight">Generate launch palette</CardTitle>
      </CardHeader>
      <CardContent className="flex gap-3">
        <Input className="border-cyan-300/20 bg-slate-900/70 focus-visible:ring-cyan-300" placeholder="Describe the next AI state" />
        <Button className="bg-cyan-300 text-slate-950 hover:bg-cyan-200">Run</Button>
      </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-019ea9a3-1125-7f13-a8e8-b7966b1c4b93",
    "name": "Luminous AI Dark Glass",
    "slug": "luminous-ai-dark-glass"
  },
  "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": [
    "Near-black radial-gradient body background with graphite panels, faint cyan/violet underglow islands, and no pure black page voids.",
    "Layered glass cards use rgba graphite fills, backdrop-filter blur, 1px translucent borders, and inset highlight strokes to reveal stacked AI surfaces.",
    "Cyan-to-violet lumen rails, tiny status diodes, and focused ring shadows appear only on primary controls, active tabs, model-state chips, and live panels.",
    "Dense product layout combines a left command rail, central generation canvas, side inspection stack, and bottom telemetry strip with varied spans rather than equal tiles.",
    "Readable Inter text hierarchy is paired with JetBrains Mono telemetry, tabular numerals, and uppercase micro-labels with increased tracking."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": false,
    "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": "Luminous AI Dark Glass 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": [
      "Anchor every screen in near-black graphite neutrals before adding glow.",
      "Use translucent glass to separate layers of AI work such as prompt, output, evidence, and model state.",
      "Reserve cyan/violet highlights for active, focused, or generative states and keep semantic success/warning/error colors distinct.",
      "Pair expressive surfaces with clear text hierarchy, tabular metrics, and visible focus rings."
    ],
    "dont": [
      "Do not flood the whole interface with rainbow neon or cyberpunk poster gradients.",
      "Do not put low-contrast gray text on blurred glass over bright glows.",
      "Do not use sparkle icons as a substitute for meaningful AI state tokens.",
      "Do not build generic equal marketing cards; the language should feel like a real AI operations product."
    ]
  }
}