Ambient Forecast Palette System 2026

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

:root {
  --background: #F3EDE3;
  --foreground: #24201B;
  --card: #FFFBF4;
  --card-foreground: #24201B;
  --popover: #FFFBF4;
  --popover-foreground: #24201B;
  --primary: #4E4B8F;
  --primary-foreground: #ffffff;
  --secondary: #8B6F5C;
  --secondary-foreground: #ffffff;
  --muted: #7A7066;
  --muted-foreground: #24201B;
  --accent: #8E6FD6;
  --accent-foreground: #ffffff;
  --destructive: #B34743;
  --border: #D8CBBB;
  --input: #D8CBBB;
  --ring: #8E6FD6;
  --chart-1: #4E4B8F;
  --chart-2: #8B6F5C;
  --chart-3: #8E6FD6;
  --chart-4: #4F7A5A;
  --chart-5: #B8842F;
  --sidebar: #FFFBF4;
  --sidebar-foreground: #24201B;
  --sidebar-primary: #4E4B8F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #456E8F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8CBBB;
  --sidebar-ring: #8E6FD6;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #4E4B8F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #8E6FD6;
  --accent-foreground: #ffffff;
  --destructive: #B34743;
  --border: #303642;
  --input: #303642;
  --ring: #8E6FD6;
  --chart-1: #4E4B8F;
  --chart-2: #8B6F5C;
  --chart-3: #8E6FD6;
  --chart-4: #4F7A5A;
  --chart-5: #B8842F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #4E4B8F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #8E6FD6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #8E6FD6;
  --radius: 16px;
}

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 AmbientForecastPaletteSystem2026ShadcnKit() {
  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">Ambient Forecast Palette System 2026</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": "ambient-forecast-palette-system-2026",
  "type": "registry:theme",
  "title": "Ambient Forecast Palette System 2026 shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F3EDE3",
      "foreground": "#24201B",
      "card": "#FFFBF4",
      "card-foreground": "#24201B",
      "popover": "#FFFBF4",
      "popover-foreground": "#24201B",
      "primary": "#4E4B8F",
      "primary-foreground": "#ffffff",
      "secondary": "#8B6F5C",
      "secondary-foreground": "#ffffff",
      "muted": "#7A7066",
      "muted-foreground": "#24201B",
      "accent": "#8E6FD6",
      "accent-foreground": "#ffffff",
      "destructive": "#B34743",
      "border": "#D8CBBB",
      "input": "#D8CBBB",
      "ring": "#8E6FD6",
      "chart-1": "#4E4B8F",
      "chart-2": "#8B6F5C",
      "chart-3": "#8E6FD6",
      "chart-4": "#4F7A5A",
      "chart-5": "#B8842F",
      "sidebar": "#FFFBF4",
      "sidebar-foreground": "#24201B",
      "sidebar-primary": "#4E4B8F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#456E8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8CBBB",
      "sidebar-ring": "#8E6FD6",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#4E4B8F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#8E6FD6",
      "accent-foreground": "#ffffff",
      "destructive": "#B34743",
      "border": "#303642",
      "input": "#303642",
      "ring": "#8E6FD6",
      "chart-1": "#4E4B8F",
      "chart-2": "#8B6F5C",
      "chart-3": "#8E6FD6",
      "chart-4": "#4F7A5A",
      "chart-5": "#B8842F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#4E4B8F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8E6FD6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#8E6FD6",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-cada-7423-aa8a-23d91ced1559",
    "slug": "ambient-forecast-palette-system-2026",
    "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"
      ]
    }
  }
}

# Ambient Forecast Palette System 2026 shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate 2026 interiors-driven forecast color into shadcn/ui screens: matte plaster neutrals, cream product panels, umber borders, and one contained Future Dusk blue-violet accent family.

## 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 `#F3EDE3`, card `#FFFBF4`, foreground `#24201B`, muted `#7A7066`, border `#D8CBBB`, primary `#4E4B8F`, accent `#8E6FD6`, destructive `#B34743`, success `#4F7A5A`, warning `#B8842F`, and info `#456E8F`. Use Fraunces for display headings, Instrument Sans for UI, IBM Plex Mono for token labels.

## Visual character to preserve
- Warm plaster app canvas with low-opacity mineral radial gradients.
- 28px product-scale cards and sheets with 1px umber borders and inset cream highlights.
- 3px blue-violet active rails and focus blooms only for current state and primary action.
- Material-chip swatches with hex labels, semantic role badges, and contrast notes.

## ShadSync visual profile
family: ambient-forecast; material: matte-plaster-product-panel; contour: rounded-product-rectangle; border: translucent-umber-with-violet-active-rail; underlay: radial-mineral-halo; grain: subtle; stickerBadges: restrained-outline; motion: material-lift-fade; density: balanced; accents: future-dusk-blue-violet.

## Signature component recipes
- button: primary is Future Dusk fill, 14px radius, slight lift on hover; secondary is cream fill with umber border.
- card: use 28px radius, cream background, 1px warm border, inset top highlight, and optional violet rail for active cards.
- input: cream field, 12px radius, 1px border, violet 4px focus halo; textarea follows the same but with comfortable line-height.
- select: same as input with muted placeholder and violet focus ring; avoid native arrow styling drift.
- dialog: large rounded cream product panel over warm dim overlay; one violet rail on the content edge.
- sheet: cream panel with plaster underlay, umber border, calm spacing, and no glass blur.
- tabs: pill list where active tab uses pale violet fill and inset bottom accent line.
- badge: outline by default; semantic colors remain small, never large filled banners.
- separator: 1px translucent umber line, never stark gray.
- checkbox: 12px rounded square; checked state fills Future Dusk with cream tick.
- switch: neutral track, Future Dusk thumb/track in checked state, 180ms material fade.
- slider: mushroom track with Future Dusk active range and rounded thumb.
- tooltip: night violet surface, cream text, small radius, no neon glow.
- dropdown-menu: cream surface, rounded 16px, warm border, active item with violet left rail.
- table: warm row separators, mono token cells, semantic badges for status, violet only on selected row rail.

## Preview shots
application-shell shows the forecast dashboard; detail-editor shows palette editing fields; data-operations shows token table, filtering, and dropdown states.

## Implementation contract
Import local primitives from `@/components/ui/*` instead of inventing a second component system. Preserve radius scale: cards/sheets 28px, controls 12-14px, badges full pill. Keep accent under 12% of viewport area.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"

export function ForecastPaletteCard() {
  return (
    <Card className="rounded-[28px] border-[#D8CBBB] bg-[#FFFBF4] shadow-[inset_0_1px_0_rgba(255,255,255,.75)]">
      <CardHeader className="border-l-[3px] border-l-[#8E6FD6]">
        <Badge variant="outline" className="w-fit border-[#4E4B8F] text-[#4E4B8F]">2026 forecast</Badge>
        <CardTitle className="font-serif text-3xl text-[#24201B]">Future Dusk accent family</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-[12px] border-[#D8CBBB] bg-[#FFFBF4] focus-visible:ring-[#8E6FD6]/25" defaultValue="#4E4B8F" />
        <Button className="rounded-[14px] bg-[#4E4B8F] text-white hover:bg-[#45417f]">Apply tokens</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "card",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "input",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "textarea",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "select",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "dialog",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "sheet",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "tabs",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "badge",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "separator",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "checkbox",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "switch",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "slider",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "tooltip",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    },
    {
      "component": "table",
      "recipe": "Use warm cream surfaces, umber borders, rounded product geometry, violet only for focus, active, selected, or primary states."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "full-screen violet fills",
        "generic gray cards"
      ],
      "composition": "Sidebar, forecast hero, token chip cards, and theme mapping tiles on plaster canvas.",
      "id": "application-shell",
      "mustShowStates": [
        "active violet rail",
        "primary button",
        "outline semantic badges",
        "hoverable menu trigger"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Generate theme tokens",
          "Audit contrast"
        ],
        "description": "Warm interiors-led neutrals with one Future Dusk action family.",
        "eyebrow": "2026 Color Forecast",
        "headline": "Ambient palette operating system",
        "stats": [
          {
            "label": "neutral tokens",
            "value": "08"
          },
          {
            "label": "accent family",
            "value": "01"
          },
          {
            "label": "AA targets",
            "value": "12"
          }
        ]
      }
    },
    {
      "avoid": [
        "browser default controls",
        "over-saturated semantic blocks"
      ],
      "composition": "Palette detail editor in a rounded cream sheet with focus-ring examples and compact controls.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input violet halo",
        "checked switch",
        "slider active range",
        "dialog confirmation"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "switch",
        "slider",
        "checkbox",
        "dialog",
        "sheet",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save palette",
          "Open preview"
        ],
        "description": "Edit surface, border, and accent tokens with accessibility notes.",
        "eyebrow": "Palette Editor",
        "fields": [
          {
            "label": "Primary",
            "value": "#4E4B8F"
          },
          {
            "label": "Surface",
            "value": "#FFFBF4"
          },
          {
            "label": "Contrast note",
            "value": "Use muted text only above AA."
          }
        ],
        "headline": "Tune material color roles"
      }
    },
    {
      "avoid": [
        "inventory wall",
        "unlabeled swatches"
      ],
      "composition": "Operational token table with semantic status badges, selected row rail, and dropdown filter.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row rail",
        "warning badge",
        "success badge",
        "dropdown menu"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "badge",
        "separator",
        "tabs",
        "button",
        "card",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export JSON",
          "Filter roles"
        ],
        "description": "Review light, dim, and dark mappings for product teams.",
        "eyebrow": "Token Operations",
        "headline": "Accessible theme mapping",
        "rows": [
          {
            "hex": "#4E4B8F",
            "status": "AA pass",
            "token": "primary.700"
          },
          {
            "hex": "#B8842F",
            "status": "badge only",
            "token": "warning.600"
          },
          {
            "hex": "#FFFBF4",
            "status": "base",
            "token": "surface.0"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": "future-dusk blue-violet",
    "border": "translucent umber with violet active rail",
    "contour": "rounded-product-rectangle",
    "density": "balanced",
    "family": "ambient-forecast",
    "grain": true,
    "material": "matte plaster and product panel",
    "motion": "material-lift-fade",
    "stickerBadges": "restrained-outline",
    "underlay": true
  }
}