Quiet Signal 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: #F6F3EC;
  --foreground: #171A20;
  --card: #FFFDF7;
  --card-foreground: #171A20;
  --popover: #FFFDF7;
  --popover-foreground: #171A20;
  --primary: #394154;
  --primary-foreground: #ffffff;
  --secondary: #A99B86;
  --secondary-foreground: #ffffff;
  --muted: #6E746F;
  --muted-foreground: #171A20;
  --accent: #C9FF3D;
  --accent-foreground: #111111;
  --destructive: #D94B5A;
  --border: #D8D0C2;
  --input: #D8D0C2;
  --ring: #C9FF3D;
  --chart-1: #394154;
  --chart-2: #A99B86;
  --chart-3: #C9FF3D;
  --chart-4: #2F8C63;
  --chart-5: #B7791F;
  --sidebar: #FFFDF7;
  --sidebar-foreground: #171A20;
  --sidebar-primary: #394154;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00A9D6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8D0C2;
  --sidebar-ring: #C9FF3D;
  --radius: 12px;
}

.dark {
  --background: #101217;
  --foreground: #F4F0E8;
  --card: #171A21;
  --card-foreground: #F4F0E8;
  --popover: #171A21;
  --popover-foreground: #F4F0E8;
  --primary: #394154;
  --primary-foreground: #ffffff;
  --secondary: #A99B86;
  --secondary-foreground: #ffffff;
  --muted: #A9ADA7;
  --muted-foreground: #F4F0E8;
  --accent: #C9FF3D;
  --accent-foreground: #111111;
  --destructive: #D94B5A;
  --border: #343A44;
  --input: #343A44;
  --ring: #C9FF3D;
  --chart-1: #394154;
  --chart-2: #A99B86;
  --chart-3: #C9FF3D;
  --chart-4: #2F8C63;
  --chart-5: #B7791F;
  --sidebar: #171A21;
  --sidebar-foreground: #F4F0E8;
  --sidebar-primary: #394154;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00A9D6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #343A44;
  --sidebar-ring: #C9FF3D;
  --radius: 12px;
}

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 QuietSignalPaletteSystemShadcnKit() {
  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">Quiet Signal 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": "quiet-signal-palette-system",
  "type": "registry:theme",
  "title": "Quiet Signal Palette System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F3EC",
      "foreground": "#171A20",
      "card": "#FFFDF7",
      "card-foreground": "#171A20",
      "popover": "#FFFDF7",
      "popover-foreground": "#171A20",
      "primary": "#394154",
      "primary-foreground": "#ffffff",
      "secondary": "#A99B86",
      "secondary-foreground": "#ffffff",
      "muted": "#6E746F",
      "muted-foreground": "#171A20",
      "accent": "#C9FF3D",
      "accent-foreground": "#111111",
      "destructive": "#D94B5A",
      "border": "#D8D0C2",
      "input": "#D8D0C2",
      "ring": "#C9FF3D",
      "chart-1": "#394154",
      "chart-2": "#A99B86",
      "chart-3": "#C9FF3D",
      "chart-4": "#2F8C63",
      "chart-5": "#B7791F",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#171A20",
      "sidebar-primary": "#394154",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00A9D6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D0C2",
      "sidebar-ring": "#C9FF3D",
      "radius": "12px"
    },
    "dark": {
      "background": "#101217",
      "foreground": "#F4F0E8",
      "card": "#171A21",
      "card-foreground": "#F4F0E8",
      "popover": "#171A21",
      "popover-foreground": "#F4F0E8",
      "primary": "#394154",
      "primary-foreground": "#ffffff",
      "secondary": "#A99B86",
      "secondary-foreground": "#ffffff",
      "muted": "#A9ADA7",
      "muted-foreground": "#F4F0E8",
      "accent": "#C9FF3D",
      "accent-foreground": "#111111",
      "destructive": "#D94B5A",
      "border": "#343A44",
      "input": "#343A44",
      "ring": "#C9FF3D",
      "chart-1": "#394154",
      "chart-2": "#A99B86",
      "chart-3": "#C9FF3D",
      "chart-4": "#2F8C63",
      "chart-5": "#B7791F",
      "sidebar": "#171A21",
      "sidebar-foreground": "#F4F0E8",
      "sidebar-primary": "#394154",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00A9D6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#343A44",
      "sidebar-ring": "#C9FF3D",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b4-5faa-72a3-b0dc-7c1caa7d943d",
    "slug": "quiet-signal-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"
      ],
      "dark_colors": [
        "background",
        "border",
        "brand_accent",
        "editorial_accent",
        "highlight_accent",
        "interactive_accent",
        "muted",
        "surface",
        "text"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "semantic_colors": [
        "brand",
        "editorial_only",
        "highlight",
        "interactive"
      ],
      "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"
      ]
    }
  }
}

# Quiet Signal Palette System shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the palette system into restrained product screens: neutral matte surfaces first, then tightly budgeted acidic citrus, signal cyan, electric violet, and hot coral accents with paired on-accent text.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table from `@/components/ui/*`.

## Token cues
Use background/surface/text/border for 90% of the UI. Use citrus for one primary CTA cluster, cyan for focus and selected controls, violet for highlight badges and selected chart rows, and coral for editorial annotations only.

## Visual character to preserve
Matte warm-neutral cards, graphite navigation, one-pixel tonal borders, clipped top-right accent notches, low-alpha measurement grids, compact mono labels, and explicit on-accent contrast chips.

## ShadSync visual profile
family: production-palette; material: matte-neutral; contour: clipped-notch; border: tonal-1px-with-accent-rail; underlay: quiet-grid; grain: subtle; stickerBadges: role-chips-only; motion: short-lift-chroma-reveal; density: balanced-enterprise; accents: capped citrus/cyan/violet/coral.

## Signature component recipes
- button: Primary uses citrus fill with on-citrus text; secondary uses cyan-tinted surface; destructive never uses coral unless editorial copy is absent.
- card: Warm surface, 1px tonal border, optional top-right clipped notch on only one card per region.
- input: Neutral field, cyan focus ring, mono helper text for token names.
- textarea: Same field behavior with a small contrast label in the corner.
- select: Neutral trigger, cyan selected state, no multicolor menu items.
- dialog: Graphite header strip, matte body, one accent rail matching the dialog purpose.
- sheet: Right-side production inspector with token swatches and quiet grid underlay.
- tabs: Underline or rail selected state in cyan; inactive tabs remain neutral.
- badge: Role badges only; violet highlight, citrus brand, coral editorial-only, with paired text.
- separator: 1px tonal rule; accent separator only inside role meters.
- checkbox: Cyan checked state with visible check mark and neutral label.
- switch: Cyan thumb/track for enabled, neutral off state, no gradient track.
- slider: Cyan track with neutral rail and mono numeric output.
- tooltip: Graphite surface, warm text, tiny accent dot indicating the referenced token.
- dropdown-menu: Matte neutral menu, cyan focus item, mono keyboard hints.
- table: Dense but readable rows, neutral zebra-free surfaces, violet selected row badge, chart-safe labels.

## Preview shots
application-shell, detail-editor, and data-operations should show realistic palette governance workflows rather than component inventories.

## Implementation contract
Import local primitives from `@/components/ui/*`; do not invent a parallel component system. Preserve one coherent shape scale: cards 22px, controls 12px, pills 9999px. Keep accent use below the stated caps and always pair filled accents with on-accent text.

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

export function QuietSignalPanel() {
  return (
    <Card className="relative overflow-hidden rounded-[22px] border border-border bg-card shadow-sm before:absolute before:right-0 before:top-0 before:border-l-[34px] before:border-t-[34px] before:border-l-transparent before:border-t-[color:var(--accent)]">
      <CardHeader>
        <Badge className="w-fit rounded-full bg-[#C9FF3D] text-[#172000]">brand cap 5%</Badge>
        <CardTitle className="font-semibold tracking-tight">Palette approval</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-[12px] focus-visible:ring-[#00A9D6]" defaultValue="interactive.cyan" />
        <Tabs defaultValue="light"><TabsList><TabsTrigger value="light">Light</TabsTrigger><TabsTrigger value="dark">Dark</TabsTrigger></TabsList></Tabs>
        <Button className="rounded-full bg-[#C9FF3D] text-[#172000] hover:bg-[#B7EF38]">Export semantic tokens</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "card",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "input",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "textarea",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "select",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "dialog",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "sheet",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "tabs",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "badge",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "separator",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "checkbox",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "switch",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "slider",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "tooltip",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    },
    {
      "component": "table",
      "recipe": "Use Quiet Signal neutral surfaces, tonal borders, coherent radius scale, cyan focus states, and capped role accents appropriate to the primitive."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow nav",
        "full-bleed saturated cards",
        "unpaired accent text"
      ],
      "composition": "Graphite side navigation, warm neutral hero card, accent budget meter, and governance table.",
      "id": "application-shell",
      "mustShowStates": [
        "citrus primary button",
        "cyan focused tab",
        "violet selected badge",
        "coral editorial annotation"
      ],
      "name": "Palette governance shell",
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Approve palette",
          "Inspect contrast",
          "Export tokens"
        ],
        "description": "A product team reviews semantic color roles, usage caps, and contrast pairings before export.",
        "eyebrow": "2026 palette governance",
        "headline": "Approve a balanced-bold accent system",
        "rows": [
          {
            "accent": "#C9FF3D",
            "cap": "5%",
            "on": "#172000",
            "role": "brand"
          },
          {
            "accent": "#00A9D6",
            "cap": "states only",
            "on": "#001E29",
            "role": "interactive"
          },
          {
            "accent": "#8D5CFF",
            "cap": "2 badges",
            "on": "#FFFFFF",
            "role": "highlight"
          }
        ],
        "stats": [
          {
            "label": "Accent area",
            "value": "4.6%"
          },
          {
            "label": "AA pairs",
            "value": "12/12"
          },
          {
            "label": "Dark parity",
            "value": "ready"
          }
        ]
      }
    },
    {
      "avoid": [
        "coral as error",
        "gradient state indicators",
        "unlabeled swatches"
      ],
      "composition": "A right-side inspector sheet edits OKLCH-style light/dark shifts while the main dialog previews contrast chips.",
      "id": "detail-editor",
      "mustShowStates": [
        "cyan focus ring",
        "enabled switch",
        "slider value",
        "contrast pass badge"
      ],
      "name": "Semantic token detail editor",
      "primitives": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save variant",
          "Open dark preview"
        ],
        "description": "Editors adjust light and dark accent variants while preserving paired on-accent text tokens.",
        "eyebrow": "Token detail",
        "fields": [
          {
            "label": "accent.brand",
            "value": "#C9FF3D"
          },
          {
            "label": "on-accent.brand",
            "value": "#172000"
          },
          {
            "label": "dark brand shift",
            "value": "#B7EF38"
          }
        ],
        "headline": "Tune hue identity without raising chroma everywhere",
        "stats": [
          {
            "label": "Chroma cap",
            "value": "large areas off"
          },
          {
            "label": "Focus width",
            "value": "3px"
          }
        ]
      }
    },
    {
      "avoid": [
        "hue-only chart meaning",
        "dense accent zebra rows",
        "status colors conflicting with accent roles"
      ],
      "composition": "Neutral operations table beside a chart card with line style, marker shape, and hue working together.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row violet badge",
        "cyan link/action",
        "citrus pinned marker",
        "neutral table density"
      ],
      "name": "Chart-safe operations table",
      "primitives": [
        "table",
        "card",
        "badge",
        "separator",
        "button",
        "tooltip",
        "checkbox",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Download chart tokens",
          "Review row states"
        ],
        "description": "Rows and chart markers use labels, shapes, and limited hue so colorblind users are not forced to decode hue alone.",
        "eyebrow": "Data-viz safety",
        "headline": "Accents support meaning, labels carry the proof",
        "rows": [
          {
            "marker": "circle + cyan line",
            "metric": "Activation",
            "status": "interactive"
          },
          {
            "marker": "diamond + violet line",
            "metric": "Retention",
            "status": "selected"
          },
          {
            "marker": "square + coral note",
            "metric": "Editorial lift",
            "status": "annotation"
          }
        ],
        "stats": [
          {
            "label": "Colorblind checks",
            "value": "passed"
          },
          {
            "label": "Chart accents",
            "value": "3 max"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "acidic-citrus-brand",
      "signal-cyan-interactive",
      "electric-violet-highlight",
      "hot-coral-editorial-only"
    ],
    "border": "tonal-1px-with-accent-rail",
    "contour": "clipped-notch",
    "density": "balanced-enterprise",
    "family": "production-palette",
    "grain": true,
    "material": "matte-neutral",
    "motion": "short-lift-chroma-reveal",
    "stickerBadges": "role-chips-only",
    "underlay": "quiet-grid"
  }
}