Lumen Mesh Palette System

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

:root {
  --background: #F6F2EA;
  --foreground: #17151F;
  --card: #FFFFFF;
  --card-foreground: #17151F;
  --popover: #FFFFFF;
  --popover-foreground: #17151F;
  --primary: #4B47D9;
  --primary-foreground: #ffffff;
  --secondary: #0F8B8D;
  --secondary-foreground: #ffffff;
  --muted: #6F6878;
  --muted-foreground: #17151F;
  --accent: #FF6F91;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #D8D0C3;
  --input: #D8D0C3;
  --ring: #FF6F91;
  --chart-1: #4B47D9;
  --chart-2: #0F8B8D;
  --chart-3: #FF6F91;
  --chart-4: #067647;
  --chart-5: #B54708;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #17151F;
  --sidebar-primary: #4B47D9;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #175CD3;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8D0C3;
  --sidebar-ring: #FF6F91;
  --radius: 10px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #4B47D9;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF6F91;
  --accent-foreground: #ffffff;
  --destructive: #B42318;
  --border: #303642;
  --input: #303642;
  --ring: #FF6F91;
  --chart-1: #4B47D9;
  --chart-2: #0F8B8D;
  --chart-3: #FF6F91;
  --chart-4: #067647;
  --chart-5: #B54708;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #4B47D9;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF6F91;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF6F91;
  --radius: 10px;
}

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 LumenMeshPaletteSystemShadcnKit() {
  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">Lumen Mesh Palette System</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": "lumen-mesh-palette-system",
  "type": "registry:theme",
  "title": "Lumen Mesh Palette System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F2EA",
      "foreground": "#17151F",
      "card": "#FFFFFF",
      "card-foreground": "#17151F",
      "popover": "#FFFFFF",
      "popover-foreground": "#17151F",
      "primary": "#4B47D9",
      "primary-foreground": "#ffffff",
      "secondary": "#0F8B8D",
      "secondary-foreground": "#ffffff",
      "muted": "#6F6878",
      "muted-foreground": "#17151F",
      "accent": "#FF6F91",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#D8D0C3",
      "input": "#D8D0C3",
      "ring": "#FF6F91",
      "chart-1": "#4B47D9",
      "chart-2": "#0F8B8D",
      "chart-3": "#FF6F91",
      "chart-4": "#067647",
      "chart-5": "#B54708",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#17151F",
      "sidebar-primary": "#4B47D9",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#175CD3",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D0C3",
      "sidebar-ring": "#FF6F91",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#4B47D9",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF6F91",
      "accent-foreground": "#ffffff",
      "destructive": "#B42318",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF6F91",
      "chart-1": "#4B47D9",
      "chart-2": "#0F8B8D",
      "chart-3": "#FF6F91",
      "chart-4": "#067647",
      "chart-5": "#B54708",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#4B47D9",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF6F91",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF6F91",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b3-fb10-7472-8f45-ac452434204c",
    "slug": "lumen-mesh-palette-system",
    "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"
      ]
    }
  }
}

# Lumen Mesh Palette System shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the Lumen Mesh Palette System into shadcn/ui primitives for creative product screens: plain semantic controls, matte neutral cards, and a single decorative lumen field or iridescent edge rail per composition.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use `background`, `surface`, `text`, `muted`, and `border` as the default interface foundation. Use `primary` for focus and primary actions, `secondary` for safe secondary emphasis, `accent` only for constrained edge rails or highlights, and semantic error/success/warning/info solids for state feedback.

## Visual character to preserve
Neutral chrome first; one clipped lumen mesh underlay; narrow iridescent rails; solid chart and table states; stable dark-mode semantics.

## ShadSync visual profile
family: sensory-gradient; material: matte-neutral-plus-lumen; contour: soft-rect; border: one-pixel-mink-with-3px-iridescent-rail; underlay: true; grain: false; stickerBadges: false; motion: refractive-180ms; density: medium; accents: violet, aqua, coral, butter.

## Signature component recipes
- **button**: solid primary or ink fills, 10px radius, visible focus ring, never gradient fills.
- **card**: solid surface, 1px border, 18px radius; featured cards may add a 3px four-stop iridescent top rail.
- **input**: solid surface, 10px radius, border token, and translucent primary focus ring.
- **textarea**: plain field with accessibility helper text for fallback, opacity, and contrast.
- **select**: bordered trigger; selected item uses solid tint and icon, not hue alone.
- **dialog**: solid surface overlay with optional mesh halo outside the readable plane.
- **sheet**: white or ink task plane with dimmed lumen preview strip in header only.
- **tabs**: active tab uses solid ink fill or a 3px iridescent top rail.
- **badge**: semantic badges use solid status colors with text or icons.
- **separator**: neutral 1px line; gradient separator only as a short brand rail.
- **checkbox**: checked state uses primary fill plus check icon and focus ring.
- **switch**: off muted solid, on primary solid, no rainbow track.
- **slider**: neutral track, primary selected range, focused knob.
- **tooltip**: ink solid surface with readable text and no gradient behind small copy.
- **dropdown-menu**: solid panel, muted dividers, selected row with primary tint and icon.
- **table**: neutral row borders and solid data chips; no mesh categorical values.

## Preview shots
application-shell, detail-editor, and data-operations render as believable palette governance product screens.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a parallel component system. Keep gradient primitives in wrapper classes; semantic shadcn components use token classes.

## 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function LumenPalettePanel() {
  return (
    <Card className="relative overflow-hidden rounded-[18px] border border-border bg-surface shadow-md before:absolute before:inset-x-0 before:top-0 before:h-[3px] before:bg-[linear-gradient(90deg,#4B47D9,#72E4D4,#FFDE87,#FF6F91)]">
      <CardHeader><Badge variant="outline" className="font-mono">decorative primitive</Badge><CardTitle>Prism Veil 01</CardTitle></CardHeader>
      <CardContent className="space-y-4"><Input value="fallback: #EFE7D8; opacity: .42 near text" readOnly /><Table><TableHeader><TableRow><TableHead>Rule</TableHead><TableHead>Status</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>No chart gradients</TableCell><TableCell>Pass</TableCell></TableRow></TableBody></Table><Button>Publish primitive</Button></CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "card",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "input",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "textarea",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "select",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "dialog",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "sheet",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "tabs",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "badge",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "separator",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "checkbox",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "switch",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "slider",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "tooltip",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    },
    {
      "component": "table",
      "recipe": "Use matte neutral surfaces, solid semantic tokens, 10px controls or 18px containers, primary focus rings, and no gradient fill except constrained iridescent rails on featured wrappers."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoidRules": [
        "no gradient body text",
        "no component inventory wall",
        "no gradient categorical chips"
      ],
      "composition": "Palette governance shell with left navigation, central lumen primitive canvas, and right contrast audit cards.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with iridescent rail",
        "primary and secondary actions",
        "tooltip explaining decorative-only mesh",
        "table row showing chart-gradient block"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Publish primitive",
          "Open contrast audit"
        ],
        "description": "A creative system dashboard separates mesh primitives from semantic UI tokens.",
        "eyebrow": "Palette Ops",
        "headline": "Govern immersive color without losing product clarity.",
        "rows": [
          {
            "fallback": "#EFE7D8",
            "primitive": "Prism Veil 01",
            "status": "approved"
          },
          {
            "fallback": "#17151F",
            "primitive": "Aurora Rail 02",
            "status": "review"
          }
        ],
        "stats": [
          {
            "label": "Worst contrast",
            "value": "7.8:1"
          },
          {
            "label": "Gradient stops",
            "value": "4 max"
          },
          {
            "label": "Fallback solids",
            "value": "100%"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "no small text on mesh",
        "no rainbow controls",
        "do not hide semantic labels"
      ],
      "composition": "Primitive detail editor with plain form fields, a dimmed lumen preview, accessibility requirements, and controlled opacity slider.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with primary ring",
        "checked decorative-only checkbox",
        "on switch for dark adaptation",
        "dialog preview with solid content plane"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save token",
          "Preview dark mode"
        ],
        "description": "Define stops, opacity, fallback, placement limits, and review notes before release.",
        "eyebrow": "Primitive editor",
        "fields": [
          {
            "label": "Fallback solid",
            "value": "#EFE7D8"
          },
          {
            "label": "Max opacity near text",
            "value": "0.42"
          },
          {
            "label": "Allowed placement",
            "value": "hero, canvas, brand panel"
          }
        ],
        "headline": "Prism Veil 01 accessibility contract"
      }
    },
    {
      "avoidRules": [
        "never use mesh colors as categorical chart defaults",
        "no decorative rows that reduce readability"
      ],
      "composition": "Operations table proving gradients are excluded from charts and semantic states remain solid.",
      "id": "data-operations",
      "mustShowStates": [
        "solid success warning error badges",
        "neutral separators",
        "dropdown action menu",
        "dark-mode switch off and on preview"
      ],
      "primitives": [
        "card",
        "table",
        "badge",
        "separator",
        "dropdown-menu",
        "button",
        "switch",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export chart tokens",
          "Flag violation"
        ],
        "description": "Auditors can approve expressive brand layers without contaminating analytics palettes.",
        "eyebrow": "Data safety",
        "headline": "Chart defaults stay solid and colorblind safe.",
        "rows": [
          {
            "hex": "#175CD3",
            "token": "chart.blue",
            "usage": "category A"
          },
          {
            "hex": "#067647",
            "token": "chart.green",
            "usage": "category B"
          },
          {
            "hex": "gradient",
            "token": "lumen.prism",
            "usage": "blocked for charts"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "violet",
      "aqua",
      "coral",
      "butter"
    ],
    "border": "one-pixel-mink-with-3px-iridescent-rail",
    "contour": "soft-rect",
    "density": "medium",
    "family": "sensory-gradient",
    "grain": false,
    "material": "matte-neutral-plus-lumen",
    "motion": "refractive-180ms",
    "stickerBadges": false,
    "underlay": true
  }
}