back to gallery
design language·quiet-gouache-glass

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.

the spec

specification

philosophy
summary
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 restraintsemantic gouache color integrationpremium product clarityquiet structural hierarchylineage-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
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
accent
#D96F5F
background
#F8F9FB
border
#DDE3EA
error
#B84B43
info
#5F8EA8
muted
#65717D
primary
#24313B
secondary
#E7EBF0
success
#6F9B72
surface
#FFFFFF
text
#18222B
warning
#C79543
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
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.
avoid
  • 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"
      ]
    }
  }
}
```
in the wild

embodiments

the full element showcase
embodiment · quiet-gouache-glass
DESIGN.md

at a glance

Palette

Typography

headline-lgGeist · 29px · 700

The quick brown fox jumps

headline-mdGeist · 24px · 600

The quick brown fox jumps

body-mdSource Sans 3 · 16px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

Components

New
Card title

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

full9999px
lg28px
md18px
none0px
sm10px
shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback
shadcn compatibility only
The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.
fallbackprimitives render
Compatibility proof
Local shadcn-style primitives accept the generated theme variables.
primaryaccentsurfacemutedwarningerror
table rhythm
buttonok
cardok
inputok
recommendedcompatibility fallback

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
shadcn add
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table
theme css
: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;
}
tsx starter
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>
  );
}
theme JSONstored + verified
{
  "$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"
}
component recipescompatibility fallback
# 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."
}
preview shotscompatibility fallback
{
  "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."
    ]
  }
}
related

More like this