Signal Clay Status System

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

:root {
  --background: #F4EFE6;
  --foreground: #16130F;
  --card: #FFFDF8;
  --card-foreground: #16130F;
  --popover: #FFFDF8;
  --popover-foreground: #16130F;
  --primary: #0E1111;
  --primary-foreground: #ffffff;
  --secondary: #6B5A49;
  --secondary-foreground: #ffffff;
  --muted: #8B7C6B;
  --muted-foreground: #16130F;
  --accent: #005FCC;
  --accent-foreground: #ffffff;
  --destructive: #C1121F;
  --border: #CFC3B2;
  --input: #CFC3B2;
  --ring: #005FCC;
  --chart-1: #0E1111;
  --chart-2: #6B5A49;
  --chart-3: #005FCC;
  --chart-4: #007A4D;
  --chart-5: #B45F00;
  --sidebar: #FFFDF8;
  --sidebar-foreground: #16130F;
  --sidebar-primary: #0E1111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #006EB8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CFC3B2;
  --sidebar-ring: #005FCC;
  --radius: 8px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0E1111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #005FCC;
  --accent-foreground: #ffffff;
  --destructive: #C1121F;
  --border: #303642;
  --input: #303642;
  --ring: #005FCC;
  --chart-1: #0E1111;
  --chart-2: #6B5A49;
  --chart-3: #005FCC;
  --chart-4: #007A4D;
  --chart-5: #B45F00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0E1111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #005FCC;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #005FCC;
  --radius: 8px;
}

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 SignalClayStatusSystemShadcnKit() {
  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 Clay Status 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": "signal-clay-status-system",
  "type": "registry:theme",
  "title": "Signal Clay Status System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EFE6",
      "foreground": "#16130F",
      "card": "#FFFDF8",
      "card-foreground": "#16130F",
      "popover": "#FFFDF8",
      "popover-foreground": "#16130F",
      "primary": "#0E1111",
      "primary-foreground": "#ffffff",
      "secondary": "#6B5A49",
      "secondary-foreground": "#ffffff",
      "muted": "#8B7C6B",
      "muted-foreground": "#16130F",
      "accent": "#005FCC",
      "accent-foreground": "#ffffff",
      "destructive": "#C1121F",
      "border": "#CFC3B2",
      "input": "#CFC3B2",
      "ring": "#005FCC",
      "chart-1": "#0E1111",
      "chart-2": "#6B5A49",
      "chart-3": "#005FCC",
      "chart-4": "#007A4D",
      "chart-5": "#B45F00",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#16130F",
      "sidebar-primary": "#0E1111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#006EB8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFC3B2",
      "sidebar-ring": "#005FCC",
      "radius": "8px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0E1111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#005FCC",
      "accent-foreground": "#ffffff",
      "destructive": "#C1121F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#005FCC",
      "chart-1": "#0E1111",
      "chart-2": "#6B5A49",
      "chart-3": "#005FCC",
      "chart-4": "#007A4D",
      "chart-5": "#B45F00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0E1111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#005FCC",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#005FCC",
      "radius": "8px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a1-d843-7ff1-b0c4-ede277c53f14",
    "slug": "signal-clay-status-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"
      ]
    }
  }
}

# Signal Clay Status System shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ea9a1-d843-7ff1-b0c4-ede277c53f14`
Slug: `signal-clay-status-system`

## Intent

Signal Clay Status System is a restrained product-UI palette language that uses warm neutral foundations, muted clay surfaces, and deliberately high-contrast signal colors for focus, selection, success, warning, danger, and information states. It borrows from official design-system practices around semantic roles, dynamic light/dark behavior, and accessible state mapping while keeping the visual field calm enough for dense operational work.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

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

## Token cues

Colors:

{
  "accent": "#005FCC",
  "background": "#F4EFE6",
  "border": "#CFC3B2",
  "error": "#C1121F",
  "info": "#006EB8",
  "muted": "#8B7C6B",
  "primary": "#0E1111",
  "secondary": "#6B5A49",
  "success": "#007A4D",
  "surface": "#FFFDF8",
  "text": "#16130F",
  "warning": "#B45F00"
}

Typography:

{
  "base_size": "16px",
  "body_font": "Source Sans 3",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap",
  "heading_font": "Atkinson Hyperlegible",
  "letter_spacing": "-0.01em",
  "line_height": 1.55,
  "mono_font": "IBM Plex Mono",
  "scale_ratio": 1.2
}

## Visual character to preserve

- CSS uses a warm neutral five-step background stack: page ochre, raised ivory cards, muted sand panels, clay-tinted selected rows, and ink text for 7:1-plus reading contrast.
- Every semantic state is rendered as a paired token: a saturated high-contrast left rail or ring plus a pale warm wash, so status remains recognizable without filling the whole component.
- Interactive controls use thick two-color focus treatment: a near-black inner border and a saturated outer ring offset by 2px, making keyboard position visible on light and dark surfaces.
- Charts, tables, and cards reserve saturation for tiny structural accents such as rail bars, selection ticks, status dots, and command buttons while large surfaces stay low-chroma.
- Dark mode is expressed by inverting the neutral stack to umber and charcoal while preserving the same semantic hues at adjusted luminance, rather than simply dimming the light palette.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": true,
  "grain": false,
  "stickerBadges": false,
  "motion": "lift",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/signal-clay-status-system/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Map every raw hex to semantic tokens before applying it in components or charts.; Use saturated color for focus, selected, success, warning, danger, and info states while keeping base surfaces warm and muted.; Pair color with labels, icons, rails, or pattern so users are not forced to infer state from hue alone.; Test every foreground/background pairing in light and dark behavior, especially warning text and disabled controls.
- Do not: Do not use low-contrast pastel chips for warning or danger states.; Do not flood whole dashboards with accent blue; reserve it for action, focus, and selection.; Do not use neutral gray as the only disabled or inactive cue without opacity and text changes.; Do not mix primitive palette names into product copy; users should see intent labels, not token jargon.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SignalClayStatusSystemShadcnKit() {
  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 Clay Status 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>
  );
}
```

## Layout notes

{
  "breakpoints": "mobile <= 640px, tablet 641px-1024px, desktop >= 1025px",
  "density": "Compact but not cramped; status evidence, controls, and data rows fit operational screens while maintaining AA contrast and keyboard-visible focus.",
  "grid": "Desktop uses a 12-column shell: 220px navigation, 1fr operational table, and 340px semantic inspector; tablet becomes 8 columns with inspector below; mobile becomes one column with sticky action bar.",
  "whitespace": "Whitespace is deliberately quiet: 24-32px around major panels, 8-12px inside dense rows, and extra 16px before any destructive or warning cluster so state changes are not missed."
}

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "card",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "input",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "textarea",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "select",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "dialog",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "sheet",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "tabs",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "badge",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "separator",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "checkbox",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "switch",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "slider",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "tooltip",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    },
    {
      "primitive": "table",
      "recipe": "Use Signal Clay tokens, warm neutral surfaces, clay borders, visible accent focus ring, compact spacing, and semantic rails/dots/labels when stateful."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "table",
        "dropdown-menu"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "Review selected",
          "Export ledger"
        ],
        "description": "Dense but calm dashboard showing muted chroma surfaces and high-contrast state accents.",
        "eyebrow": "Command center",
        "headline": "Semantic operations queue",
        "rows": [
          {
            "name": "Gateway audit",
            "owner": "Ops",
            "rail": "warning",
            "status": "Warning"
          },
          {
            "name": "Payment hold",
            "owner": "Risk",
            "rail": "error",
            "status": "Danger"
          },
          {
            "name": "Profile sync",
            "owner": "Platform",
            "rail": "success",
            "status": "Success"
          }
        ],
        "stats": [
          {
            "label": "Open",
            "state": "info",
            "value": "128"
          },
          {
            "label": "At risk",
            "state": "warning",
            "value": "17"
          },
          {
            "label": "Resolved",
            "state": "success",
            "value": "91%"
          }
        ]
      },
      "title": "Operations shell",
      "visualIntent": "Warm neutral desktop console with navigation, data table, selected clay row, semantic rails, and right status inspector."
    },
    {
      "components": [
        "dialog",
        "sheet",
        "textarea",
        "input",
        "checkbox",
        "switch",
        "slider",
        "tooltip",
        "separator",
        "button",
        "badge"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save policy",
          "Escalate warning"
        ],
        "description": "A focused edit view where every semantic color is paired with labels and structural affordances.",
        "eyebrow": "Detail editor",
        "fields": [
          {
            "label": "Policy name",
            "value": "Semantic contrast audit"
          },
          {
            "label": "Owner",
            "value": "Design systems"
          },
          {
            "label": "Warning threshold",
            "value": "AA below target"
          }
        ],
        "headline": "Threshold policy review",
        "stats": [
          {
            "label": "Focus visible",
            "state": "success",
            "value": "Pass"
          },
          {
            "label": "Risk",
            "state": "warning",
            "value": "Medium"
          }
        ]
      },
      "title": "Status detail editor",
      "visualIntent": "Ivory form panel with explicit warning copy, dual focus treatment, and destructive area separated by whitespace."
    },
    {
      "components": [
        "table",
        "card",
        "badge",
        "button",
        "select",
        "separator",
        "tabs",
        "tooltip"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "Apply mapping",
          "View contrast notes"
        ],
        "description": "Operational rows prove the palette supports muted chroma with high-contrast accents.",
        "eyebrow": "Data ledger",
        "headline": "Primitive-to-semantic mapping",
        "rows": [
          {
            "hex": "#005FCC",
            "state": "info",
            "token": "accent",
            "usage": "focus/action"
          },
          {
            "hex": "#B45F00",
            "state": "warning",
            "token": "warning",
            "usage": "threshold rail"
          },
          {
            "hex": "#C1121F",
            "state": "error",
            "token": "error",
            "usage": "destructive label"
          }
        ],
        "stats": [
          {
            "label": "AA pairs",
            "state": "success",
            "value": "12/12"
          }
        ]
      },
      "title": "Data operations ledger",
      "visualIntent": "Compact table rows with status dots, text states, selected wash, accent check rail, and token map strip."
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "accent-blue focus rails",
      "success green status",
      "warning orange thresholds",
      "danger red destructive states",
      "info cyan notices"
    ],
    "border": "one-pixel-clay-plus-four-pixel-state-rail",
    "contour": "measured-radius",
    "density": "compact-operational",
    "family": "warm-semantic-product",
    "grain": "subtle-umber-dot-grid",
    "material": "matte-clay-neutral",
    "motion": "functional-short-fade-slide",
    "stickerBadges": true,
    "underlay": true
  }
}