Kiln Verde Luxe Forecast

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

:root {
  --background: #D9B38C;
  --foreground: #201B18;
  --card: #F4E8D2;
  --card-foreground: #201B18;
  --popover: #F4E8D2;
  --popover-foreground: #201B18;
  --primary: #2F6F60;
  --primary-foreground: #ffffff;
  --secondary: #A65337;
  --secondary-foreground: #ffffff;
  --muted: #7A6251;
  --muted-foreground: #201B18;
  --accent: #1E6BFF;
  --accent-foreground: #ffffff;
  --destructive: #8A2D3C;
  --border: #3D3028;
  --input: #3D3028;
  --ring: #1E6BFF;
  --chart-1: #2F6F60;
  --chart-2: #A65337;
  --chart-3: #1E6BFF;
  --chart-4: #4E7A3C;
  --chart-5: #D8B64A;
  --sidebar: #F4E8D2;
  --sidebar-foreground: #201B18;
  --sidebar-primary: #2F6F60;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #9B8CFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #3D3028;
  --sidebar-ring: #1E6BFF;
  --radius: 10px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #2F6F60;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #1E6BFF;
  --accent-foreground: #ffffff;
  --destructive: #8A2D3C;
  --border: #303642;
  --input: #303642;
  --ring: #1E6BFF;
  --chart-1: #2F6F60;
  --chart-2: #A65337;
  --chart-3: #1E6BFF;
  --chart-4: #4E7A3C;
  --chart-5: #D8B64A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #2F6F60;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1E6BFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #1E6BFF;
  --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 KilnVerdeLuxeForecastShadcnKit() {
  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">Kiln Verde Luxe Forecast</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": "kiln-verde-luxe-forecast",
  "type": "registry:theme",
  "title": "Kiln Verde Luxe Forecast shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#D9B38C",
      "foreground": "#201B18",
      "card": "#F4E8D2",
      "card-foreground": "#201B18",
      "popover": "#F4E8D2",
      "popover-foreground": "#201B18",
      "primary": "#2F6F60",
      "primary-foreground": "#ffffff",
      "secondary": "#A65337",
      "secondary-foreground": "#ffffff",
      "muted": "#7A6251",
      "muted-foreground": "#201B18",
      "accent": "#1E6BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#8A2D3C",
      "border": "#3D3028",
      "input": "#3D3028",
      "ring": "#1E6BFF",
      "chart-1": "#2F6F60",
      "chart-2": "#A65337",
      "chart-3": "#1E6BFF",
      "chart-4": "#4E7A3C",
      "chart-5": "#D8B64A",
      "sidebar": "#F4E8D2",
      "sidebar-foreground": "#201B18",
      "sidebar-primary": "#2F6F60",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#9B8CFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3D3028",
      "sidebar-ring": "#1E6BFF",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2F6F60",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#1E6BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#8A2D3C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#1E6BFF",
      "chart-1": "#2F6F60",
      "chart-2": "#A65337",
      "chart-3": "#1E6BFF",
      "chart-4": "#4E7A3C",
      "chart-5": "#D8B64A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2F6F60",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1E6BFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#1E6BFF",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb43d-fd82-77d3-b3b0-bd1e75556077",
    "slug": "kiln-verde-luxe-forecast",
    "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"
      ]
    }
  }
}

# Kiln Verde Luxe Forecast shadcn/ui Components
Author: `katagami-agent`

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

## ShadSync visual profile
family: material-forecast; material: matte-clay-mineral; contour: clipped-tab-rectangular; border: graphite-outline-copper-rule; underlay: true; grain: true; stickerBadges: true; motion: material-lift; density: balanced-dense; accents: electric-blue, digital-lavender, butter-yellow.

## Signature component recipes
- **button**: primary mineral background, chalk text, 1px graphite border, 5px oxidized-copper inset-left bar; secondary is chalk with graphite text.
- **card**: oat/chalk surface, graphite border, clipped mineral tab, subtle grain shadow, optional copper left rule for priority modules.
- **input**: chalk fill, graphite border, 10px radius, electric-blue focus ring, mono label, and compact vertical rhythm.
- **textarea**: same as input; in aubergine wells use transparent plum fill with copper border.
- **select**: chalk field with cocoa chevron area, mineral tab label, and graphite outline.
- **dialog**: chalk panel with copper rule and clipped green section tab; smoky aubergine backdrop.
- **sheet**: clay/oat surface, graphite outline, sticky mono metadata rail, copper section dividers.
- **tabs**: mono uppercase list; active tab has mineral fill and copper underline.
- **badge**: butter, lavender, or chalk fills with graphite outline; tiny sizes and pill role only.
- **separator**: cocoa/graphite 1px lines, occasionally doubled for editorial divisions.
- **checkbox**: soft-square control, mineral check, graphite border, blue focus ring.
- **switch**: cocoa track, mineral thumb, tiny lavender status pip when on.
- **slider**: graphite rail, mineral fill, copper thumb with blue focus halo.
- **tooltip**: graphite or aubergine surface with chalk text and copper hairline.
- **dropdown-menu**: chalk surface, graphite outline, mono category labels, blue hover pip.
- **table**: ruled rows with chalk background, cocoa dividers, compact evidence status badges.

## Preview shots
- `application-shell`: evidence rail, hero decision card, swatch matrix, clipped-tab status cards.
- `detail-editor`: aubergine finish editor with fields, switch, slider, select, textarea, and dialog trigger.
- `data-operations`: dense rows table with tabs, dropdown actions, tooltip hints, and status badges.

## 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"

export function KilnVerdeDecisionCard() {
  return (
    <Card className="relative overflow-hidden rounded-[18px] border-[#3D3028] bg-[#F4E8D2] shadow-[0_14px_32px_rgba(32,27,24,0.18)] before:absolute before:left-0 before:top-0 before:h-full before:w-[5px] before:bg-[#A65337]">
      <CardHeader className="pl-8">
        <Badge className="w-fit border-[#3D3028] bg-[#2F6F60] font-mono text-[#F4E8D2]">LIVE FORECAST</Badge>
        <CardTitle className="font-serif text-[#201B18]">Biophilic luxe palette gate</CardTitle>
      </CardHeader>
      <CardContent className="pl-8 text-[#201B18]">
        <Button className="border border-[#3D3028] bg-[#2F6F60] text-[#F4E8D2] shadow-none">Approve palette</Button>
      </CardContent>
    </Card>
  )
}
```

## Implementation contract
Import primitives from `@/components/ui/*`. Apply copper-rule and clipped-tab patterns through className composition. Keep blue/lavender accents below 10% of visible area and avoid generic component inventory walls.

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "primary mineral background, chalk text, 1px graphite border, 5px oxidized-copper inset-left bar; secondary is chalk with graphite text."
    },
    {
      "component": "card",
      "recipe": "oat/chalk surface, graphite border, clipped mineral tab, subtle grain shadow, optional copper left rule for priority modules."
    },
    {
      "component": "input",
      "recipe": "chalk fill, graphite border, 10px radius, electric-blue focus ring, mono label, and compact vertical rhythm."
    },
    {
      "component": "textarea",
      "recipe": "same as input; in aubergine wells use transparent plum fill with copper border."
    },
    {
      "component": "select",
      "recipe": "chalk field with cocoa chevron area, mineral tab label, and graphite outline."
    },
    {
      "component": "dialog",
      "recipe": "chalk panel with copper rule and clipped green section tab; smoky aubergine backdrop."
    },
    {
      "component": "sheet",
      "recipe": "clay/oat surface, graphite outline, sticky mono metadata rail, copper section dividers."
    },
    {
      "component": "tabs",
      "recipe": "mono uppercase list; active tab has mineral fill and copper underline."
    },
    {
      "component": "badge",
      "recipe": "butter, lavender, or chalk fills with graphite outline; tiny sizes and pill role only."
    },
    {
      "component": "separator",
      "recipe": "cocoa/graphite 1px lines, occasionally doubled for editorial divisions."
    },
    {
      "component": "checkbox",
      "recipe": "soft-square control, mineral check, graphite border, blue focus ring."
    },
    {
      "component": "switch",
      "recipe": "cocoa track, mineral thumb, tiny lavender status pip when on."
    },
    {
      "component": "slider",
      "recipe": "graphite rail, mineral fill, copper thumb with blue focus halo."
    },
    {
      "component": "tooltip",
      "recipe": "graphite or aubergine surface with chalk text and copper hairline."
    },
    {
      "component": "dropdown-menu",
      "recipe": "chalk surface, graphite outline, mono category labels, blue hover pip."
    },
    {
      "component": "table",
      "recipe": "ruled rows with chalk background, cocoa dividers, compact evidence status badges."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow swatch wall",
        "large neon blue area",
        "muddy beige text"
      ],
      "composition": "Evidence rail, hero decision card, swatch matrix, clipped-tab status cards over clay grain underlay.",
      "id": "application-shell",
      "mustShowStates": [
        "active mineral tab",
        "blue live pip",
        "copper-rule primary action"
      ],
      "name": "Forecast command shell",
      "primitives": [
        "button",
        "card",
        "badge",
        "tabs",
        "separator",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Approve palette",
          "Open evidence menu"
        ],
        "description": "Approve material palettes for interiors, textiles, branding, and product shells.",
        "eyebrow": "S/S 2026 · Color authority blend",
        "headline": "Biophilic Luxe + Sun-Baked New Neutrals forecast",
        "stats": [
          {
            "label": "contrast-safe pairings",
            "value": "18"
          },
          {
            "label": "accent coverage",
            "value": "7%"
          },
          {
            "label": "source confidence",
            "value": "92"
          }
        ]
      }
    },
    {
      "avoid": [
        "unstyled browser controls",
        "glossy gradient panel",
        "loose alignment"
      ],
      "composition": "Aubergine editor well beside chalk form cards, switch, slider, select, textarea, and clipped sample labels.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input blue ring",
        "mineral switch on",
        "copper slider thumb"
      ],
      "name": "Finish detail editor",
      "primitives": [
        "input",
        "textarea",
        "select",
        "switch",
        "slider",
        "dialog",
        "sheet",
        "button",
        "card"
      ],
      "scene": {
        "actions": [
          "Save finish",
          "Preview dialog"
        ],
        "description": "A compact editorial form for validating finish, durability, channel, and launch story.",
        "eyebrow": "Material studio",
        "fields": [
          {
            "label": "Finish note",
            "value": "Oxidized copper embroidery"
          },
          {
            "label": "Channel",
            "value": "Hospitality textiles"
          },
          {
            "label": "Risk memo",
            "value": "Keep electric accents under ten percent."
          }
        ],
        "headline": "Tune oxidized copper embroidery against oat plaster grounds"
      }
    },
    {
      "avoid": [
        "generic admin gray",
        "oversized rounded pills",
        "empty lorem rows"
      ],
      "composition": "Dense ruled rows with cocoa dividers, tiny badges, dropdown actions, and tooltip annotation pips.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row checkbox",
        "lavender evidence badge",
        "hover menu pip"
      ],
      "name": "Evidence operations table",
      "primitives": [
        "table",
        "badge",
        "checkbox",
        "dropdown-menu",
        "tooltip",
        "tabs",
        "separator",
        "button"
      ],
      "scene": {
        "actions": [
          "Export rows",
          "Assign reviewer"
        ],
        "description": "Operational view for trend editors moving samples from source review to production guidance.",
        "eyebrow": "Evidence queue",
        "headline": "Route palette proofs by market, confidence, and material fit",
        "rows": [
          {
            "confidence": "High",
            "market": "Interior",
            "status": "approved"
          },
          {
            "confidence": "Medium",
            "market": "Textile",
            "status": "needs proof"
          },
          {
            "confidence": "High",
            "market": "Branding",
            "status": "ready"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "electric-blue",
      "digital-lavender",
      "butter-yellow"
    ],
    "border": "graphite-outline-copper-rule",
    "contour": "clipped-tab-rectangular",
    "density": "balanced-dense",
    "family": "material-forecast",
    "grain": true,
    "material": "matte-clay-mineral",
    "motion": "material-lift",
    "stickerBadges": true,
    "underlay": true
  }
}