Biophilic Luxe + Sun-Baked New Neutrals 2026

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

:root {
  --background: #E8DDC7;
  --foreground: #191716;
  --card: #F7F2E8;
  --card-foreground: #191716;
  --popover: #F7F2E8;
  --popover-foreground: #191716;
  --primary: #1F6F68;
  --primary-foreground: #ffffff;
  --secondary: #8A4F35;
  --secondary-foreground: #ffffff;
  --muted: #6E6257;
  --muted-foreground: #191716;
  --accent: #2F6FFF;
  --accent-foreground: #ffffff;
  --destructive: #9B3D35;
  --border: #3B3835;
  --input: #3B3835;
  --ring: #2F6FFF;
  --chart-1: #1F6F68;
  --chart-2: #8A4F35;
  --chart-3: #2F6FFF;
  --chart-4: #4D6F45;
  --chart-5: #D7B75A;
  --sidebar: #F7F2E8;
  --sidebar-foreground: #191716;
  --sidebar-primary: #1F6F68;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #A99DCE;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #3B3835;
  --sidebar-ring: #2F6FFF;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F6F68;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2F6FFF;
  --accent-foreground: #ffffff;
  --destructive: #9B3D35;
  --border: #303642;
  --input: #303642;
  --ring: #2F6FFF;
  --chart-1: #1F6F68;
  --chart-2: #8A4F35;
  --chart-3: #2F6FFF;
  --chart-4: #4D6F45;
  --chart-5: #D7B75A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F6F68;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2F6FFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2F6FFF;
  --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 BiophilicLuxeSunBakedNewNeutrals2026ShadcnKit() {
  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">Biophilic Luxe + Sun-Baked New Neutrals 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": "biophilic-luxe-sun-baked-new-neutrals-2026",
  "type": "registry:theme",
  "title": "Biophilic Luxe + Sun-Baked New Neutrals 2026 shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E8DDC7",
      "foreground": "#191716",
      "card": "#F7F2E8",
      "card-foreground": "#191716",
      "popover": "#F7F2E8",
      "popover-foreground": "#191716",
      "primary": "#1F6F68",
      "primary-foreground": "#ffffff",
      "secondary": "#8A4F35",
      "secondary-foreground": "#ffffff",
      "muted": "#6E6257",
      "muted-foreground": "#191716",
      "accent": "#2F6FFF",
      "accent-foreground": "#ffffff",
      "destructive": "#9B3D35",
      "border": "#3B3835",
      "input": "#3B3835",
      "ring": "#2F6FFF",
      "chart-1": "#1F6F68",
      "chart-2": "#8A4F35",
      "chart-3": "#2F6FFF",
      "chart-4": "#4D6F45",
      "chart-5": "#D7B75A",
      "sidebar": "#F7F2E8",
      "sidebar-foreground": "#191716",
      "sidebar-primary": "#1F6F68",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#A99DCE",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3B3835",
      "sidebar-ring": "#2F6FFF",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F6F68",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2F6FFF",
      "accent-foreground": "#ffffff",
      "destructive": "#9B3D35",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2F6FFF",
      "chart-1": "#1F6F68",
      "chart-2": "#8A4F35",
      "chart-3": "#2F6FFF",
      "chart-4": "#4D6F45",
      "chart-5": "#D7B75A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F6F68",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F6FFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2F6FFF",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb43e-fcc4-7c01-af58-652e86815a13",
    "slug": "biophilic-luxe-sun-baked-new-neutrals-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"
      ]
    }
  }
}

# shadcn/ui Components — Biophilic Luxe + Sun-Baked New Neutrals 2026

Author: `katagami-agent`

## ShadSync visual profile
Family: material-rich biophilic product board. Material: matte oat/chalk surfaces, cocoa cards, warm clay slabs, mineral green controls, oxidized copper rules, graphite hairlines, aubergine depth, woven grain, and botanical contour overlays. Border: 1px graphite with copper inset ticks; focus uses transformative teal or electric blue. Density: medium-rich with generous gutters and compact ledger labels. Motion: 180ms restrained 2px material lifts and copper glints.

## Signature component recipes
### button
Use Button with mineral-green primary background, chalk text, 14px radius, 1px graphite border, copper inner shadow, and electric-blue only for selected/active micro actions. Hover lifts 2px without bounce.

### card
Use Card as chalk or cocoa material panels with graphite hairline border, oxidized-copper inset rule, rounded 28px hero corners, clipped corner label, subtle woven grain pseudo-element, and aubergine depth slab behind feature cards.

### input
Use Input with chalk surface, graphite text, cocoa placeholder, 14px radius, 1px graphite border, and teal focus ring. Prefix material labels can use JetBrains Mono swatch chips.

### textarea
Use Textarea for editorial notes with oat background, copper left rule, botanical contour watermark at low opacity, and teal focus stroke.

### select
Use Select trigger as compact catalogue control with chalk surface, graphite/copper double rule, mono selected value, and teal focus ring.

### dialog
Use Dialog over smoky aubergine overlay, cocoa content card, chalk header panel, copper divider, and restrained 180ms fade/2px rise.

### sheet
Use Sheet as side material drawer with oat-beige field, graphite vertical border, copper ticks, swatch ledger header, and compact Afacad labels.

### tabs
Use Tabs as ledger strips: inactive oat/cocoa pills, active mineral green or electric-blue underline, graphite separator, and no rainbow tab wall.

### badge
Use Badge for material status with full pill radius, mono labels, copper/chalk outlines, and small butter-yellow/info accents only for semantic states.

### separator
Use Separator as graphite hairline with intermittent oxidized-copper registration marks and enough whitespace around board sections.

### checkbox
Use Checkbox with chalk box, graphite border, mineral-green fill when checked, teal focus halo, and copper checkmark accent.

### switch
Use Switch with oat track, graphite outline, mineral-green checked state, clay unchecked state, and small copper glint on thumb.

### slider
Use Slider with graphite rail, mineral-green filled range, electric-blue active thumb, copper tick marks, and no neon gradient rail.

### tooltip
Use Tooltip as compact cocoa label with chalk text, mono metadata, small copper arrow, and 180ms fade only.

### dropdown-menu
Use DropdownMenu as chalk catalogue menu with graphite border, copper section dividers, teal focus item, and mono keyboard hints.

### table
Use Table as swatch ledger: chalk rows, oat zebra fields, graphite hairlines, copper vertical dividers, mono numeric cells, and mineral-green selected row state.

## Preview shots
- `application-shell`: split hero/product operations board with aubergine depth slab, chalk/cocoa cards, mineral-green navigation, swatch ledger, and electric-blue active action.
- `detail-editor`: catalogue editor for materials with inputs, textarea, select, dialog/sheet affordances, botanical contour underlay, and copper field rules.
- `data-operations`: table analytics and controls using shadcn tabs, slider, switch, dropdown, tooltip, semantic badges, and calibrated accent sparks.

## 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 MaterialLedgerPanel() {
  return (
    <Card className="relative overflow-hidden rounded-[28px] border border-[#3B3835] bg-[#F7F2E8] shadow-[0_18px_42px_rgba(25,23,22,.22)] before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_20%_10%,rgba(138,79,53,.18),transparent_40%)] before:opacity-70">
      <CardHeader className="border-b border-[#3B3835]/70 shadow-[inset_0_-2px_0_#A7653F]">
        <Badge className="w-fit rounded-full border border-[#3B3835] bg-[#E8DDC7] font-mono text-[#191716]">oxidized copper rule</Badge>
        <CardTitle className="font-serif text-3xl text-[#191716]">Sun-baked material ledger</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-6">
        <Input className="rounded-[14px] border-[#3B3835] bg-[#F7F2E8] focus-visible:ring-[#1F6F68]" placeholder="Clay, cocoa, mineral green" />
        <Tabs defaultValue="terrain"><TabsList className="bg-[#E8DDC7]"><TabsTrigger value="terrain">Terrain</TabsTrigger><TabsTrigger value="ledger">Ledger</TabsTrigger></TabsList></Tabs>
        <Button className="rounded-[14px] border border-[#3B3835] bg-[#1F6F68] text-[#F7F2E8] shadow-[inset_0_0_0_2px_rgba(167,101,63,.45)] hover:-translate-y-0.5">Apply palette</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019eb43e-fcc4-7c01-af58-652e86815a13",
    "name": "Biophilic Luxe + Sun-Baked New Neutrals 2026",
    "slug": "biophilic-luxe-sun-baked-new-neutrals-2026"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Layer a chalk-to-oat radial background with large warm-clay and mineral-green panels separated by graphite hairline borders for immediate material contrast.",
    "Use cocoa brown elevated cards with oxidized-copper inset rules and soft silver top glints to make digital surfaces read like finished product materials.",
    "Place smoky aubergine feature blocks behind hero content as deep romantic shadows, then cut them with small electric-blue and transformative-teal action accents.",
    "Apply woven textile micro-grain, terracotta diagonal washes, and botanical contour lines as CSS pseudo-element overlays instead of flat solid fills.",
    "Use oversized editorial headings in a condensed serif paired with a compact grotesk body to echo fashion lookbooks and contemporary product catalogues."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "still",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Biophilic Luxe + Sun-Baked New Neutrals 2026 launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Pair warm clay or cocoa with chalk white and graphite text before adding mineral green so contrast stays crisp.",
      "Use teal, electric blue, digital lavender, butter yellow, or muted coral as small accents anchored to functional states.",
      "Add grain, contour lines, copper rules, and material labels to make the palette feel tactile across interiors, textiles, branding, and products.",
      "Keep aubergine and plum as depth colors for romantic contrast rather than covering every surface."
    ],
    "dont": [
      "Do not blend brown, green, and plum into low-value muddy fields without chalk or oat relief.",
      "Do not turn the palette into a rainbow trend board; every accent needs a role and hierarchy.",
      "Do not rely on generic pastel gradients, glossy cyberpunk blues, or millennial-pink softness as the core mood."
    ]
  }
}