Quiet Gouache Glass
A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Download DESIGN.md
Portable DESIGN.md source of truth for most agents and apps.
specification
philosophy
tokens
borders4 items
- accent width
- 0px
- character
- borders separate glass planes neutrally; color never appears as a sideline, rail, stripe, or arbitrary accent border
- default width
- 1px
- style
- solid inset frost hairlines only
colors12 items
motion3 items
- duration
- 170ms
- easing
- cubic-bezier(0.22, 0.72, 0.18, 1)
- philosophy
- subtle lift, focus wash, and selected-surface settling with transform and color only; no bounce or layout animation
radii5 items
- full
- 9999px
- lg
- 28px
- md
- 18px
- none
- 0
- sm
- 10px
shadows3 items
- lg
- 0 36px 90px rgba(71,86,101,0.16)
- md
- 0 18px 42px rgba(71,86,101,0.11)
- sm
- 0 1px 2px rgba(36,49,59,0.05)
spacing2 items
- base
- 8px
- scale
- 4, 8, 12, 16, 24, 32, 48, 64
surfaces3 items
- bg pattern
- clean neutral field with soft radial light wells only; no square grid and no dotted texture by default
- card style
- single-layer frosted panes with inset hairlines, no colored edge accents, no nested-card reflex
- treatment
- cool white glass with silver gradients, backdrop blur, and sparing colored filled micro-surfaces
typography8 items
- base size
- 16px
- body font
- Source Sans 3
- google fonts url
- https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap
- heading font
- Geist
- letter spacing
- -0.018em
- line height
- 1.5
- mono font
- IBM Plex Mono
- scale ratio
- 1.22
rules
Scene-first application shell for a material-quality studio: a calm left navigation column, one offset glass workbench, and a color-backed review panel that breaks the grid with product meaning.
Balanced premium density with generous outer gutters, compact control clusters, and unboxed lists separated by whitespace and neutral hairlines.
Typography, surface elevation, filled semantic chips, and icon-bearing foreground marks carry hierarchy; color is never a decorative border and never repeats without a product role.
layout
mobile 375px, tablet 768px, desktop 1440px with navigation becoming top segmented tabs below 820px
Twelve-column desktop grid with a 260px calm navigation column, fluid glass workbench, and offset inspector; collapses to two columns on tablet and one column on mobile.
Large outer gutters and precise 16-24px internal gaps create calm; unframed spacing is preferred over wrapping every unit in a card.
guidance
- Use color only as filled chips, selected states, icons, data marks, foreground swatches, or one meaningful content-backed panel.
- Keep glass surfaces neutral with consistent 18px radius geometry and inset frost hairlines.
- Let product copy, material states, and review workflows create scene specificity.
- Use muted coral, mineral blue, moss green, and rare amber with clear semantic ownership.
- Do not use colored side rails, left borders, side stripes, line markers, or accent borders on cards, buttons, rows, panels, or list items.
- Do not use square-grid backgrounds, default dotted notebook texture, rainbow sprays, or hue-wheel palette demonstrations.
- Do not present a generic analytics dashboard, CRM board, or component catalog as the main embodiment.
- Do not add nested cards, arbitrary glow, gradient text, or decorative accents that fail a removal test.
katagami spec
# Quiet Gouache Glass ## Philosophy An evolved child of Gouache System Glass that keeps Apple-clean frosted product minimalism and memorable paint intelligence, but removes all colored side rails, stripes, accent borders, and template-dashboard decoration in favor of quieter semantic color surfaces, icons, chips, and content-backed fields. ### Values - authored optical restraint - semantic gouache color integration - premium product clarity - quiet structural hierarchy - lineage-aware deslopification ### Anti-Values - decorative colored sidelines or left rails - arbitrary accent borders and stripes - rainbow palette sprawl - generic SaaS dashboard/card templates - default dotted or square-grid backgrounds ### Visual Character - Use cool neutral glass panes with backdrop-filter blur, white-to-silver linear gradients, inset frost hairlines, and large rounded-rect geometry committed to one 18px family. - Integrate gouache color as filled micro-surfaces, selected chips, icon-backed status dots, data marks, and one meaningful content panel rather than any one-sided border or stripe. - Keep the page background clean and almost blank with soft radial light pools only, avoiding square grids, dotted notebook motifs, and decorative texture as default identity. - Build hierarchy through spacious Apple-like typography, unboxed group alignment, subtle dividers, and a single offset workspace composition break instead of stacks of cards. - Use a reduced color-theory set of muted coral, mineral blue, and moss green with warm amber reserved for warnings, applied through semantic foreground marks and filled states. ## Tokens ### Borders - **Accent Width**: 0px - **Character**: borders separate glass planes neutrally; color never appears as a sideline, rail, stripe, or arbitrary accent border - **Default Width**: 1px - **Style**: solid inset frost hairlines only ### Colors | Name | Value | |------|-------| | accent | `#D96F5F` | | background | `#F8F9FB` | | border | `#DDE3EA` | | error | `#B84B43` | | info | `#5F8EA8` | | muted | `#65717D` | | primary | `#24313B` | | secondary | `#E7EBF0` | | success | `#6F9B72` | | surface | `#FFFFFF` | | text | `#18222B` | | warning | `#C79543` | ### Motion - **Duration**: 170ms - **Easing**: cubic-bezier(0.22, 0.72, 0.18, 1) - **Philosophy**: subtle lift, focus wash, and selected-surface settling with transform and color only; no bounce or layout animation ### Radii - **Full**: 9999px - **Lg**: 28px - **Md**: 18px - **None**: 0 - **Sm**: 10px ### Shadows - **Lg**: 0 36px 90px rgba(71,86,101,0.16) - **Md**: 0 18px 42px rgba(71,86,101,0.11) - **Sm**: 0 1px 2px rgba(36,49,59,0.05) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64] ### Surfaces - **Bg Pattern**: clean neutral field with soft radial light wells only; no square grid and no dotted texture by default - **Card Style**: single-layer frosted panes with inset hairlines, no colored edge accents, no nested-card reflex - **Treatment**: cool white glass with silver gradients, backdrop blur, and sparing colored filled micro-surfaces ### Typography - **Base Size**: 16px - **Body Font**: Source Sans 3 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap - **Heading Font**: Geist - **Letter Spacing**: -0.018em - **Line Height**: 1.5 - **Mono Font**: IBM Plex Mono - **Scale Ratio**: 1.22 ## Rules ### Composition Scene-first application shell for a material-quality studio: a calm left navigation column, one offset glass workbench, and a color-backed review panel that breaks the grid with product meaning. ### Density Balanced premium density with generous outer gutters, compact control clusters, and unboxed lists separated by whitespace and neutral hairlines. ### Hierarchy Typography, surface elevation, filled semantic chips, and icon-bearing foreground marks carry hierarchy; color is never a decorative border and never repeats without a product role. ### Signature Patterns - Filled gouache micro-surfaces: small rounded chips, swatches, toggle thumbs, and selected tabs use muted paint fills with dark readable text instead of edge strips. - Foreground paint marks: tiny circular data marks and SVG icons carry color inside content cells, legends, and controls with no side rails or line markers. - Content-backed color field: one larger low-saturation panel appears only when it owns a workflow state such as review, approval, or warning. - Frosted product planes: neutral glass cards use backdrop-filter blur, inset box-shadow hairlines, and tinted shadows while staying free of arbitrary colored borders. - Offset quiet workbench: the primary workspace shifts slightly across the grid and uses negative space plus a floating inspector to avoid generic dashboard symmetry. ## Layout ### Breakpoints mobile 375px, tablet 768px, desktop 1440px with navigation becoming top segmented tabs below 820px ### Grid Twelve-column desktop grid with a 260px calm navigation column, fluid glass workbench, and offset inspector; collapses to two columns on tablet and one column on mobile. ### Whitespace Large outer gutters and precise 16-24px internal gaps create calm; unframed spacing is preferred over wrapping every unit in a card. ## Guidance ### Do - Use color only as filled chips, selected states, icons, data marks, foreground swatches, or one meaningful content-backed panel. - Keep glass surfaces neutral with consistent 18px radius geometry and inset frost hairlines. - Let product copy, material states, and review workflows create scene specificity. - Use muted coral, mineral blue, moss green, and rare amber with clear semantic ownership. ### Don't - Do not use colored side rails, left borders, side stripes, line markers, or accent borders on cards, buttons, rows, panels, or list items. - Do not use square-grid backgrounds, default dotted notebook texture, rainbow sprays, or hue-wheel palette demonstrations. - Do not present a generic analytics dashboard, CRM board, or component catalog as the main embodiment. - Do not add nested cards, arbitrary glow, gradient text, or decorative accents that fail a removal test.
DESIGN.md
---
version: "alpha"
name: "Quiet Gouache Glass"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
accent: "#D96F5F"
background: "#F8F9FB"
border: "#DDE3EA"
error: "#B84B43"
info: "#5F8EA8"
muted: "#65717D"
primary: "#24313B"
secondary: "#E7EBF0"
success: "#6F9B72"
surface: "#FFFFFF"
text: "#18222B"
warning: "#C79543"
typography:
headline-lg:
fontFamily: "Geist"
fontSize: "1.816rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.018em"
headline-md:
fontFamily: "Geist"
fontSize: "1.488rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.018em"
body-md:
fontFamily: "Source Sans 3"
fontSize: "16px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.018em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
full: "9999px"
lg: "28px"
md: "18px"
none: "0px"
sm: "10px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
components:
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-warning:
backgroundColor: "{colors.warning}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#ffffff"
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"
---
# Quiet Gouache Glass
## Overview
An evolved child of Gouache System Glass that keeps Apple-clean frosted product minimalism and memorable paint intelligence, but removes all colored side rails, stripes, accent borders, and template-dashboard decoration in favor of quieter semantic color surfaces, icons, chips, and content-backed fields.
### Values
- authored optical restraint
- semantic gouache color integration
- premium product clarity
- quiet structural hierarchy
- lineage-aware deslopification
### Anti-Values
- decorative colored sidelines or left rails
- arbitrary accent borders and stripes
- rainbow palette sprawl
- generic SaaS dashboard/card templates
- default dotted or square-grid backgrounds
### Visual Character
- Use cool neutral glass panes with backdrop-filter blur, white-to-silver linear gradients, inset frost hairlines, and large rounded-rect geometry committed to one 18px family.
- Integrate gouache color as filled micro-surfaces, selected chips, icon-backed status dots, data marks, and one meaningful content panel rather than any one-sided border or stripe.
- Keep the page background clean and almost blank with soft radial light pools only, avoiding square grids, dotted notebook motifs, and decorative texture as default identity.
- Build hierarchy through spacious Apple-like typography, unboxed group alignment, subtle dividers, and a single offset workspace composition break instead of stacks of cards.
- Use a reduced color-theory set of muted coral, mineral blue, and moss green with warm amber reserved for warnings, applied through semantic foreground marks and filled states.
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| accent | `#D96F5F` |
| background | `#F8F9FB` |
| border | `#DDE3EA` |
| error | `#B84B43` |
| info | `#5F8EA8` |
| muted | `#65717D` |
| primary | `#24313B` |
| secondary | `#E7EBF0` |
| success | `#6F9B72` |
| surface | `#FFFFFF` |
| text | `#18222B` |
| warning | `#C79543` |
## Typography
- **Headline-Lg**: Geist, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Geist, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, 16px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
### Breakpoints
mobile 375px, tablet 768px, desktop 1440px with navigation becoming top segmented tabs below 820px
### Grid
Twelve-column desktop grid with a 260px calm navigation column, fluid glass workbench, and offset inspector; collapses to two columns on tablet and one column on mobile.
### Whitespace
Large outer gutters and precise 16-24px internal gaps create calm; unframed spacing is preferred over wrapping every unit in a card.
## Elevation & Depth
### Shadows
- **Lg**: 0 36px 90px rgba(71,86,101,0.16)
- **Md**: 0 18px 42px rgba(71,86,101,0.11)
- **Sm**: 0 1px 2px rgba(36,49,59,0.05)
## Shapes
### Rounded
- **Full**: `9999px`
- **Lg**: `28px`
- **Md**: `18px`
- **None**: `0px`
- **Sm**: `10px`
### Surfaces
- **Bg Pattern**: clean neutral field with soft radial light wells only; no square grid and no dotted texture by default
- **Card Style**: single-layer frosted panes with inset hairlines, no colored edge accents, no nested-card reflex
- **Treatment**: cool white glass with silver gradients, backdrop blur, and sparing colored filled micro-surfaces
### Borders
- **Accent Width**: 0px
- **Character**: borders separate glass planes neutrally; color never appears as a sideline, rail, stripe, or arbitrary accent border
- **Default Width**: 1px
- **Style**: solid inset frost hairlines only
## Components
### Composition
Scene-first application shell for a material-quality studio: a calm left navigation column, one offset glass workbench, and a color-backed review panel that breaks the grid with product meaning.
### Density
Balanced premium density with generous outer gutters, compact control clusters, and unboxed lists separated by whitespace and neutral hairlines.
### Hierarchy
Typography, surface elevation, filled semantic chips, and icon-bearing foreground marks carry hierarchy; color is never a decorative border and never repeats without a product role.
### Signature Patterns
- Filled gouache micro-surfaces: small rounded chips, swatches, toggle thumbs, and selected tabs use muted paint fills with dark readable text instead of edge strips.
- Foreground paint marks: tiny circular data marks and SVG icons carry color inside content cells, legends, and controls with no side rails or line markers.
- Content-backed color field: one larger low-saturation panel appears only when it owns a workflow state such as review, approval, or warning.
- Frosted product planes: neutral glass cards use backdrop-filter blur, inset box-shadow hairlines, and tinted shadows while staying free of arbitrary colored borders.
- Offset quiet workbench: the primary workspace shifts slightly across the grid and uses negative space plus a floating inspector to avoid generic dashboard symmetry.
## 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-019e467f-0c85-7e13-a75e-8312444576e3/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 Use color only as filled chips, selected states, icons, data marks, foreground swatches, or one meaningful content-backed panel.
- Do Keep glass surfaces neutral with consistent 18px radius geometry and inset frost hairlines.
- Do Let product copy, material states, and review workflows create scene specificity.
- Do Use muted coral, mineral blue, moss green, and rare amber with clear semantic ownership.
- Don't Do not use colored side rails, left borders, side stripes, line markers, or accent borders on cards, buttons, rows, panels, or list items.
- Don't Do not use square-grid backgrounds, default dotted notebook texture, rainbow sprays, or hue-wheel palette demonstrations.
- Don't Do not present a generic analytics dashboard, CRM board, or component catalog as the main embodiment.
- Don't Do not add nested cards, arbitrary glow, gradient text, or decorative accents that fail a removal test.
shadcn/ui theme
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "quiet-gouache-glass",
"type": "registry:theme",
"title": "Quiet Gouache Glass shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F8F9FB",
"foreground": "#18222B",
"card": "#FFFFFF",
"card-foreground": "#18222B",
"popover": "#FFFFFF",
"popover-foreground": "#18222B",
"primary": "#24313B",
"primary-foreground": "#ffffff",
"secondary": "#E7EBF0",
"secondary-foreground": "#111111",
"muted": "#65717D",
"muted-foreground": "#18222B",
"accent": "#D96F5F",
"accent-foreground": "#ffffff",
"destructive": "#B84B43",
"border": "#DDE3EA",
"input": "#DDE3EA",
"ring": "#D96F5F",
"chart-1": "#24313B",
"chart-2": "#E7EBF0",
"chart-3": "#D96F5F",
"chart-4": "#6F9B72",
"chart-5": "#C79543",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#18222B",
"sidebar-primary": "#24313B",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#5F8EA8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#DDE3EA",
"sidebar-ring": "#D96F5F",
"radius": "18px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#24313B",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#D96F5F",
"accent-foreground": "#ffffff",
"destructive": "#B84B43",
"border": "#303642",
"input": "#303642",
"ring": "#D96F5F",
"chart-1": "#24313B",
"chart-2": "#E7EBF0",
"chart-3": "#D96F5F",
"chart-4": "#6F9B72",
"chart-5": "#C79543",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#24313B",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#D96F5F",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#D96F5F",
"radius": "18px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019e467f-0c85-7e13-a75e-8312444576e3",
"slug": "quiet-gouache-glass",
"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"
]
}
}
}
```embodiments
at a glance
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Components
Components rendered with this language’s tokens — colors, type, and rounded corners as specified.
Spacing
- base8px
- xs4px
- sm8px
- md12px
- lg16px
- xl24px
- 2xl32px
- 3xl48px
- 4xl64px
Shape
implementation kit
DESIGN.md with shadcn
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.
advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #F8F9FB;
--foreground: #18222B;
--card: #FFFFFF;
--card-foreground: #18222B;
--popover: #FFFFFF;
--popover-foreground: #18222B;
--primary: #24313B;
--primary-foreground: #ffffff;
--secondary: #E7EBF0;
--secondary-foreground: #111111;
--muted: #65717D;
--muted-foreground: #18222B;
--accent: #D96F5F;
--accent-foreground: #ffffff;
--destructive: #B84B43;
--border: #DDE3EA;
--input: #DDE3EA;
--ring: #D96F5F;
--chart-1: #24313B;
--chart-2: #E7EBF0;
--chart-3: #D96F5F;
--chart-4: #6F9B72;
--chart-5: #C79543;
--sidebar: #FFFFFF;
--sidebar-foreground: #18222B;
--sidebar-primary: #24313B;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #5F8EA8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #DDE3EA;
--sidebar-ring: #D96F5F;
--radius: 18px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #24313B;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #D96F5F;
--accent-foreground: #ffffff;
--destructive: #B84B43;
--border: #303642;
--input: #303642;
--ring: #D96F5F;
--chart-1: #24313B;
--chart-2: #E7EBF0;
--chart-3: #D96F5F;
--chart-4: #6F9B72;
--chart-5: #C79543;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #24313B;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #D96F5F;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #D96F5F;
--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 QuietGouacheGlassShadcnKit() {
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">Quiet Gouache Glass</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",
"cssVars": {
"dark": {
"accent": "#D96F5F",
"accent-foreground": "#ffffff",
"background": "#0f1115",
"border": "#303642",
"card": "#181b22",
"card-foreground": "#f8fafc",
"chart-1": "#24313B",
"chart-2": "#E7EBF0",
"chart-3": "#D96F5F",
"chart-4": "#6F9B72",
"chart-5": "#C79543",
"destructive": "#B84B43",
"foreground": "#f8fafc",
"input": "#303642",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#24313B",
"primary-foreground": "#ffffff",
"radius": "18px",
"ring": "#D96F5F",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"sidebar": "#181b22",
"sidebar-accent": "#D96F5F",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#24313B",
"sidebar-primary-foreground": "#ffffff",
"sidebar-ring": "#D96F5F"
},
"light": {
"accent": "#D96F5F",
"accent-foreground": "#ffffff",
"background": "#F8F9FB",
"border": "#DDE3EA",
"card": "#FFFFFF",
"card-foreground": "#18222B",
"chart-1": "#24313B",
"chart-2": "#E7EBF0",
"chart-3": "#D96F5F",
"chart-4": "#6F9B72",
"chart-5": "#C79543",
"destructive": "#B84B43",
"foreground": "#18222B",
"input": "#DDE3EA",
"muted": "#65717D",
"muted-foreground": "#18222B",
"popover": "#FFFFFF",
"popover-foreground": "#18222B",
"primary": "#24313B",
"primary-foreground": "#ffffff",
"radius": "18px",
"ring": "#D96F5F",
"secondary": "#E7EBF0",
"secondary-foreground": "#111111",
"sidebar": "#FFFFFF",
"sidebar-accent": "#5F8EA8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#DDE3EA",
"sidebar-foreground": "#18222B",
"sidebar-primary": "#24313B",
"sidebar-primary-foreground": "#ffffff",
"sidebar-ring": "#D96F5F"
},
"theme": {}
},
"meta": {
"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",
"languageId": "en-019e467f-0c85-7e13-a75e-8312444576e3",
"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"
]
},
"slug": "quiet-gouache-glass",
"source": "katagami"
},
"name": "quiet-gouache-glass",
"title": "Quiet Gouache Glass shadcn Theme",
"type": "registry:theme"
}
# Quiet Gouache Glass shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019e467f-0c85-7e13-a75e-8312444576e3`
Slug: `quiet-gouache-glass`
## Intent
An evolved child of Gouache System Glass that keeps Apple-clean frosted product minimalism and memorable paint intelligence, but removes all colored side rails, stripes, accent borders, and template-dashboard decoration in favor of quieter semantic color surfaces, icons, chips, and content-backed fields.
## 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:
{
"accent": "#D96F5F",
"background": "#F8F9FB",
"border": "#DDE3EA",
"error": "#B84B43",
"info": "#5F8EA8",
"muted": "#65717D",
"primary": "#24313B",
"secondary": "#E7EBF0",
"success": "#6F9B72",
"surface": "#FFFFFF",
"text": "#18222B",
"warning": "#C79543"
}
Typography:
{
"base_size": "16px",
"body_font": "Source Sans 3",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap",
"heading_font": "Geist",
"letter_spacing": "-0.018em",
"line_height": 1.5,
"mono_font": "IBM Plex Mono",
"scale_ratio": 1.22
}
## Visual character to preserve
- Use cool neutral glass panes with backdrop-filter blur, white-to-silver linear gradients, inset frost hairlines, and large rounded-rect geometry committed to one 18px family.
- Integrate gouache color as filled micro-surfaces, selected chips, icon-backed status dots, data marks, and one meaningful content panel rather than any one-sided border or stripe.
- Keep the page background clean and almost blank with soft radial light pools only, avoiding square grids, dotted notebook motifs, and decorative texture as default identity.
- Build hierarchy through spacious Apple-like typography, unboxed group alignment, subtle dividers, and a single offset workspace composition break instead of stacks of cards.
- Use a reduced color-theory set of muted coral, mineral blue, and moss green with warm amber reserved for warnings, applied through semantic foreground marks and filled states.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"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/quiet-gouache-glass/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: Use color only as filled chips, selected states, icons, data marks, foreground swatches, or one meaningful content-backed panel.; Keep glass surfaces neutral with consistent 18px radius geometry and inset frost hairlines.; Let product copy, material states, and review workflows create scene specificity.; Use muted coral, mineral blue, moss green, and rare amber with clear semantic ownership.
- Do not: Do not use colored side rails, left borders, side stripes, line markers, or accent borders on cards, buttons, rows, panels, or list items.; Do not use square-grid backgrounds, default dotted notebook texture, rainbow sprays, or hue-wheel palette demonstrations.; Do not present a generic analytics dashboard, CRM board, or component catalog as the main embodiment.; Do not add nested cards, arbitrary glow, gradient text, or decorative accents that fail a removal test.
## 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 QuietGouacheGlassShadcnKit() {
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">Quiet Gouache Glass</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
{
"breakpoints": "mobile 375px, tablet 768px, desktop 1440px with navigation becoming top segmented tabs below 820px",
"grid": "Twelve-column desktop grid with a 260px calm navigation column, fluid glass workbench, and offset inspector; collapses to two columns on tablet and one column on mobile.",
"whitespace": "Large outer gutters and precise 16-24px internal gaps create calm; unframed spacing is preferred over wrapping every unit in a 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-019e467f-0c85-7e13-a75e-8312444576e3",
"name": "Quiet Gouache Glass",
"slug": "quiet-gouache-glass"
},
"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": [
"Use cool neutral glass panes with backdrop-filter blur, white-to-silver linear gradients, inset frost hairlines, and large rounded-rect geometry committed to one 18px family.",
"Integrate gouache color as filled micro-surfaces, selected chips, icon-backed status dots, data marks, and one meaningful content panel rather than any one-sided border or stripe.",
"Keep the page background clean and almost blank with soft radial light pools only, avoiding square grids, dotted notebook motifs, and decorative texture as default identity.",
"Build hierarchy through spacious Apple-like typography, unboxed group alignment, subtle dividers, and a single offset workspace composition break instead of stacks of cards.",
"Use a reduced color-theory set of muted coral, mineral blue, and moss green with warm amber reserved for warnings, applied through semantic foreground marks and filled states."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"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": "Quiet Gouache Glass 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": [
"Use color only as filled chips, selected states, icons, data marks, foreground swatches, or one meaningful content-backed panel.",
"Keep glass surfaces neutral with consistent 18px radius geometry and inset frost hairlines.",
"Let product copy, material states, and review workflows create scene specificity.",
"Use muted coral, mineral blue, moss green, and rare amber with clear semantic ownership."
],
"dont": [
"Do not use colored side rails, left borders, side stripes, line markers, or accent borders on cards, buttons, rows, panels, or list items.",
"Do not use square-grid backgrounds, default dotted notebook texture, rainbow sprays, or hue-wheel palette demonstrations.",
"Do not present a generic analytics dashboard, CRM board, or component catalog as the main embodiment.",
"Do not add nested cards, arbitrary glow, gradient text, or decorative accents that fail a removal test."
]
}
}