Eco-accountable Redirection Palettes

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

:root {
  --background: #F5F0E6;
  --foreground: #162321;
  --card: #FFF8EC;
  --card-foreground: #162321;
  --popover: #FFF8EC;
  --popover-foreground: #162321;
  --primary: #006D73;
  --primary-foreground: #ffffff;
  --secondary: #8A5A44;
  --secondary-foreground: #ffffff;
  --muted: #5B6C66;
  --muted-foreground: #162321;
  --accent: #FFB000;
  --accent-foreground: #ffffff;
  --destructive: #C83232;
  --border: #B97B5D;
  --input: #B97B5D;
  --ring: #FFB000;
  --chart-1: #006D73;
  --chart-2: #8A5A44;
  --chart-3: #FFB000;
  --chart-4: #167A4A;
  --chart-5: #B86B00;
  --sidebar: #FFF8EC;
  --sidebar-foreground: #162321;
  --sidebar-primary: #006D73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0B5F8A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #B97B5D;
  --sidebar-ring: #FFB000;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #006D73;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FFB000;
  --accent-foreground: #ffffff;
  --destructive: #C83232;
  --border: #303642;
  --input: #303642;
  --ring: #FFB000;
  --chart-1: #006D73;
  --chart-2: #8A5A44;
  --chart-3: #FFB000;
  --chart-4: #167A4A;
  --chart-5: #B86B00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #006D73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FFB000;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FFB000;
  --radius: 14px;
}

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 EcoAccountableRedirectionPalettesShadcnKit() {
  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">Eco-accountable Redirection Palettes</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": "eco-accountable-redirection-palettes",
  "type": "registry:theme",
  "title": "Eco-accountable Redirection Palettes shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F5F0E6",
      "foreground": "#162321",
      "card": "#FFF8EC",
      "card-foreground": "#162321",
      "popover": "#FFF8EC",
      "popover-foreground": "#162321",
      "primary": "#006D73",
      "primary-foreground": "#ffffff",
      "secondary": "#8A5A44",
      "secondary-foreground": "#ffffff",
      "muted": "#5B6C66",
      "muted-foreground": "#162321",
      "accent": "#FFB000",
      "accent-foreground": "#ffffff",
      "destructive": "#C83232",
      "border": "#B97B5D",
      "input": "#B97B5D",
      "ring": "#FFB000",
      "chart-1": "#006D73",
      "chart-2": "#8A5A44",
      "chart-3": "#FFB000",
      "chart-4": "#167A4A",
      "chart-5": "#B86B00",
      "sidebar": "#FFF8EC",
      "sidebar-foreground": "#162321",
      "sidebar-primary": "#006D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0B5F8A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#B97B5D",
      "sidebar-ring": "#FFB000",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#006D73",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FFB000",
      "accent-foreground": "#ffffff",
      "destructive": "#C83232",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FFB000",
      "chart-1": "#006D73",
      "chart-2": "#8A5A44",
      "chart-3": "#FFB000",
      "chart-4": "#167A4A",
      "chart-5": "#B86B00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#006D73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FFB000",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FFB000",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a5-07dc-7f20-8fcb-ab5b25c9111d",
    "slug": "eco-accountable-redirection-palettes",
    "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"
      ]
    }
  }
}

# Eco-accountable Redirection Palettes shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the palette language into shadcn/ui product screens where teal is responsibility infrastructure, earth tones show provenance, amber/coral signal redirection, and calm aqua/cream tints support comprehension.

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

## Token cues
Use primary teal for rails and primary actions, charcoal for all body text, warm cream/ivory for backgrounds, clay borders for material provenance, amber for urgent callouts with icon/text, and aqua as low-stress underlay. Normal text must meet 4.5:1; prefer charcoal-on-cream or charcoal-on-aqua for body copy.

## Visual character to preserve
Maintain a teal responsibility rail, clay keyline borders, offset tint underlays, mono provenance chips, protruding urgent bright tabs, and Fraunces/Atkinson-style hierarchy.

## ShadSync visual profile
family: editorial-repair-palette; material: warm paper with civic field grid; contour: rounded-rect with pill chips; border: clay keyline plus teal rail; underlay: true; grain: true; stickerBadges: measured urgent tabs; motion: lift-2px; density: balanced-editorial; accents: amber tabs and aqua underlays.

## Signature component recipes
- button: Primary buttons use `bg-primary text-primary-foreground rounded-full border-2 border-foreground shadow-[0_4px_0_var(--accent)]`; include arrow or icon on urgent actions.
- card: Cards use ivory surface, clay border, teal left border rail, `rounded-[26px]`, offset aqua `before:` underlay for feature cards, and mono provenance badge in the top-right.
- input: Inputs are white fields with charcoal 2px border, rounded 14px, aqua shadow, visible label text, and amber+charcoal focus ring.
- textarea: Same as input with minimum height and provenance helper copy below.
- select: Use the input shell plus chevron icon; never indicate validity by hue alone.
- dialog: Dialog content should appear as a paper repair brief with teal header rail, clay border, and amber decision badge.
- sheet: Sheets slide from the side with a persistent teal rail and stacked provenance chips.
- tabs: Tabs use mono uppercase labels; active tab gets teal underline, amber pill count, and bold text.
- badge: Provenance badges are clay outlined pills; urgent badges are amber with icon and text.
- separator: Dashed clay separators divide source notes and audit sections.
- checkbox: Charcoal bordered square; checked state adds teal fill and visible check icon.
- switch: Teal track with white knob and text label beside it.
- slider: Clay track, teal filled range, amber thumb for deadline/priority settings.
- tooltip: Ivory surface, charcoal text, clay border, and source/provenance wording.
- dropdown-menu: Warm paper menu with teal active rail and mono section labels.
- table: Rows are ivory capsules with teal left rule, clay border, and explicit status text.

## Preview shots
Use three polished scenes: application-shell, detail-editor, and data-operations. Each must show the rail, provenance chips, tinted underlays, and at least one accessible urgent cue.

## Implementation contract
Import local primitives from `@/components/ui/*`; do not invent a second component library. Preserve contrast ratios, use text/icon/shape for status, and keep color provenance visible in content.

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

export function RepairPalettePanel() {
  return (
    <Card className="relative overflow-hidden rounded-[26px] border border-[#B97B5D] border-l-8 border-l-[#006D73] bg-[#FFF8EC] shadow-[0_8px_0_rgba(0,109,115,.13)]">
      <CardHeader>
        <Badge className="w-fit rounded-full border border-[#162321] bg-[#FFB000] text-[#241A00]">⚠ deadline labeled</Badge>
        <CardTitle className="font-serif text-4xl tracking-tight text-[#162321]">Watershed repair palette</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 text-[#162321]">
        <Input aria-label="Provenance" defaultValue="Teal: civic water infrastructure" className="rounded-[14px] border-2 border-[#162321] bg-white shadow-[0_3px_0_#D9F2EE]" />
        <Table><TableHeader><TableRow><TableHead>Hue</TableHead><TableHead>Use</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>#006D73</TableCell><TableCell>Responsibility rail</TableCell></TableRow></TableBody></Table>
        <Button className="rounded-full border-2 border-[#162321] bg-[#162321] text-white shadow-[0_4px_0_#FFB000]">Run audit →</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "card",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "input",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "textarea",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "select",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "dialog",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "sheet",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "tabs",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "badge",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "separator",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "checkbox",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "switch",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "slider",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "tooltip",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    },
    {
      "component": "table",
      "recipe": "Use Eco-accountable Redirection styling with teal infrastructure, clay border, charcoal text, visible focus, and non-color status cues."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic green nature symbols",
        "color-only state"
      ],
      "composition": "Desktop editorial dashboard with left teal responsibility rail, hero card, palette audit table, and amber urgent tab.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab has teal underline and label",
        "urgent badge includes warning icon and text",
        "table rows include status words"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "dropdown-menu",
        "tooltip"
      ],
      "scene": {
        "description": "Editors compare color provenance, contrast, and narrative role before publishing a climate repair feature.",
        "eyebrow": "2026 repair newsroom",
        "headline": "Watershed investment palette audit",
        "primaryAction": "Run contrast audit",
        "rows": [
          {
            "hue": "#006D73",
            "role": "responsibility rail",
            "status": "approved"
          },
          {
            "hue": "#FFB000",
            "role": "urgent funding deadline",
            "status": "icon + label required"
          }
        ],
        "secondaryAction": "Export provenance notes",
        "stats": [
          {
            "label": "Body contrast",
            "value": "7.2:1"
          },
          {
            "label": "Named sources",
            "value": "12"
          },
          {
            "label": "Urgent cues",
            "value": "3 modes"
          }
        ]
      }
    },
    {
      "avoid": [
        "placeholder-only fields",
        "low contrast helper text"
      ],
      "composition": "Palette provenance editor with ivory cards, form controls, aqua underlay, and labeled amber priority controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input uses amber and charcoal outline",
        "switch has adjacent text label",
        "slider shows numeric priority"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "button",
        "badge"
      ],
      "scene": {
        "description": "A curator records material references and accessibility constraints for each expressive hue.",
        "eyebrow": "Local authenticity check",
        "fields": [
          {
            "label": "Teal source",
            "value": "civic water infrastructure"
          },
          {
            "label": "Earth neutral source",
            "value": "repaired clay and bark materials"
          },
          {
            "label": "Contrast note",
            "value": "charcoal body text on cream only"
          }
        ],
        "headline": "Document the clay and teal source story",
        "primaryAction": "Save provenance",
        "secondaryAction": "Preview palette",
        "stats": [
          {
            "label": "Priority",
            "value": "62%"
          },
          {
            "label": "WCAG state",
            "value": "Pass"
          }
        ]
      }
    },
    {
      "avoid": [
        "component inventory wall",
        "unlabeled colored dots"
      ],
      "composition": "Operations review with slide-out sheet, capsule table rows, provenance badges, and decision controls.",
      "id": "data-operations",
      "mustShowStates": [
        "open sheet has teal rail",
        "badges distinguish provenance from urgency using words",
        "dropdown active item has rail and label"
      ],
      "primitives": [
        "sheet",
        "table",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "button",
        "card",
        "select",
        "switch"
      ],
      "scene": {
        "description": "A policy communications team reviews which palette choices can carry urgency without losing accessibility.",
        "eyebrow": "Redirection board",
        "headline": "Approve future-building color decisions",
        "primaryAction": "Approve redirection",
        "rows": [
          {
            "contrast": "Pass",
            "cue": "amber tab + icon",
            "project": "Mangrove repair"
          },
          {
            "contrast": "Pass",
            "cue": "aqua underlay",
            "project": "Urban cooling"
          },
          {
            "contrast": "Pass",
            "cue": "clay border",
            "project": "Soil commons"
          }
        ],
        "secondaryAction": "Open source sheet",
        "stats": [
          {
            "label": "Decisions ready",
            "value": "9"
          },
          {
            "label": "Needs local note",
            "value": "2"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "transformative teal responsibility rail",
      "solar amber urgent tabs",
      "pale aqua calming underlays",
      "clay provenance borders"
    ],
    "border": "clay-keyline-with-teal-rail",
    "contour": "rounded-rect-and-pill",
    "density": "balanced-editorial",
    "family": "editorial-repair-palette",
    "grain": true,
    "material": "warm-paper-field-notes",
    "motion": "lift-2px-accountable-reveal",
    "stickerBadges": true,
    "underlay": true
  }
}