Forecast Token Atlas 2026

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

:root {
  --background: #F7F1E7;
  --foreground: #182322;
  --card: #FFF9EF;
  --card-foreground: #182322;
  --popover: #FFF9EF;
  --popover-foreground: #182322;
  --primary: #0D6F73;
  --primary-foreground: #ffffff;
  --secondary: #7B4E5E;
  --secondary-foreground: #ffffff;
  --muted: #7C8179;
  --muted-foreground: #182322;
  --accent: #F0B84A;
  --accent-foreground: #ffffff;
  --destructive: #B9473F;
  --border: #D9CDBB;
  --input: #D9CDBB;
  --ring: #F0B84A;
  --chart-1: #0D6F73;
  --chart-2: #7B4E5E;
  --chart-3: #F0B84A;
  --chart-4: #2F7D5B;
  --chart-5: #B87916;
  --sidebar: #FFF9EF;
  --sidebar-foreground: #182322;
  --sidebar-primary: #0D6F73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2F6D9C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D9CDBB;
  --sidebar-ring: #F0B84A;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0D6F73;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #F0B84A;
  --accent-foreground: #ffffff;
  --destructive: #B9473F;
  --border: #303642;
  --input: #303642;
  --ring: #F0B84A;
  --chart-1: #0D6F73;
  --chart-2: #7B4E5E;
  --chart-3: #F0B84A;
  --chart-4: #2F7D5B;
  --chart-5: #B87916;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0D6F73;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #F0B84A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #F0B84A;
  --radius: 18px;
}

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 ForecastTokenAtlas2026ShadcnKit() {
  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">Forecast Token Atlas 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": "forecast-token-atlas-2026",
  "type": "registry:theme",
  "title": "Forecast Token Atlas 2026 shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F1E7",
      "foreground": "#182322",
      "card": "#FFF9EF",
      "card-foreground": "#182322",
      "popover": "#FFF9EF",
      "popover-foreground": "#182322",
      "primary": "#0D6F73",
      "primary-foreground": "#ffffff",
      "secondary": "#7B4E5E",
      "secondary-foreground": "#ffffff",
      "muted": "#7C8179",
      "muted-foreground": "#182322",
      "accent": "#F0B84A",
      "accent-foreground": "#ffffff",
      "destructive": "#B9473F",
      "border": "#D9CDBB",
      "input": "#D9CDBB",
      "ring": "#F0B84A",
      "chart-1": "#0D6F73",
      "chart-2": "#7B4E5E",
      "chart-3": "#F0B84A",
      "chart-4": "#2F7D5B",
      "chart-5": "#B87916",
      "sidebar": "#FFF9EF",
      "sidebar-foreground": "#182322",
      "sidebar-primary": "#0D6F73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F6D9C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D9CDBB",
      "sidebar-ring": "#F0B84A",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0D6F73",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F0B84A",
      "accent-foreground": "#ffffff",
      "destructive": "#B9473F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F0B84A",
      "chart-1": "#0D6F73",
      "chart-2": "#7B4E5E",
      "chart-3": "#F0B84A",
      "chart-4": "#2F7D5B",
      "chart-5": "#B87916",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0D6F73",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F0B84A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F0B84A",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a4-960f-7e70-bd24-cbba3963fbcd",
    "slug": "forecast-token-atlas-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"
      ],
      "palette_architecture": [
        "dark_theme",
        "hero_hue",
        "light_theme",
        "support_accents",
        "surface_neutrals"
      ],
      "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"
      ]
    }
  }
}

# shadcn/ui Components — Forecast Token Atlas 2026

Author: `katagami-agent`

## ShadSync visual profile
- Family: forecast-token-atlas
- Material: warm parchment software surfaces carrying fashion/interior forecast color as semantic product tokens.
- Shape scale: cards/containers `28px`, controls `18px`, badges and primary pills `9999px`.
- Borders: 1px mushroom dividers with selective plum or teal rails; no novelty shape mixing.
- Motion: 180ms ease-out lift, focus-ring glow, and subtle tonal-ramp reveal.

## Signature component recipes
### button
Use rounded-full teal primary buttons with white text, butter secondary pills with deep teal text, and clay destructive buttons only for destructive intent. Add a 2px translateY lift on hover.
### card
Use parchment surfaces, 1px mushroom border, 28px radius, soft warm shadow, and optional 3px semantic rail in teal/plum/butter.
### input
Use warm ivory fields, 10px radius, mushroom border, deep teal focus ring, mono helper text, and never use pastel text-on-pastel combinations.
### textarea
Match input styling with generous line height and a plum character-count rail for editorial notes.
### select
Use the input field treatment; menu surface is parchment with teal selected state and butter hover state.
### dialog
Deep teal header band, parchment body, plum divider, rounded large shell, and explicit footer actions.
### sheet
Use a side panel as a material sample drawer with teal title band, parchment body, and status chips.
### tabs
Use pill tabs on mushroom rail; active tab uses teal fill and inactive tabs use transparent parchment.
### badge
Use uppercase mono labels. Status badges use semantic hues; trend-token badges may use butter/plum but must include text labels.
### separator
Use mushroom separators; use plum separators only for section changes.
### checkbox
Rounded-sm box with teal fill and clear label; support indeterminate for token review states.
### switch
Teal on-state, mushroom off-state, pill contour; include visible label and state copy.
### slider
Teal track with butter thumb for forecast intensity or confidence controls.
### tooltip
Deep teal bubble, parchment text, small radius, short explanatory copy.
### dropdown-menu
Parchment menu, mushroom border, teal selected row, mono shortcut labels.
### table
Compact warm rows, sticky parchment header, mono token codes, semantic badges, and teal focus row.

## Preview shots
- `application-shell`: navigation, hero token atlas, semantic cards, and ramp chips.
- `detail-editor`: palette-token editor with fields, preview cards, dialog/sheet controls, and validation states.
- `data-operations`: operational table, filters, sliders, switches, and status workflows.

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

export function ForecastTokenCard() {
  return (
    <Card className="rounded-[28px] border-[#CFC3AA] bg-[#F6EEDC] shadow-[0_16px_40px_rgba(20,40,38,0.12)]">
      <CardHeader className="border-l-4 border-[#0F5F5C]">
        <Badge className="w-fit rounded-full bg-[#F2D06B] font-mono text-[#14312F]">FORECAST TOKEN</Badge>
        <CardTitle className="font-serif text-[#14312F]">Teal becomes the product anchor</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Semantic role" className="rounded-[10px] border-[#CFC3AA] bg-[#FFF9EA] focus-visible:ring-[#0F5F5C]" />
        <Button className="rounded-full bg-[#0F5F5C] text-white hover:-translate-y-0.5">Apply palette role</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use rounded-full teal primary buttons with white text, butter secondary pills with deep teal text, and clay destructive buttons only for destructive intent. Add a 2px translateY lift on hover.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "card",
      "recipe": "Use parchment surfaces, 1px mushroom border, 28px radius, soft warm shadow, and optional 3px semantic rail in teal/plum/butter.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "input",
      "recipe": "Use warm ivory fields, 10px radius, mushroom border, deep teal focus ring, mono helper text, and never use pastel text-on-pastel combinations.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "textarea",
      "recipe": "Match input styling with generous line height and a plum character-count rail for editorial notes.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "select",
      "recipe": "Use the input field treatment; menu surface is parchment with teal selected state and butter hover state.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "dialog",
      "recipe": "Deep teal header band, parchment body, plum divider, rounded large shell, and explicit footer actions.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "sheet",
      "recipe": "Use a side panel as a material sample drawer with teal title band, parchment body, and status chips.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "tabs",
      "recipe": "Use pill tabs on mushroom rail; active tab uses teal fill and inactive tabs use transparent parchment.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "badge",
      "recipe": "Use uppercase mono labels. Status badges use semantic hues; trend-token badges may use butter/plum but must include text labels.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "separator",
      "recipe": "Use mushroom separators; use plum separators only for section changes.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "checkbox",
      "recipe": "Rounded-sm box with teal fill and clear label; support indeterminate for token review states.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "switch",
      "recipe": "Teal on-state, mushroom off-state, pill contour; include visible label and state copy.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "slider",
      "recipe": "Teal track with butter thumb for forecast intensity or confidence controls.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "tooltip",
      "recipe": "Deep teal bubble, parchment text, small radius, short explanatory copy.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "dropdown-menu",
      "recipe": "Parchment menu, mushroom border, teal selected row, mono shortcut labels.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    },
    {
      "component": "table",
      "recipe": "Compact warm rows, sticky parchment header, mono token codes, semantic badges, and teal focus row.",
      "shapeScale": {
        "containers": "28px",
        "controls": "18px",
        "pills": "9999px"
      },
      "tokens": [
        "primary",
        "surface",
        "border",
        "accent"
      ]
    }
  ],
  "components": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "Open token atlas",
          "Export shadcn theme"
        ],
        "description": "A teal navigation rail, parchment hero cards, plum dividers, and butter action chips organize forecast color into usable interface semantics.",
        "eyebrow": "2026 Forecast System",
        "headline": "Translate trend hues into product roles",
        "stats": [
          {
            "label": "Semantic hues",
            "value": "12"
          },
          {
            "label": "Contrast checks",
            "value": "AA+"
          },
          {
            "label": "Ramp steps",
            "value": "9"
          }
        ]
      },
      "title": "Forecast Atlas Shell"
    },
    {
      "components": [
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save token role",
          "Preview dark theme"
        ],
        "description": "Editors map a forecast swatch to UI role, confidence, accessibility state, and launch context inside calm warm-neutral controls.",
        "eyebrow": "Token Detail",
        "fields": [
          {
            "label": "Token name",
            "value": "Primary / Deep Teal"
          },
          {
            "label": "Forecast source",
            "value": "Interior-product color report"
          },
          {
            "label": "Confidence",
            "value": "82%"
          },
          {
            "label": "Accessible on parchment",
            "value": "Pass"
          }
        ],
        "headline": "Assign a hue before it becomes decoration"
      },
      "title": "Palette Token Detail Editor"
    },
    {
      "components": [
        "table",
        "dropdown-menu",
        "select",
        "slider",
        "switch",
        "badge",
        "separator",
        "button",
        "card"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "Filter risky tokens",
          "Publish palette"
        ],
        "description": "A compact data screen tracks token usage, status, contrast, exports, and dark-theme readiness with semantic badges instead of loose swatches.",
        "eyebrow": "Operations",
        "headline": "Govern color systems like product infrastructure",
        "rows": [
          {
            "hex": "#0D6F73",
            "role": "action/navigation",
            "status": "approved",
            "token": "primary"
          },
          {
            "hex": "#F0B84A",
            "role": "attention",
            "status": "needs review",
            "token": "accent"
          },
          {
            "hex": "#B9473F",
            "role": "destructive",
            "status": "approved",
            "token": "error"
          }
        ]
      },
      "title": "Semantic Palette Operations"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "deep teal primary anchors",
      "butter attention pills",
      "plum dividers",
      "coral destructive/status hints"
    ],
    "border": "1px mushroom borders with plum or teal semantic rails",
    "contour": "large-rounded-rectangles with pill controls",
    "density": "balanced-data-product",
    "family": "forecast-token-atlas",
    "grain": true,
    "material": "warm-parchment-interface with fashion-forecast color chips",
    "motion": "calm 180ms lift-and-fade",
    "stickerBadges": true,
    "underlay": true
  }
}