Contrast Craft Proof

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

:root {
  --background: #FAF8F1;
  --foreground: #101010;
  --card: #E8E3D8;
  --card-foreground: #101010;
  --popover: #E8E3D8;
  --popover-foreground: #101010;
  --primary: #101010;
  --primary-foreground: #ffffff;
  --secondary: #F2EFE8;
  --secondary-foreground: #111111;
  --muted: #6A665F;
  --muted-foreground: #101010;
  --accent: #B6422A;
  --accent-foreground: #ffffff;
  --destructive: #A72E24;
  --border: #2A2926;
  --input: #2A2926;
  --ring: #B6422A;
  --chart-1: #101010;
  --chart-2: #F2EFE8;
  --chart-3: #B6422A;
  --chart-4: #176C4A;
  --chart-5: #8A5A00;
  --sidebar: #E8E3D8;
  --sidebar-foreground: #101010;
  --sidebar-primary: #101010;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #245C7A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2A2926;
  --sidebar-ring: #B6422A;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #101010;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B6422A;
  --accent-foreground: #ffffff;
  --destructive: #A72E24;
  --border: #303642;
  --input: #303642;
  --ring: #B6422A;
  --chart-1: #101010;
  --chart-2: #F2EFE8;
  --chart-3: #B6422A;
  --chart-4: #176C4A;
  --chart-5: #8A5A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #101010;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #B6422A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #B6422A;
  --radius: 2px;
}

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 ContrastCraftProofShadcnKit() {
  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">Contrast Craft Proof</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": "contrast-craft-proof",
  "type": "registry:theme",
  "title": "Contrast Craft Proof shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FAF8F1",
      "foreground": "#101010",
      "card": "#E8E3D8",
      "card-foreground": "#101010",
      "popover": "#E8E3D8",
      "popover-foreground": "#101010",
      "primary": "#101010",
      "primary-foreground": "#ffffff",
      "secondary": "#F2EFE8",
      "secondary-foreground": "#111111",
      "muted": "#6A665F",
      "muted-foreground": "#101010",
      "accent": "#B6422A",
      "accent-foreground": "#ffffff",
      "destructive": "#A72E24",
      "border": "#2A2926",
      "input": "#2A2926",
      "ring": "#B6422A",
      "chart-1": "#101010",
      "chart-2": "#F2EFE8",
      "chart-3": "#B6422A",
      "chart-4": "#176C4A",
      "chart-5": "#8A5A00",
      "sidebar": "#E8E3D8",
      "sidebar-foreground": "#101010",
      "sidebar-primary": "#101010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#245C7A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A2926",
      "sidebar-ring": "#B6422A",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#101010",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B6422A",
      "accent-foreground": "#ffffff",
      "destructive": "#A72E24",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B6422A",
      "chart-1": "#101010",
      "chart-2": "#F2EFE8",
      "chart-3": "#B6422A",
      "chart-4": "#176C4A",
      "chart-5": "#8A5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#101010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B6422A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B6422A",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b2-f7ec-7841-8335-35618e48e7c8",
    "slug": "contrast-craft-proof",
    "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"
      ]
    }
  }
}

# Contrast Craft Proof shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the palette system into shadcn/ui screens where high contrast, semantic token naming, and restricted cinnabar accent use are unmistakable.

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

## Token cues
Use bone backgrounds, paper surfaces, black ink text and borders, graphite dark surfaces, muted copy, and cinnabar only for active strips, focus rings, selected tabs, and chart marks.

## Visual character to preserve
Hard neutral steps; 1px and 2px ink rules; clipped proof-card notches; offset black rule shadows; mono token labels; visible AA/AAA contrast metadata.

## ShadSync visual profile
family: production-proof; material: ink-paper; contour: clipped-notch; border: solid-ink; underlay: registration-grid; grain: false; stickerBadges: false; motion: mechanical-120ms; density: compact-editorial; accents: cinnabar-capped.

## Signature component recipes
- button: primary uses ink fill and paper text with 3px cinnabar offset shadow; secondary is paper fill with ink border.
- card: 2px ink border, 2px radius, clipped top-right notch, 6px black offset shadow, no blur.
- input: white or dark surface, 2px ink border, mono label, cinnabar focus ring; never use pastel backgrounds.
- textarea: same as input with compact padding and visible contrast note helper text.
- select: square field with ink chevron, explicit mode label, focus ring in cinnabar.
- dialog: paper proof sheet with strong border, notch, black shadow, and one accent header rule.
- sheet: graphite or paper slab with registration-grid underlay and hard separator rules.
- tabs: selected tab gets a 4px cinnabar top or left rule; inactive tabs remain neutral.
- badge: mono token capsule with border-left accent only for active/verified states.
- separator: 1px ink rule for local division; 2px rule for section axes.
- checkbox: square 2px ink box; checked uses cinnabar fill plus checkmark, not color alone.
- switch: rectangular mechanical track, ink border, text label adjacent for state redundancy.
- slider: black track with cinnabar value cap and numeric mono output.
- tooltip: ink fill, paper text, no glass, max one sentence.
- dropdown-menu: paper list with ink border, selected item has left accent rule.
- table: dense token register with mono names, row rules, swatches, and contrast labels.

## Preview shots
application-shell, detail-editor, data-operations.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent another component system, do not add unnamed hex colors, and do not exceed the accent budget.

## 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 ContrastCraftProofPanel() {
  return (
    <Card className="rounded-[2px] border-2 border-foreground bg-card shadow-[6px_6px_0_hsl(var(--foreground))]">
      <CardHeader className="border-b-2 border-foreground">
        <Badge className="rounded-[2px] border border-foreground border-l-4 border-l-primary font-mono">AAA verified</Badge>
        <CardTitle className="font-sora tracking-[-0.04em]">Semantic token proof</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-3 pt-4">
        <Input aria-label="Token" defaultValue="color.intent.warning.fg" className="rounded-[2px] border-2" />
        <Tabs defaultValue="light"><TabsList><TabsTrigger value="light">Light</TabsTrigger><TabsTrigger value="dark">Dark</TabsTrigger></TabsList></Tabs>
        <Button>Run contrast lint</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "card",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "input",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "textarea",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "select",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "dialog",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "sheet",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "tabs",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "badge",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "separator",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "checkbox",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "switch",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "slider",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "tooltip",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    },
    {
      "component": "table",
      "recipe": "Use hard 2px/1px ink rules, 2px radius, semantic labels, and capped cinnabar accents where state requires emphasis."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "gradients",
        "unnamed colors",
        "soft shadows"
      ],
      "composition": "Two-column palette governance shell with rail navigation and proof cards.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with cinnabar rule",
        "AAA badge",
        "dense token table"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "dropdown-menu",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Approve token set",
          "Run contrast lint"
        ],
        "description": "Review primitive ramps, semantic aliases, and contrast status before export.",
        "eyebrow": "Palette governance",
        "headline": "Contrast proof desk",
        "rows": [
          {
            "contrast": "AAA",
            "hex": "#FAF8F1",
            "token": "color.bg.default"
          },
          {
            "contrast": "AA large",
            "hex": "#B6422A",
            "token": "color.accent.cinnabar"
          }
        ],
        "stats": [
          {
            "label": "AAA pairs",
            "value": "18"
          },
          {
            "label": "Unnamed hex",
            "value": "0"
          },
          {
            "label": "Accent budget",
            "value": "7%"
          }
        ]
      }
    },
    {
      "avoid": [
        "color-only state",
        "pastel fills"
      ],
      "composition": "Token detail editor with contrast metadata, mode parity controls, and mechanical state toggles.",
      "id": "detail-editor",
      "mustShowStates": [
        "focus ring",
        "checked state with label",
        "slider numeric output"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save alias",
          "Open dark preview"
        ],
        "description": "Every alias requires usage notes, redundancy, and light/dark contrast parity.",
        "eyebrow": "Semantic alias",
        "fields": [
          {
            "label": "Token",
            "value": "color.intent.warning.fg"
          },
          {
            "label": "Usage",
            "value": "Amber rule plus icon and label"
          },
          {
            "label": "Mode",
            "value": "Light/dark paired"
          }
        ],
        "headline": "Edit warning foreground"
      }
    },
    {
      "avoid": [
        "rainbow charts",
        "hue-only legends"
      ],
      "composition": "Data-viz safety board with patterned bars, table rows, and explicit colorblind notes.",
      "id": "data-operations",
      "mustShowStates": [
        "patterned series",
        "selected row",
        "export menu"
      ],
      "primitives": [
        "table",
        "card",
        "badge",
        "separator",
        "button",
        "tooltip",
        "dropdown-menu",
        "tabs"
      ],
      "scene": {
        "actions": [
          "Export chart tokens",
          "Inspect failures"
        ],
        "description": "Series combine hue, dash pattern, labels, and ordering for accessible operations screens.",
        "eyebrow": "Chart tokens",
        "headline": "Safe series register",
        "rows": [
          {
            "hex": "#245C7A",
            "series": "info dash",
            "shape": "diagonal stripe"
          },
          {
            "hex": "#176C4A",
            "series": "success hatch",
            "shape": "vertical hatch"
          }
        ],
        "stats": [
          {
            "label": "Series",
            "value": "6"
          },
          {
            "label": "Patterned",
            "value": "4"
          },
          {
            "label": "Failures",
            "value": "0"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "cinnabar-capped",
    "border": "solid-ink",
    "contour": "clipped-notch",
    "density": "compact-editorial",
    "family": "production-proof",
    "grain": false,
    "material": "ink-paper",
    "motion": "mechanical-120ms",
    "stickerBadges": false,
    "underlay": "registration-grid"
  }
}