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.
Compose as a dark glazed scene: primary content lives in fired glaze tiles on a kiln-dark ground, each tile pouring from a lit lip into a foot pool; lists and navigation are parallel drip columns read top to bottom; one cyan kiln-flash sits on the single most important live state. Surfaces separate by the glaze run and generous gutters, never by borders.
Lead with a calm Space Grotesk title carrying one cyan highlighter word, then a mono placard, then the glaze tiles. The kiln-flash mark draws the eye to the one rare, live thing.
Low to medium density, always legible. Every cluster is separated by visible breathing room; data tables and dashboards stay readable on glaze-run fields.
The glaze run, every surface pours from a bright lit lip and gathers dark in a foot pool, crackles faintly, and recolours by role (jade field, deep-jade emphasis, cyan kiln-flash, copper iron-flash); the drip column is the navigation and timeline primitive.
Desktop content caps and centres at 1180-1200px; only the full-bleed glazed hero spans 100vw. A spacious grid: a wide hero, then glaze-tile modules and drip columns with raked space between them. Tablet keeps stacked tiles; mobile becomes a single calm column.
Whitespace is raked sand, broad and intentional, left unfilled around every glaze tile.
low
Every artifact renders from ~390px to 2560px+. The hero headline is viewport-sized (clamp) and wraps, never clipping or running off the 390px edge. On mobile, tiles stack single-column, the side rail collapses to a wrapped bar, and non-essential nav and table columns hide.
celadon-glaze
Any subject rendered as kiln-fired glaze in the Celadon Glaze technique: glossy vitreous sheen, colour pooling dark in the hollows and pale on raised edges, fine craquelure, soft ceramic highlights, one warm accent. Verdigris composes it dark: a single luminous glazed vessel in a dark kiln, glaze running off its lip, with an open dark zone to one side for the overlay.
One full-bleed glazed hero per landing, driven by --hero-image, with a calm dark kiln-shadow zone for the overlay headline; one live glazed piece per major surface elsewhere.
# Verdigris ## Philosophy Verdigris is a dark, kiln-fired interface language. Its signature mechanic is the glaze run: colour pours from a bright fired lip at the top of a surface and runs downward in luminous vertical rivulets, thinning as it falls and gathering into a glossy pool at the foot, with one electric kiln-flash mark on the single rivulet the flame touched. It reimagines the contemplative reflection-garden idea not as a calm pond seen from above but as a glazed vessel watched in the dark while its glaze is still running: the same stillness and the same single seasonal mark, a different gravity. The ground is a near-black cooling kiln chamber; brightness lives only in the running jade glaze and the one flash. ### Values - the glaze run: surfaces hang from a lit lip and pour downward, never sit as flat cards - one material, fully committed: every surface is a fired glaze tile that pools dark at its foot, on a kiln-dark ground that is never white - one kiln-flash mark per view, the single live thing the flame touched, used like a kiln accident that lands exactly where it matters - vertical, downward reading: lists, timelines, and navigation are parallel drip columns ### Anti-Values - dashboard clutter and dense labelling - defaulting to a white or washed-pale ground - a second loud accent, or letting the kiln-flash flood more than one element - thin ink-line botanical drawing or watercolour wash; the medium is fired glaze - the oversized italic serif headline, or the regular-serif / italic-serif word swap - borders, accent edges, and boxed-in nav widgets ### Visual Character - The glaze run: every content surface is a fired tile with a top-down gradient, bright jade at the lit lip and deepening to a tenmoku iron-dark pool at the foot. That pour is the only on-surface shadow; there are no borders. - The drip column: parallel vertical runs with a thin jade vein carry navigation, metrics, and timelines, read top to bottom; the one column the flame touched glows cyan-teal. - A faint craquelure overlay webs across every glazed surface, one texture system applied evenly, never decoration piled on. - Space Grotesk display with a single cyan-teal highlighter-marked word, calm 17px Inter body, and JetBrains Mono uppercase placards that read like markings on the foot of a pot. - A single copper iron-flash is the rarest seasonal mark, used once on a surface and never spread. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#10140F` | | surface | `#18201A` | | surface_2 | `#202A22` | | surface_3 | `#29362B` | | text | `#EAF2E6` | | muted | `#9DAE9A` | | border | `rgba(234,242,230,0.10)` | | accent | `#6FCFA8` | | accent_strong | `#3E9C78` | | accent_2 | `#34D8C8` | | accent_3 | `#C9682E` | | on_accent | `#0C120E` | | pool | `#0A0D08` | | success | `#6FCFA8` | | warning | `#C9942E` | | error | `#D2553A` | | info | `#34D8C8` | ### Typography - **Base Size**: 17px - **Body Font**: Inter - **Heading Font**: Space Grotesk - **Mono Font**: JetBrains Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.6 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap ### Radii - **None**: 0 - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 6px 16px rgba(0,0,0,0.40) - **Md**: 0 16px 40px rgba(0,0,0,0.50) - **Pool**: inset 0 -10px 22px rgba(8,11,6,0.65) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,34,54,84,128] ### Surfaces - **Treatment**: fired glaze tiles with a top-down run gradient (bright jade lip to tenmoku-dark foot pool) and a faint craquelure overlay; no borders - **Bg Pattern**: fine crackle craquelure ### Borders - **Default Width**: 0 - **Character**: no borders; surfaces separate by the glaze run, the foot pool, and the gutter; at most one hairline rgba(234,242,230,0.06) between very dense rows ### Motion - **Duration**: 240ms - **Easing**: cubic-bezier(0.22,1,0.36,1) - **Philosophy**: deliberate; the settled lit state is the default with no JavaScript, glaze-run reveals are added on top behind an html.js-on gate and honour prefers-reduced-motion ## Rules ### Composition Compose as a dark glazed scene: primary content lives in fired glaze tiles on a kiln-dark ground, each tile pouring from a lit lip into a foot pool; lists and navigation are parallel drip columns read top to bottom; one cyan kiln-flash sits on the single most important live state. Surfaces separate by the glaze run and generous gutters, never by borders. ### Hierarchy Lead with a calm Space Grotesk title carrying one cyan highlighter word, then a mono placard, then the glaze tiles. The kiln-flash mark draws the eye to the one rare, live thing. ### Density Low to medium density, always legible. Every cluster is separated by visible breathing room; data tables and dashboards stay readable on glaze-run fields. ### Signature The glaze run, every surface pours from a bright lit lip and gathers dark in a foot pool, crackles faintly, and recolours by role (jade field, deep-jade emphasis, cyan kiln-flash, copper iron-flash); the drip column is the navigation and timeline primitive. ## Layout ### Grid Desktop content caps and centres at 1180-1200px; only the full-bleed glazed hero spans 100vw. A spacious grid: a wide hero, then glaze-tile modules and drip columns with raked space between them. Tablet keeps stacked tiles; mobile becomes a single calm column. ### Whitespace Whitespace is raked sand, broad and intentional, left unfilled around every glaze tile. ### Density low ### Responsive Every artifact renders from ~390px to 2560px+. The hero headline is viewport-sized (clamp) and wraps, never clipping or running off the 390px edge. On mobile, tiles stack single-column, the side rail collapses to a wrapped bar, and non-essential nav and table columns hide. ### Breakpoints - **Mobile**: 0px - **Tablet**: 780px - **Desktop**: 1080px ## Guidance ### Do - Pour every surface from a lit lip into a tenmoku-dark foot pool; let the run be the only shadow - Keep the ground kiln-dark; let brightness live in the jade glaze and the one cyan flash - Use the cyan kiln-flash exactly once per view, on the single live thing - Read lists and navigation vertically as drip columns - Web a faint craquelure evenly across the gloss ### Don't - Default to a white or washed-pale ground - Add borders, accent edges, or boxed-in pill nav - Spread the cyan flash or copper iron-flash across more than one element - Use thin ink-line botanical drawing or watercolour wash - Use the oversized italic serif or the serif/italic word swap headline ### Accessibility Body 17px on a kiln-dark ground at high contrast; never encode meaning in glaze colour alone (pair the kiln-flash with a label). Keep overlaid hero text on a calm dark zone, not over the brightest pooled accent. Respect prefers-reduced-motion. ## Imagery Direction ### Pairs With celadon-glaze ### Summary Any subject rendered as kiln-fired glaze in the Celadon Glaze technique: glossy vitreous sheen, colour pooling dark in the hollows and pale on raised edges, fine craquelure, soft ceramic highlights, one warm accent. Verdigris composes it dark: a single luminous glazed vessel in a dark kiln, glaze running off its lip, with an open dark zone to one side for the overlay. ### Subjects - a tall glazed vessel with glaze running off its lip in a dark kiln - a single glazed teapot with one iron-flash drip - a glazed ceramic koi caught mid-turn - a glazed relief portrait ### Usage One full-bleed glazed hero per landing, driven by --hero-image, with a calm dark kiln-shadow zone for the overlay headline; one live glazed piece per major surface elsewhere.
---
version: "alpha"
name: "Verdigris"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#10140F"
surface: "#18201A"
surface_2: "#202A22"
surface_3: "#29362B"
text: "#EAF2E6"
muted: "#9DAE9A"
accent: "#6FCFA8"
accent_strong: "#3E9C78"
accent_2: "#34D8C8"
accent_3: "#C9682E"
on_accent: "#0C120E"
pool: "#0A0D08"
success: "#6FCFA8"
warning: "#C9942E"
error: "#D2553A"
info: "#34D8C8"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Inter"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.02em"
label-md:
fontFamily: "JetBrains Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "34px"
3xl: "54px"
4xl: "84px"
step-8: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-surface_3:
backgroundColor: "{colors.surface_3}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_strong:
backgroundColor: "{colors.accent_strong}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_3:
backgroundColor: "{colors.accent_3}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-pool:
backgroundColor: "{colors.pool}"
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"
---
# Verdigris
## Overview
Verdigris is a dark, kiln-fired interface language. Its signature mechanic is the glaze run: colour pours from a bright fired lip at the top of a surface and runs downward in luminous vertical rivulets, thinning as it falls and gathering into a glossy pool at the foot, with one electric kiln-flash mark on the single rivulet the flame touched. It reimagines the contemplative reflection-garden idea not as a calm pond seen from above but as a glazed vessel watched in the dark while its glaze is still running: the same stillness and the same single seasonal mark, a different gravity. The ground is a near-black cooling kiln chamber; brightness lives only in the running jade glaze and the one flash.
### Values
- the glaze run: surfaces hang from a lit lip and pour downward, never sit as flat cards
- one material, fully committed: every surface is a fired glaze tile that pools dark at its foot, on a kiln-dark ground that is never white
- one kiln-flash mark per view, the single live thing the flame touched, used like a kiln accident that lands exactly where it matters
- vertical, downward reading: lists, timelines, and navigation are parallel drip columns
### Anti-Values
- dashboard clutter and dense labelling
- defaulting to a white or washed-pale ground
- a second loud accent, or letting the kiln-flash flood more than one element
- thin ink-line botanical drawing or watercolour wash; the medium is fired glaze
- the oversized italic serif headline, or the regular-serif / italic-serif word swap
- borders, accent edges, and boxed-in nav widgets
### Visual Character
- The glaze run: every content surface is a fired tile with a top-down gradient, bright jade at the lit lip and deepening to a tenmoku iron-dark pool at the foot. That pour is the only on-surface shadow; there are no borders.
- The drip column: parallel vertical runs with a thin jade vein carry navigation, metrics, and timelines, read top to bottom; the one column the flame touched glows cyan-teal.
- A faint craquelure overlay webs across every glazed surface, one texture system applied evenly, never decoration piled on.
- Space Grotesk display with a single cyan-teal highlighter-marked word, calm 17px Inter body, and JetBrains Mono uppercase placards that read like markings on the foot of a pot.
- A single copper iron-flash is the rarest seasonal mark, used once on a surface and never spread.
## 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 | `#10140F` |
| surface | `#18201A` |
| surface_2 | `#202A22` |
| surface_3 | `#29362B` |
| text | `#EAF2E6` |
| muted | `#9DAE9A` |
| accent | `#6FCFA8` |
| accent_strong | `#3E9C78` |
| accent_2 | `#34D8C8` |
| accent_3 | `#C9682E` |
| on_accent | `#0C120E` |
| pool | `#0A0D08` |
| success | `#6FCFA8` |
| warning | `#C9942E` |
| error | `#D2553A` |
| info | `#34D8C8` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.6.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `34px`
- **3xl**: `54px`
- **4xl**: `84px`
- **Step-8**: `128px`
### Grid
Desktop content caps and centres at 1180-1200px; only the full-bleed glazed hero spans 100vw. A spacious grid: a wide hero, then glaze-tile modules and drip columns with raked space between them. Tablet keeps stacked tiles; mobile becomes a single calm column.
### Whitespace
Whitespace is raked sand, broad and intentional, left unfilled around every glaze tile.
### Density
low
### Responsive
Every artifact renders from ~390px to 2560px+. The hero headline is viewport-sized (clamp) and wraps, never clipping or running off the 390px edge. On mobile, tiles stack single-column, the side rail collapses to a wrapped bar, and non-essential nav and table columns hide.
### Breakpoints
- **Mobile**: 0px
- **Tablet**: 780px
- **Desktop**: 1080px
## Elevation & Depth
### Shadows
- **Sm**: 0 6px 16px rgba(0,0,0,0.40)
- **Md**: 0 16px 40px rgba(0,0,0,0.50)
- **Pool**: inset 0 -10px 22px rgba(8,11,6,0.65)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: fired glaze tiles with a top-down run gradient (bright jade lip to tenmoku-dark foot pool) and a faint craquelure overlay; no borders
- **Bg Pattern**: fine crackle craquelure
### Borders
- **Default Width**: 0
- **Character**: no borders; surfaces separate by the glaze run, the foot pool, and the gutter; at most one hairline rgba(234,242,230,0.06) between very dense rows
## Components
### Composition
Compose as a dark glazed scene: primary content lives in fired glaze tiles on a kiln-dark ground, each tile pouring from a lit lip into a foot pool; lists and navigation are parallel drip columns read top to bottom; one cyan kiln-flash sits on the single most important live state. Surfaces separate by the glaze run and generous gutters, never by borders.
### Hierarchy
Lead with a calm Space Grotesk title carrying one cyan highlighter word, then a mono placard, then the glaze tiles. The kiln-flash mark draws the eye to the one rare, live thing.
### Density
Low to medium density, always legible. Every cluster is separated by visible breathing room; data tables and dashboards stay readable on glaze-run fields.
### Signature
The glaze run, every surface pours from a bright lit lip and gathers dark in a foot pool, crackles faintly, and recolours by role (jade field, deep-jade emphasis, cyan kiln-flash, copper iron-flash); the drip column is the navigation and timeline primitive.
## 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-019efded-7bdb-7180-8603-7a065c79010f/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 Pour every surface from a lit lip into a tenmoku-dark foot pool; let the run be the only shadow
- Do Keep the ground kiln-dark; let brightness live in the jade glaze and the one cyan flash
- Do Use the cyan kiln-flash exactly once per view, on the single live thing
- Do Read lists and navigation vertically as drip columns
- Do Web a faint craquelure evenly across the gloss
- Don't Default to a white or washed-pale ground
- Don't Add borders, accent edges, or boxed-in pill nav
- Don't Spread the cyan flash or copper iron-flash across more than one element
- Don't Use thin ink-line botanical drawing or watercolour wash
- Don't Use the oversized italic serif or the serif/italic word swap headline
### Accessibility
Body 17px on a kiln-dark ground at high contrast; never encode meaning in glaze colour alone (pair the kiln-flash with a label). Keep overlaid hero text on a calm dark zone, not over the brightest pooled accent. Respect prefers-reduced-motion.
## Imagery Direction
### Pairs With
celadon-glaze
### Summary
Any subject rendered as kiln-fired glaze in the Celadon Glaze technique: glossy vitreous sheen, colour pooling dark in the hollows and pale on raised edges, fine craquelure, soft ceramic highlights, one warm accent. Verdigris composes it dark: a single luminous glazed vessel in a dark kiln, glaze running off its lip, with an open dark zone to one side for the overlay.
### Subjects
- a tall glazed vessel with glaze running off its lip in a dark kiln
- a single glazed teapot with one iron-flash drip
- a glazed ceramic koi caught mid-turn
- a glazed relief portrait
### Usage
One full-bleed glazed hero per landing, driven by --hero-image, with a calm dark kiln-shadow zone for the overlay headline; one live glazed piece per major surface elsewhere.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "verdigris",
"type": "registry:theme",
"title": "Verdigris shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#10140F",
"foreground": "#EAF2E6",
"card": "#18201A",
"card-foreground": "#EAF2E6",
"popover": "#18201A",
"popover-foreground": "#EAF2E6",
"primary": "#EAF2E6",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#9DAE9A",
"muted-foreground": "#EAF2E6",
"accent": "#6FCFA8",
"accent-foreground": "#ffffff",
"destructive": "#D2553A",
"border": "rgba(234,242,230,0.10)",
"input": "rgba(234,242,230,0.10)",
"ring": "#6FCFA8",
"chart-1": "#EAF2E6",
"chart-2": "#f4f4f5",
"chart-3": "#6FCFA8",
"chart-4": "#6FCFA8",
"chart-5": "#C9942E",
"sidebar": "#18201A",
"sidebar-foreground": "#EAF2E6",
"sidebar-primary": "#EAF2E6",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#34D8C8",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "rgba(234,242,230,0.10)",
"sidebar-ring": "#6FCFA8",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#EAF2E6",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#6FCFA8",
"accent-foreground": "#ffffff",
"destructive": "#D2553A",
"border": "#303642",
"input": "#303642",
"ring": "#6FCFA8",
"chart-1": "#EAF2E6",
"chart-2": "#f4f4f5",
"chart-3": "#6FCFA8",
"chart-4": "#6FCFA8",
"chart-5": "#C9942E",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#EAF2E6",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#6FCFA8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#6FCFA8",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efded-7bdb-7180-8603-7a065c79010f",
"slug": "verdigris",
"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_2",
"accent_3",
"accent_strong",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"pool",
"success",
"surface",
"surface_2",
"surface_3",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"md",
"pool",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"treatment"
],
"borders": [
"character",
"default_width"
],
"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
produced by opus-4.8 · sourced by opus-4.8 · images by gpt-image-2
Keep Verdigrisand 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: #10140F;
--foreground: #EAF2E6;
--card: #18201A;
--card-foreground: #EAF2E6;
--popover: #18201A;
--popover-foreground: #EAF2E6;
--primary: #EAF2E6;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #9DAE9A;
--muted-foreground: #EAF2E6;
--accent: #6FCFA8;
--accent-foreground: #ffffff;
--destructive: #D2553A;
--border: rgba(234,242,230,0.10);
--input: rgba(234,242,230,0.10);
--ring: #6FCFA8;
--chart-1: #EAF2E6;
--chart-2: #f4f4f5;
--chart-3: #6FCFA8;
--chart-4: #6FCFA8;
--chart-5: #C9942E;
--sidebar: #18201A;
--sidebar-foreground: #EAF2E6;
--sidebar-primary: #EAF2E6;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #34D8C8;
--sidebar-accent-foreground: #111111;
--sidebar-border: rgba(234,242,230,0.10);
--sidebar-ring: #6FCFA8;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #EAF2E6;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #6FCFA8;
--accent-foreground: #ffffff;
--destructive: #D2553A;
--border: #303642;
--input: #303642;
--ring: #6FCFA8;
--chart-1: #EAF2E6;
--chart-2: #f4f4f5;
--chart-3: #6FCFA8;
--chart-4: #6FCFA8;
--chart-5: #C9942E;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #EAF2E6;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #6FCFA8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #6FCFA8;
--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 VerdigrisShadcnKit() {
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">Verdigris</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": "verdigris",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-mono": "JetBrains Mono, ui-monospace, monospace",
"font-display": "Space Grotesk, system-ui, sans-serif",
"radius": "16px"
},
"dark": {
"background": "#10140F",
"foreground": "#EAF2E6",
"card": "#1A241C",
"card-foreground": "#EAF2E6",
"popover": "#202A22",
"popover-foreground": "#EAF2E6",
"primary": "#6FCFA8",
"primary-foreground": "#0C120E",
"secondary": "#202A22",
"secondary-foreground": "#EAF2E6",
"muted": "#202A22",
"muted-foreground": "#9DAE9A",
"accent": "#34D8C8",
"accent-foreground": "#0C120E",
"destructive": "#D2553A",
"destructive-foreground": "#EAF2E6",
"border": "transparent",
"input": "#29362B",
"ring": "#6FCFA8",
"chart-1": "#6FCFA8",
"chart-2": "#34D8C8",
"chart-3": "#3E9C78",
"chart-4": "#C9682E",
"chart-5": "#9DAE9A"
}
},
"meta": {
"mode": "dark-only",
"ground": "kiln-dark #10140F (never white)",
"borders": "none — surfaces separate by the glaze-run gradient, the foot pool, and the gutter",
"radius_set": [0, 16, 24, 9999],
"note": "Cards carry a top-down glaze-run gradient (bright jade lip → tenmoku-dark foot pool, inset -10px shadow) instead of borders. One kiln-flash (accent #34D8C8) mark per scene."
}
}
# Verdigris shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efded-7bdb-7180-8603-7a065c79010f`
Slug: `verdigris`
## Intent
Verdigris is a dark, kiln-fired interface language. Its signature mechanic is the glaze run: colour pours from a bright fired lip at the top of a surface and runs downward in luminous vertical rivulets, thinning as it falls and gathering into a glossy pool at the foot, with one electric kiln-flash mark on the single rivulet the flame touched. It reimagines the contemplative reflection-garden idea not as a calm pond seen from above but as a glazed vessel watched in the dark while its glaze is still running: the same stillness and the same single seasonal mark, a different gravity. The ground is a near-black cooling kiln chamber; brightness lives only in the running jade glaze and the one flash.
## 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": "#10140F",
"surface": "#18201A",
"surface_2": "#202A22",
"surface_3": "#29362B",
"text": "#EAF2E6",
"muted": "#9DAE9A",
"border": "rgba(234,242,230,0.10)",
"accent": "#6FCFA8",
"accent_strong": "#3E9C78",
"accent_2": "#34D8C8",
"accent_3": "#C9682E",
"on_accent": "#0C120E",
"pool": "#0A0D08",
"success": "#6FCFA8",
"warning": "#C9942E",
"error": "#D2553A",
"info": "#34D8C8"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter",
"heading_font": "Space Grotesk",
"mono_font": "JetBrains Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": 1.6,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
}
## Visual character to preserve
- The glaze run: every content surface is a fired tile with a top-down gradient, bright jade at the lit lip and deepening to a tenmoku iron-dark pool at the foot. That pour is the only on-surface shadow; there are no borders.
- The drip column: parallel vertical runs with a thin jade vein carry navigation, metrics, and timelines, read top to bottom; the one column the flame touched glows cyan-teal.
- A faint craquelure overlay webs across every glazed surface, one texture system applied evenly, never decoration piled on.
- Space Grotesk display with a single cyan-teal highlighter-marked word, calm 17px Inter body, and JetBrains Mono uppercase placards that read like markings on the foot of a pot.
- A single copper iron-flash is the rarest seasonal mark, used once on a surface and never spread.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": false,
"motion": "still",
"density": "dense",
"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/verdigris/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: Pour every surface from a lit lip into a tenmoku-dark foot pool; let the run be the only shadow; Keep the ground kiln-dark; let brightness live in the jade glaze and the one cyan flash; Use the cyan kiln-flash exactly once per view, on the single live thing; Read lists and navigation vertically as drip columns; Web a faint craquelure evenly across the gloss
- Do not: Default to a white or washed-pale ground; Add borders, accent edges, or boxed-in pill nav; Spread the cyan flash or copper iron-flash across more than one element; Use thin ink-line botanical drawing or watercolour wash; Use the oversized italic serif or the serif/italic word swap headline
## 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 VerdigrisShadcnKit() {
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">Verdigris</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": "Desktop content caps and centres at 1180-1200px; only the full-bleed glazed hero spans 100vw. A spacious grid: a wide hero, then glaze-tile modules and drip columns with raked space between them. Tablet keeps stacked tiles; mobile becomes a single calm column.",
"whitespace": "Whitespace is raked sand, broad and intentional, left unfilled around every glaze tile.",
"density": "low",
"responsive": "Every artifact renders from ~390px to 2560px+. The hero headline is viewport-sized (clamp) and wraps, never clipping or running off the 390px edge. On mobile, tiles stack single-column, the side rail collapses to a wrapped bar, and non-essential nav and table columns hide.",
"breakpoints": {
"mobile": "0px",
"tablet": "780px",
"desktop": "1080px"
}
}
{
"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-019efded-7bdb-7180-8603-7a065c79010f",
"name": "Verdigris",
"slug": "verdigris"
},
"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": [
"The glaze run: every content surface is a fired tile with a top-down gradient, bright jade at the lit lip and deepening to a tenmoku iron-dark pool at the foot. That pour is the only on-surface shadow; there are no borders.",
"The drip column: parallel vertical runs with a thin jade vein carry navigation, metrics, and timelines, read top to bottom; the one column the flame touched glows cyan-teal.",
"A faint craquelure overlay webs across every glazed surface, one texture system applied evenly, never decoration piled on.",
"Space Grotesk display with a single cyan-teal highlighter-marked word, calm 17px Inter body, and JetBrains Mono uppercase placards that read like markings on the foot of a pot.",
"A single copper iron-flash is the rarest seasonal mark, used once on a surface and never spread."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"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": "Verdigris 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": [
"Pour every surface from a lit lip into a tenmoku-dark foot pool; let the run be the only shadow",
"Keep the ground kiln-dark; let brightness live in the jade glaze and the one cyan flash",
"Use the cyan kiln-flash exactly once per view, on the single live thing",
"Read lists and navigation vertically as drip columns",
"Web a faint craquelure evenly across the gloss"
],
"dont": [
"Default to a white or washed-pale ground",
"Add borders, accent edges, or boxed-in pill nav",
"Spread the cyan flash or copper iron-flash across more than one element",
"Use thin ink-line botanical drawing or watercolour wash",
"Use the oversized italic serif or the serif/italic word swap headline"
]
}
}