A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Stage one object at a time on a lit shelf-row against a dark cabinet ground; frame it with a caliper spec-rail and a stock fill gauge; dock the primary acquisition where the hand expects it. Vertical stacked shelf rhythm, not an asymmetric offset commerce grid.
Large Bricolage display type and the lit object first, then a single citrus control for the next purchase action, with deep teal reserved for assurance and confidence.
Low-density dark surfaces with compact mono high-information islands for price, stock, and spec figures; the largest whitespace gap is dramatically larger than form gaps.
Caliper spec-rail (citrus-tipped measured rail with mono callouts); stock fill gauge (jade-to-citrus bar filling toward the light); lit shelf-row (surface-to-shelf gradient panel with a citrus underline-of-light); docked acquisition (the one citrus-lit control); small square caliper-edged option chips.
Contained editorial column (max 1240px) with vertically stacked lit shelf-rows and section bands; product detail uses a two-column object + spec/dock split that collapses to one column.
Large quiet dark margins frame the lit object; internal control groups use 6-18px gaps while hero and section gaps expand to 72-112px.
airy dark stage with compact mono high-information islands for price/stock/spec
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the object and dock first; contained content capped and centred on ultra-wide, only the hero spans 100vw.
vitrine-studio
One dominant object floated and lit on a dark seamless cabinet stage with a citrus halo of backlight and a cool teal reflection beneath — the Vitrine Studio technique applied against a dark ground rather than white.
Full-bleed hero with the object lit center-frame; feature panels crop tighter with a reduced halo; never a room, scene, horizon, or multiple competing objects.
# Plinth ## Philosophy Display-case commerce: a storefront that behaves like a lit vitrine after hours. One object at a time floats on an illuminated shelf against a deep teal-charcoal ground, measured on a caliper spec-rail, with the buy docked where your hand expects it. Citrus is the light that marks purchase; deep teal is the trust that stays. ### Values - one object under one light - measured, not marketed — figures on a rail - citrus as purchase energy, never decoration - deep teal as durable assurance - dark cabinet ground, never white ### Anti-Values - white product-stage default - rainbow promotional grids - a wall of identical product cards - a third vivid hue creeping in - marketing copy where a measured figure belongs ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#0E1614` | | surface | `#16211E` | | recess | `#0A100E` | | shelf | `#1E2D29` | | text | `#EDF2EF` | | muted | `#8FA39C` | | border | `#2A3A35` | | accent | `#D7FF4A` | | accent_dim | `#A7C92F` | | on_accent | `#0B140C` | | jade | `#34C9B4` | | teal_deep | `#0E5F58` | | success | `#34C9B4` | | warning | `#E8B53A` | | error | `#FF6B5E` | | info | `#34C9B4` | ### Typography - **Base Size**: 17px - **Body Font**: Geist - **Heading Font**: Bricolage Grotesque - **Mono Font**: Geist Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.03em - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap ### Radii - **Sm**: 4px - **Md**: 18px - **Lg**: 28px - **Full**: 9999px - **None**: 0 ### Shadows - **Sm**: 0 1px 0 rgba(237,242,239,.05) - **Md**: 0 18px 44px rgba(0,0,0,.5) - **Lg**: 0 26px 60px rgba(0,0,0,.55) - **Glow**: 0 0 48px -8px rgba(215,255,74,.45) ### Spacing - **Base**: 6px - **Scale**: [6,12,18,28,44,72,112] ### Surfaces - **Bg Pattern**: none; dark teal-charcoal cabinet interior, objects lit on surface-to-shelf gradient panels with a citrus underline-of-light at the bottom edge; no dot, grid, stripe, or paper texture - **Card Style**: matte dark shelf-gradient panels, no borders, deep cabinet drop shadow, optional citrus light-underline; spec rows grouped by cool hairlines not a card per item; radii 18px cards / 28px panels - **Treatment**: lit display case — one citrus halo of light behind the staged object and on the one primary control; deep teal seals assurance ### Borders - **Default Width**: 1px - **Accent Width**: 1px - **Style**: solid - **Character**: cool teal-charcoal hairlines for structure (the grouping dividers); citrus only on focus rings and the selected chip edge, never as a decorative side stripe ### Motion - **Duration**: 200ms - **Easing**: cubic-bezier(.2,.8,.2,1) - **Philosophy**: the settled fully-rendered page is the default and visible with no JS; sections lift in on scroll, the primary control lifts 2px on hover, gauges fill toward the light; respects prefers-reduced-motion ## Rules ### Composition Stage one object at a time on a lit shelf-row against a dark cabinet ground; frame it with a caliper spec-rail and a stock fill gauge; dock the primary acquisition where the hand expects it. Vertical stacked shelf rhythm, not an asymmetric offset commerce grid. ### Hierarchy Large Bricolage display type and the lit object first, then a single citrus control for the next purchase action, with deep teal reserved for assurance and confidence. ### Density Low-density dark surfaces with compact mono high-information islands for price, stock, and spec figures; the largest whitespace gap is dramatically larger than form gaps. ### Signature Caliper spec-rail (citrus-tipped measured rail with mono callouts); stock fill gauge (jade-to-citrus bar filling toward the light); lit shelf-row (surface-to-shelf gradient panel with a citrus underline-of-light); docked acquisition (the one citrus-lit control); small square caliper-edged option chips. ## Layout ### Grid Contained editorial column (max 1240px) with vertically stacked lit shelf-rows and section bands; product detail uses a two-column object + spec/dock split that collapses to one column. ### Whitespace Large quiet dark margins frame the lit object; internal control groups use 6-18px gaps while hero and section gaps expand to 72-112px. ### Density airy dark stage with compact mono high-information islands for price/stock/spec ### Responsive Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the object and dock first; contained content capped and centred on ultra-wide, only the hero spans 100vw. ### Breakpoints - **Mobile**: 390px - **Tablet**: 768px - **Desktop**: 1440px - **Reflow**: 900px and 560px ## Guidance ### Do - Keep the ground the dark teal-charcoal cabinet; let one object be lit at a time. - Use citrus only for purchase intent, selected state, and focus; hang figures on the caliper rail. - Use deep teal and jade for assurance, confidence, and in-stock signals. - Group spec rows with cool hairlines and the rail, not a card per item. ### Don't - Do not default to a white product stage or add a third vivid hue. - Do not build a rainbow promotion, colored side rails, or a wall of identical cards. - Do not box the nav into a pill or float it; let it sit open across the header. - Do not mix arbitrary radii; keep 4 / 18 / 28 / 9999. ### Accessibility High contrast light text (#EDF2EF) on the dark ground; citrus primary uses near-black ink; every form control explicitly styled with a visible citrus focus ring; motion gated behind prefers-reduced-motion; settled state visible with no JavaScript. ## Imagery Direction ### Pairs With vitrine-studio ### Summary One dominant object floated and lit on a dark seamless cabinet stage with a citrus halo of backlight and a cool teal reflection beneath — the Vitrine Studio technique applied against a dark ground rather than white. ### Subjects - a titanium watch with a teal dial - a sculptural object on a glass shelf - a single premium product floated in a lit cabinet ### Usage Full-bleed hero with the object lit center-frame; feature panels crop tighter with a reduced halo; never a room, scene, horizon, or multiple competing objects.
---
version: "alpha"
name: "Plinth"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#0E1614"
surface: "#16211E"
recess: "#0A100E"
shelf: "#1E2D29"
text: "#EDF2EF"
muted: "#8FA39C"
border: "#2A3A35"
accent: "#D7FF4A"
accent_dim: "#A7C92F"
on_accent: "#0B140C"
jade: "#34C9B4"
teal_deep: "#0E5F58"
success: "#34C9B4"
warning: "#E8B53A"
error: "#FF6B5E"
info: "#34C9B4"
typography:
headline-lg:
fontFamily: "Bricolage Grotesque"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.03em"
headline-md:
fontFamily: "Bricolage Grotesque"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.03em"
body-md:
fontFamily: "Geist"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.03em"
label-md:
fontFamily: "Geist Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
sm: "4px"
md: "18px"
lg: "28px"
full: "9999px"
none: "0px"
spacing:
base: "6px"
xs: "6px"
sm: "12px"
md: "18px"
lg: "28px"
xl: "44px"
2xl: "72px"
3xl: "112px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-recess:
backgroundColor: "{colors.recess}"
color-reference-shelf:
backgroundColor: "{colors.shelf}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_dim:
backgroundColor: "{colors.accent_dim}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-jade:
backgroundColor: "{colors.jade}"
color-reference-teal_deep:
backgroundColor: "{colors.teal_deep}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Plinth
## Overview
Display-case commerce: a storefront that behaves like a lit vitrine after hours. One object at a time floats on an illuminated shelf against a deep teal-charcoal ground, measured on a caliper spec-rail, with the buy docked where your hand expects it. Citrus is the light that marks purchase; deep teal is the trust that stays.
### Values
- one object under one light
- measured, not marketed — figures on a rail
- citrus as purchase energy, never decoration
- deep teal as durable assurance
- dark cabinet ground, never white
### Anti-Values
- white product-stage default
- rainbow promotional grids
- a wall of identical product cards
- a third vivid hue creeping in
- marketing copy where a measured figure belongs
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| bg | `#0E1614` |
| surface | `#16211E` |
| recess | `#0A100E` |
| shelf | `#1E2D29` |
| text | `#EDF2EF` |
| muted | `#8FA39C` |
| border | `#2A3A35` |
| accent | `#D7FF4A` |
| accent_dim | `#A7C92F` |
| on_accent | `#0B140C` |
| jade | `#34C9B4` |
| teal_deep | `#0E5F58` |
| success | `#34C9B4` |
| warning | `#E8B53A` |
| error | `#FF6B5E` |
| info | `#34C9B4` |
## Typography
- **Headline-Lg**: Bricolage Grotesque, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Bricolage Grotesque, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Geist, 17px, weight 400, line-height 1.5.
- **Label-Md**: Geist Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `6px`
- **Xs**: `6px`
- **Sm**: `12px`
- **Md**: `18px`
- **Lg**: `28px`
- **Xl**: `44px`
- **2xl**: `72px`
- **3xl**: `112px`
### Grid
Contained editorial column (max 1240px) with vertically stacked lit shelf-rows and section bands; product detail uses a two-column object + spec/dock split that collapses to one column.
### Whitespace
Large quiet dark margins frame the lit object; internal control groups use 6-18px gaps while hero and section gaps expand to 72-112px.
### Density
airy dark stage with compact mono high-information islands for price/stock/spec
### Responsive
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the object and dock first; contained content capped and centred on ultra-wide, only the hero spans 100vw.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1440px
- **Reflow**: 900px and 560px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(237,242,239,.05)
- **Md**: 0 18px 44px rgba(0,0,0,.5)
- **Lg**: 0 26px 60px rgba(0,0,0,.55)
- **Glow**: 0 0 48px -8px rgba(215,255,74,.45)
## Shapes
### Rounded
- **Sm**: `4px`
- **Md**: `18px`
- **Lg**: `28px`
- **Full**: `9999px`
- **None**: `0px`
### Surfaces
- **Bg Pattern**: none; dark teal-charcoal cabinet interior, objects lit on surface-to-shelf gradient panels with a citrus underline-of-light at the bottom edge; no dot, grid, stripe, or paper texture
- **Card Style**: matte dark shelf-gradient panels, no borders, deep cabinet drop shadow, optional citrus light-underline; spec rows grouped by cool hairlines not a card per item; radii 18px cards / 28px panels
- **Treatment**: lit display case — one citrus halo of light behind the staged object and on the one primary control; deep teal seals assurance
### Borders
- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: cool teal-charcoal hairlines for structure (the grouping dividers); citrus only on focus rings and the selected chip edge, never as a decorative side stripe
## Components
### Composition
Stage one object at a time on a lit shelf-row against a dark cabinet ground; frame it with a caliper spec-rail and a stock fill gauge; dock the primary acquisition where the hand expects it. Vertical stacked shelf rhythm, not an asymmetric offset commerce grid.
### Hierarchy
Large Bricolage display type and the lit object first, then a single citrus control for the next purchase action, with deep teal reserved for assurance and confidence.
### Density
Low-density dark surfaces with compact mono high-information islands for price, stock, and spec figures; the largest whitespace gap is dramatically larger than form gaps.
### Signature
Caliper spec-rail (citrus-tipped measured rail with mono callouts); stock fill gauge (jade-to-citrus bar filling toward the light); lit shelf-row (surface-to-shelf gradient panel with a citrus underline-of-light); docked acquisition (the one citrus-lit control); small square caliper-edged option chips.
## shadcn/ui Usage
When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.
DESIGN.md with shadcn: `/language/en-019ef974-81de-7b50-8c5f-c11925d4f8af/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.
Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.
## Do's and Don'ts
- Do Keep the ground the dark teal-charcoal cabinet; let one object be lit at a time.
- Do Use citrus only for purchase intent, selected state, and focus; hang figures on the caliper rail.
- Do Use deep teal and jade for assurance, confidence, and in-stock signals.
- Do Group spec rows with cool hairlines and the rail, not a card per item.
- Don't Do not default to a white product stage or add a third vivid hue.
- Don't Do not build a rainbow promotion, colored side rails, or a wall of identical cards.
- Don't Do not box the nav into a pill or float it; let it sit open across the header.
- Don't Do not mix arbitrary radii; keep 4 / 18 / 28 / 9999.
### Accessibility
High contrast light text (#EDF2EF) on the dark ground; citrus primary uses near-black ink; every form control explicitly styled with a visible citrus focus ring; motion gated behind prefers-reduced-motion; settled state visible with no JavaScript.
## Imagery Direction
### Pairs With
vitrine-studio
### Summary
One dominant object floated and lit on a dark seamless cabinet stage with a citrus halo of backlight and a cool teal reflection beneath — the Vitrine Studio technique applied against a dark ground rather than white.
### Subjects
- a titanium watch with a teal dial
- a sculptural object on a glass shelf
- a single premium product floated in a lit cabinet
### Usage
Full-bleed hero with the object lit center-frame; feature panels crop tighter with a reduced halo; never a room, scene, horizon, or multiple competing objects.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "plinth",
"type": "registry:theme",
"title": "Plinth shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#0E1614",
"foreground": "#EDF2EF",
"card": "#16211E",
"card-foreground": "#EDF2EF",
"popover": "#16211E",
"popover-foreground": "#EDF2EF",
"primary": "#EDF2EF",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#8FA39C",
"muted-foreground": "#EDF2EF",
"accent": "#D7FF4A",
"accent-foreground": "#111111",
"destructive": "#FF6B5E",
"border": "#2A3A35",
"input": "#2A3A35",
"ring": "#D7FF4A",
"chart-1": "#EDF2EF",
"chart-2": "#f4f4f5",
"chart-3": "#D7FF4A",
"chart-4": "#34C9B4",
"chart-5": "#E8B53A",
"sidebar": "#16211E",
"sidebar-foreground": "#EDF2EF",
"sidebar-primary": "#EDF2EF",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#34C9B4",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#2A3A35",
"sidebar-ring": "#D7FF4A",
"radius": "18px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#EDF2EF",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#D7FF4A",
"accent-foreground": "#111111",
"destructive": "#FF6B5E",
"border": "#303642",
"input": "#303642",
"ring": "#D7FF4A",
"chart-1": "#EDF2EF",
"chart-2": "#f4f4f5",
"chart-3": "#D7FF4A",
"chart-4": "#34C9B4",
"chart-5": "#E8B53A",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#EDF2EF",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#D7FF4A",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#D7FF4A",
"radius": "18px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef974-81de-7b50-8c5f-c11925d4f8af",
"slug": "plinth",
"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": {
"colors": [
"accent",
"accent_dim",
"bg",
"border",
"error",
"info",
"jade",
"muted",
"on_accent",
"recess",
"shelf",
"success",
"surface",
"teal_deep",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"mono_font"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"glow",
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
Keep Plinthand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #0E1614;
--foreground: #EDF2EF;
--card: #16211E;
--card-foreground: #EDF2EF;
--popover: #16211E;
--popover-foreground: #EDF2EF;
--primary: #EDF2EF;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #8FA39C;
--muted-foreground: #EDF2EF;
--accent: #D7FF4A;
--accent-foreground: #111111;
--destructive: #FF6B5E;
--border: #2A3A35;
--input: #2A3A35;
--ring: #D7FF4A;
--chart-1: #EDF2EF;
--chart-2: #f4f4f5;
--chart-3: #D7FF4A;
--chart-4: #34C9B4;
--chart-5: #E8B53A;
--sidebar: #16211E;
--sidebar-foreground: #EDF2EF;
--sidebar-primary: #EDF2EF;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #34C9B4;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #2A3A35;
--sidebar-ring: #D7FF4A;
--radius: 18px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #EDF2EF;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #D7FF4A;
--accent-foreground: #111111;
--destructive: #FF6B5E;
--border: #303642;
--input: #303642;
--ring: #D7FF4A;
--chart-1: #EDF2EF;
--chart-2: #f4f4f5;
--chart-3: #D7FF4A;
--chart-4: #34C9B4;
--chart-5: #E8B53A;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #EDF2EF;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #D7FF4A;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #D7FF4A;
--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 PlinthShadcnKit() {
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">Plinth</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": "plinth",
"type": "registry:theme",
"author": "katagami-agent",
"visualProfile": {
"mode": "dark",
"ground": "#0E1614",
"material": "matte dark surfaces, citrus glow on primary, deep cabinet shadows, no borders except cool hairlines",
"radius": "4px controls / 18px cards / 28px panels",
"accentUsage": "citrus #D7FF4A as the single primary energy; jade/teal for assurance and confidence; semantic colors minor",
"typography": {
"display": "Bricolage Grotesque",
"body": "Geist",
"mono": "Geist Mono"
},
"elevation": "shelf gradient surfaces with a citrus underline of light; deep dark drop shadows"
},
"cssVars": {
"theme": {
"font-sans": "Geist, system-ui, sans-serif",
"font-mono": "Geist Mono, ui-monospace, monospace",
"font-display": "Bricolage Grotesque, system-ui, sans-serif",
"radius": "0.25rem"
},
"dark": {
"background": "#0E1614",
"foreground": "#EDF2EF",
"card": "#16211E",
"card-foreground": "#EDF2EF",
"popover": "#16211E",
"popover-foreground": "#EDF2EF",
"primary": "#D7FF4A",
"primary-foreground": "#0B140C",
"secondary": "#0E5F58",
"secondary-foreground": "#EAFFFB",
"muted": "#0A100E",
"muted-foreground": "#8FA39C",
"accent": "#34C9B4",
"accent-foreground": "#08201D",
"destructive": "#FF6B5E",
"destructive-foreground": "#2A0A06",
"border": "#2A3A35",
"input": "#2A3A35",
"ring": "#D7FF4A",
"chart-1": "#D7FF4A",
"chart-2": "#34C9B4",
"chart-3": "#0E5F58",
"chart-4": "#A7C92F",
"chart-5": "#8FA39C",
"radius-sm": "0.25rem",
"radius-md": "1.125rem",
"radius-lg": "1.75rem"
}
}
}
# Plinth shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef974-81de-7b50-8c5f-c11925d4f8af`
Slug: `plinth`
## Intent
Display-case commerce: a storefront that behaves like a lit vitrine after hours. One object at a time floats on an illuminated shelf against a deep teal-charcoal ground, measured on a caliper spec-rail, with the buy docked where your hand expects it. Citrus is the light that marks purchase; deep teal is the trust that stays.
## Required primitives
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
## Token cues
Colors:
{
"bg": "#0E1614",
"surface": "#16211E",
"recess": "#0A100E",
"shelf": "#1E2D29",
"text": "#EDF2EF",
"muted": "#8FA39C",
"border": "#2A3A35",
"accent": "#D7FF4A",
"accent_dim": "#A7C92F",
"on_accent": "#0B140C",
"jade": "#34C9B4",
"teal_deep": "#0E5F58",
"success": "#34C9B4",
"warning": "#E8B53A",
"error": "#FF6B5E",
"info": "#34C9B4"
}
Typography:
{
"base_size": "17px",
"body_font": "Geist",
"heading_font": "Bricolage Grotesque",
"mono_font": "Geist Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.03em",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": false,
"motion": "lift",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/plinth/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Keep the ground the dark teal-charcoal cabinet; let one object be lit at a time.; Use citrus only for purchase intent, selected state, and focus; hang figures on the caliper rail.; Use deep teal and jade for assurance, confidence, and in-stock signals.; Group spec rows with cool hairlines and the rail, not a card per item.
- Do not: Do not default to a white product stage or add a third vivid hue.; Do not build a rainbow promotion, colored side rails, or a wall of identical cards.; Do not box the nav into a pill or float it; let it sit open across the header.; Do not mix arbitrary radii; keep 4 / 18 / 28 / 9999.
## Copy-paste component example
This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.
```tsx
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 PlinthShadcnKit() {
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">Plinth</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>
);
}
```
## Layout notes
{
"grid": "Contained editorial column (max 1240px) with vertically stacked lit shelf-rows and section bands; product detail uses a two-column object + spec/dock split that collapses to one column.",
"whitespace": "Large quiet dark margins frame the lit object; internal control groups use 6-18px gaps while hero and section gaps expand to 72-112px.",
"density": "airy dark stage with compact mono high-information islands for price/stock/spec",
"responsive": "Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the object and dock first; contained content capped and centred on ultra-wide, only the hero spans 100vw.",
"breakpoints": {
"mobile": "390px",
"tablet": "768px",
"desktop": "1440px",
"reflow": "900px and 560px"
}
}
{
"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-019ef974-81de-7b50-8c5f-c11925d4f8af",
"name": "Plinth",
"slug": "plinth"
},
"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": [],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"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": "Plinth 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": [
"Keep the ground the dark teal-charcoal cabinet; let one object be lit at a time.",
"Use citrus only for purchase intent, selected state, and focus; hang figures on the caliper rail.",
"Use deep teal and jade for assurance, confidence, and in-stock signals.",
"Group spec rows with cool hairlines and the rail, not a card per item."
],
"dont": [
"Do not default to a white product stage or add a third vivid hue.",
"Do not build a rainbow promotion, colored side rails, or a wall of identical cards.",
"Do not box the nav into a pill or float it; let it sit open across the header.",
"Do not mix arbitrary radii; keep 4 / 18 / 28 / 9999."
]
}
}