A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
A generation-2 revision of Chromatic Decision Lab that keeps its semantic-colour thesis and gives it one physical object — the die-cut chip — to derive its geometry, its separators and its motion from.
A workbench: command bar, a 236px slot rail of named roles, a flexible canvas, a 336px inspector on the selected object. Each area holds a real task and colour carries state, ownership or action meaning. The landing inverts this into a six-scene film in which the same rail becomes the instrument that counts assignments.
Graphite type, scale and space establish hierarchy first. Vivid colour is spent only on semantic roles: field states, active selections, data thresholds, realtime presence and the single primary action. One blue surface per view.
Professional catalog density on an 8px rhythm — compact token chips, 44px controls, 13px mono micro-labels — with enough ivory around each colour block that it reads as deliberate rather than decorative.
12-column workbench — fixed 236px slot rail, flexible canvas, 336px inspector. Below 1180px the inspector moves under the canvas; below 860px the rail becomes a two-up header; below 700px everything is a single column with portrait art direction.
wide 1800+, desktop 1440, tablet 861-1024 (two columns held and tightened), narrow 768-860 (single column, content trimmed to the stage), phone 390-700 (its own portrait composition)
8px base. 24-30px pane padding, 26px section gaps, 48px+ hero gutters, and generous headroom above every title so a heading never sits against the top of its plane.
kerf
Flat matte opaque colour planes die-cut from gouache-loaded card and butted together, separated by a hairline kerf gap of warm ivory paper, under a low raking sidelight that throws one crisp shadow along each cut. No gradient inside any plane.
One full-bleed full-screen plate at the top of the landing, served through --hero-image: a broad field of loose die-cut chips on ivory paper with a large uninterrupted paper region reserved for the display type.
SVG primitives cut from the same square geometry — a triangle, a cross of two bars, a filled square. No emoji, no glyph arrows, no stroke icon sets.
# Gamut ## Philosophy A premium product surface that treats vivid colour as operating infrastructure: every hue is a die-cut chip seated in a named slot, answerable for exactly one job — action, attention, selection, confirmation, insight or realtime presence — inside a calm ivory-and-graphite operating plane. ### Values - Colour is answerable for a job, or it is cut - One geometry: the chip is square, so nothing rounds - The kerf between two planes replaces every drawn border - Bright hues fill; ink variants speak - Catalog density with editorial headroom ### Anti-Values - Rainbow decoration, confetti, blobs and neon garnish - Decorative side rails and edge stripes on cards, rows or panels - Mixed corner radii, and rounded cards in a square language - Bright accent hues carrying small text - Boxed navigation floating in a rounded widget ### Visual Character - Warm ivory ground #F1EDE3 with pure white planes and #15161A graphite ink; the only texture is the 1px kerf channel between butted planes. - Border-radius is 0 on every element in every artifact — cards, buttons, inputs, chips, thumbnails, media and knobs alike. - Elevation is a hard 2px offset shadow with no blur, deepening to 4px on hover, so a plane reads as cut card catching a raking light. - Semantic colour appears as filled square chips, heat cells, whole-object selection washes and focus inks, always beside a word or a number. - Two families only: Instrument Sans for display and 17px regular body, IBM Plex Mono at 12px uppercase for token names, counters and instrument labels. ### Lineage > A generation-2 revision of Chromatic Decision Lab that keeps its semantic-colour thesis and gives it one physical object — the die-cut chip — to derive its geometry, its separators and its motion from. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F1EDE3` | | surface | `#FFFFFF` | | surface_solid | `#FFFFFF` | | text | `#15161A` | | muted | `#5E626B` | | border | `#DFD8C8` | | accent | `#2059D6` | | accent_2 | `#F0563A` | | accent_soft | `#EDE7FF` | | on_accent | `#FFFFFF` | | success | `#8CBE2E` | | warning | `#E8A317` | | error | `#C0392B` | | info | `#16A2AE` | ### Typography - **Base Size**: 17px - **Body Font**: Instrument Sans - **Heading Font**: Instrument Sans - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.011em - **Line Height**: 1.55 - **Scale Ratio**: 1.18 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap ### Radii - **None**: 0px - **Md**: 0px - **Lg**: 0px - **Full**: 0px ### Shadows - **Sm**: 2px 2px 0 rgba(21, 22, 26, 0.12) - **Md**: 4px 4px 0 rgba(21, 22, 26, 0.14) - **Lg**: 0 24px 48px rgba(21, 22, 26, 0.10) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: Warm ivory paper ground with pure white planes and graphite ink; the only texture is the kerf channel between butted planes. - **Card Style**: Square white plane, zero radius, no border, seated with a hard 2px offset shadow that deepens to 4px on hover. - **Bg Pattern**: none — the 1px ivory kerf channel between planes is the language's whole texture ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: solid - **Character**: The kerf: planes are separated by a 1px channel of the ivory ground and a hard cut shadow, not by a drawn frame. Drawn hairlines appear only as row rules inside tables and lists; an accent never runs along one edge of anything. ### Motion - **Duration**: 200ms - **Easing**: cubic-bezier(0.2, 0.7, 0.2, 1) - **Philosophy**: Chips seat: a short travel with a hard stop. Nothing bounces, nothing wobbles, colour arrives by fill rather than by fade, and every scroll effect gets at least 80vh of travel so it can be watched. ## Rules ### Composition A workbench: command bar, a 236px slot rail of named roles, a flexible canvas, a 336px inspector on the selected object. Each area holds a real task and colour carries state, ownership or action meaning. The landing inverts this into a six-scene film in which the same rail becomes the instrument that counts assignments. ### Hierarchy Graphite type, scale and space establish hierarchy first. Vivid colour is spent only on semantic roles: field states, active selections, data thresholds, realtime presence and the single primary action. One blue surface per view. ### Density Professional catalog density on an 8px rhythm — compact token chips, 44px controls, 13px mono micro-labels — with enough ivory around each colour block that it reads as deliberate rather than decorative. ### Signature Patterns - Chip into slot: a square chip seats into a named slot with a short travel and a hard stop, and the slot then carries its mono token name and usage label. - The kerf: two butted planes are separated by a 1px channel of the ivory ground plus a hard 2px offset shadow — never by a drawn border. - Heat cells: quantitative colour fills the whole cell and always prints its number on top, running action to paper to attention and never through the selection hue. - Whole-object selection: the selected thing is seated inside a violet plane with a graphite label and a keyboard hint, never marked by an edge rail. - Ink variants: the moment a role becomes text it switches from its fill to its measured dark ink, so no bright hue ever carries a small glyph. - The assignment rail: six slots in the page chrome that fill as roles are assigned, reading 00/06 to 06/06. ## Layout ### Grid 12-column workbench — fixed 236px slot rail, flexible canvas, 336px inspector. Below 1180px the inspector moves under the canvas; below 860px the rail becomes a two-up header; below 700px everything is a single column with portrait art direction. ### Breakpoints wide 1800+, desktop 1440, tablet 861-1024 (two columns held and tightened), narrow 768-860 (single column, content trimmed to the stage), phone 390-700 (its own portrait composition) ### Whitespace 8px base. 24-30px pane padding, 26px section gaps, 48px+ hero gutters, and generous headroom above every title so a heading never sits against the top of its plane. ## Guidance ### Do - Give every vivid hue a named role and repeat it across actions, states, rows, tabs, cells and workflow steps. - Use colour as filled planes, cells, selection washes, focus inks and tags, always with a visible label or number beside it. - Keep exactly one blue surface per view and let everything else drop to paper or ink. - Separate planes with the 1px kerf channel and the hard cut shadow. - Switch an accent to its measured ink variant the moment it becomes text. - Pad generously above every title and keep the ground quiet under every line of copy. ### Don't - Do not round anything — a rounded card in a square language is the defect this revision exists to fix. - Do not draw a border around a plane, and never put an accent stripe on one edge of a card, row or panel. - Do not let a quantitative ramp pass through the selection hue or borrow any role colour that already means something else. - Do not put a bright accent under small text, on ivory or over imagery. - Do not trap navigation inside a floating card or a pill bar. - Do not let colour be garnish; if a hue is not answerable for a job, cut it. ### Accessibility Hue is never the only signal: every state pairs its chip with a word, a number or a shape. Interactive text meets WCAG AA against its composited background (measured 5.3:1 to 15.5:1); focus is a 2px selection-ink outline offset 3px, and controls are at least 44px tall. The exposure ramp survives greyscale because every cell prints its value. ## Imagery Direction ### Pairs With kerf ### Illustration Style Flat matte opaque colour planes die-cut from gouache-loaded card and butted together, separated by a hairline kerf gap of warm ivory paper, under a low raking sidelight that throws one crisp shadow along each cut. No gradient inside any plane. ### Hero Image Direction One full-bleed full-screen plate at the top of the landing, served through --hero-image: a broad field of loose die-cut chips on ivory paper with a large uninterrupted paper region reserved for the display type. ### Icon Style SVG primitives cut from the same square geometry — a triangle, a cross of two bars, a filled square. No emoji, no glyph arrows, no stroke icon sets. ### Image Gen Prompts - a broad field of loose square die-cut colour chips scattered across ivory paper, one third of the frame left as bare paper - a specimen wall of small colour chips seated in a strict grid of shallow cut slots, seen straight on - a dense city block in high oblique view with a quiet uncut sky band across the top - a macro of a few large chips seated into cut slots, the kerf gaps and their shadow lines dominating ### Plate Slots - **--Hero-Image**: hero-chip-field.jpg — scene 1 full-bleed hero, quiet ivory field at left - **--Plate-2a**: plate-2a-specimen-dry.jpg — scene 2 twin-plate base (dry ink) - **--Plate-2b**: plate-2b-specimen-wet.jpg — scene 2 twin-plate overlay strips (wet ink) - **--Plate-3**: plate-3-city-block.jpg — scene 3 full-bleed ground, quiet sky band for the headline - **--Plate-4**: plate-4-chip-macro.jpg — scene 4 plate, and the embodiment media card - **--Plate-5**: plate-5-headland.jpg — scene 5 selected object, and the dashboard inspector preview
---
version: "alpha"
name: "Gamut"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F1EDE3"
surface: "#FFFFFF"
surface_solid: "#FFFFFF"
text: "#15161A"
muted: "#5E626B"
border: "#DFD8C8"
accent: "#2059D6"
accent_2: "#F0563A"
accent_soft: "#EDE7FF"
on_accent: "#FFFFFF"
success: "#8CBE2E"
warning: "#E8A317"
error: "#C0392B"
info: "#16A2AE"
typography:
headline-lg:
fontFamily: "Instrument Sans"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.011em"
headline-md:
fontFamily: "Instrument Sans"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.011em"
body-md:
fontFamily: "Instrument Sans"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.011em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "0px"
lg: "0px"
full: "0px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_solid:
backgroundColor: "{colors.surface_solid}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_soft:
backgroundColor: "{colors.accent_soft}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#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"
---
# Gamut
## Overview
A premium product surface that treats vivid colour as operating infrastructure: every hue is a die-cut chip seated in a named slot, answerable for exactly one job — action, attention, selection, confirmation, insight or realtime presence — inside a calm ivory-and-graphite operating plane.
### Values
- Colour is answerable for a job, or it is cut
- One geometry: the chip is square, so nothing rounds
- The kerf between two planes replaces every drawn border
- Bright hues fill; ink variants speak
- Catalog density with editorial headroom
### Anti-Values
- Rainbow decoration, confetti, blobs and neon garnish
- Decorative side rails and edge stripes on cards, rows or panels
- Mixed corner radii, and rounded cards in a square language
- Bright accent hues carrying small text
- Boxed navigation floating in a rounded widget
### Visual Character
- Warm ivory ground #F1EDE3 with pure white planes and #15161A graphite ink; the only texture is the 1px kerf channel between butted planes.
- Border-radius is 0 on every element in every artifact — cards, buttons, inputs, chips, thumbnails, media and knobs alike.
- Elevation is a hard 2px offset shadow with no blur, deepening to 4px on hover, so a plane reads as cut card catching a raking light.
- Semantic colour appears as filled square chips, heat cells, whole-object selection washes and focus inks, always beside a word or a number.
- Two families only: Instrument Sans for display and 17px regular body, IBM Plex Mono at 12px uppercase for token names, counters and instrument labels.
### Lineage
> A generation-2 revision of Chromatic Decision Lab that keeps its semantic-colour thesis and gives it one physical object — the die-cut chip — to derive its geometry, its separators and its motion from.
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| bg | `#F1EDE3` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#15161A` |
| muted | `#5E626B` |
| border | `#DFD8C8` |
| accent | `#2059D6` |
| accent_2 | `#F0563A` |
| accent_soft | `#EDE7FF` |
| on_accent | `#FFFFFF` |
| success | `#8CBE2E` |
| warning | `#E8A317` |
| error | `#C0392B` |
| info | `#16A2AE` |
## Typography
- **Headline-Lg**: Instrument Sans, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Sans, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Instrument Sans, 17px, 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`
- **Step-8**: `96px`
### Grid
12-column workbench — fixed 236px slot rail, flexible canvas, 336px inspector. Below 1180px the inspector moves under the canvas; below 860px the rail becomes a two-up header; below 700px everything is a single column with portrait art direction.
### Breakpoints
wide 1800+, desktop 1440, tablet 861-1024 (two columns held and tightened), narrow 768-860 (single column, content trimmed to the stage), phone 390-700 (its own portrait composition)
### Whitespace
8px base. 24-30px pane padding, 26px section gaps, 48px+ hero gutters, and generous headroom above every title so a heading never sits against the top of its plane.
## Elevation & Depth
### Shadows
- **Sm**: 2px 2px 0 rgba(21, 22, 26, 0.12)
- **Md**: 4px 4px 0 rgba(21, 22, 26, 0.14)
- **Lg**: 0 24px 48px rgba(21, 22, 26, 0.10)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`
### Surfaces
- **Treatment**: Warm ivory paper ground with pure white planes and graphite ink; the only texture is the kerf channel between butted planes.
- **Card Style**: Square white plane, zero radius, no border, seated with a hard 2px offset shadow that deepens to 4px on hover.
- **Bg Pattern**: none — the 1px ivory kerf channel between planes is the language's whole texture
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: The kerf: planes are separated by a 1px channel of the ivory ground and a hard cut shadow, not by a drawn frame. Drawn hairlines appear only as row rules inside tables and lists; an accent never runs along one edge of anything.
## Components
### Composition
A workbench: command bar, a 236px slot rail of named roles, a flexible canvas, a 336px inspector on the selected object. Each area holds a real task and colour carries state, ownership or action meaning. The landing inverts this into a six-scene film in which the same rail becomes the instrument that counts assignments.
### Hierarchy
Graphite type, scale and space establish hierarchy first. Vivid colour is spent only on semantic roles: field states, active selections, data thresholds, realtime presence and the single primary action. One blue surface per view.
### Density
Professional catalog density on an 8px rhythm — compact token chips, 44px controls, 13px mono micro-labels — with enough ivory around each colour block that it reads as deliberate rather than decorative.
### Signature Patterns
- Chip into slot: a square chip seats into a named slot with a short travel and a hard stop, and the slot then carries its mono token name and usage label.
- The kerf: two butted planes are separated by a 1px channel of the ivory ground plus a hard 2px offset shadow — never by a drawn border.
- Heat cells: quantitative colour fills the whole cell and always prints its number on top, running action to paper to attention and never through the selection hue.
- Whole-object selection: the selected thing is seated inside a violet plane with a graphite label and a keyboard hint, never marked by an edge rail.
- Ink variants: the moment a role becomes text it switches from its fill to its measured dark ink, so no bright hue ever carries a small glyph.
- The assignment rail: six slots in the page chrome that fill as roles are assigned, reading 00/06 to 06/06.
## 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-019ffc42-96c7-7e00-999e-2c6475924f74/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 Give every vivid hue a named role and repeat it across actions, states, rows, tabs, cells and workflow steps.
- Do Use colour as filled planes, cells, selection washes, focus inks and tags, always with a visible label or number beside it.
- Do Keep exactly one blue surface per view and let everything else drop to paper or ink.
- Do Separate planes with the 1px kerf channel and the hard cut shadow.
- Do Switch an accent to its measured ink variant the moment it becomes text.
- Do Pad generously above every title and keep the ground quiet under every line of copy.
- Don't Do not round anything — a rounded card in a square language is the defect this revision exists to fix.
- Don't Do not draw a border around a plane, and never put an accent stripe on one edge of a card, row or panel.
- Don't Do not let a quantitative ramp pass through the selection hue or borrow any role colour that already means something else.
- Don't Do not put a bright accent under small text, on ivory or over imagery.
- Don't Do not trap navigation inside a floating card or a pill bar.
- Don't Do not let colour be garnish; if a hue is not answerable for a job, cut it.
### Accessibility
Hue is never the only signal: every state pairs its chip with a word, a number or a shape. Interactive text meets WCAG AA against its composited background (measured 5.3:1 to 15.5:1); focus is a 2px selection-ink outline offset 3px, and controls are at least 44px tall. The exposure ramp survives greyscale because every cell prints its value.
## Imagery Direction
### Pairs With
kerf
### Illustration Style
Flat matte opaque colour planes die-cut from gouache-loaded card and butted together, separated by a hairline kerf gap of warm ivory paper, under a low raking sidelight that throws one crisp shadow along each cut. No gradient inside any plane.
### Hero Image Direction
One full-bleed full-screen plate at the top of the landing, served through --hero-image: a broad field of loose die-cut chips on ivory paper with a large uninterrupted paper region reserved for the display type.
### Icon Style
SVG primitives cut from the same square geometry — a triangle, a cross of two bars, a filled square. No emoji, no glyph arrows, no stroke icon sets.
### Image Gen Prompts
- a broad field of loose square die-cut colour chips scattered across ivory paper, one third of the frame left as bare paper
- a specimen wall of small colour chips seated in a strict grid of shallow cut slots, seen straight on
- a dense city block in high oblique view with a quiet uncut sky band across the top
- a macro of a few large chips seated into cut slots, the kerf gaps and their shadow lines dominating
### Plate Slots
- **--Hero-Image**: hero-chip-field.jpg — scene 1 full-bleed hero, quiet ivory field at left
- **--Plate-2a**: plate-2a-specimen-dry.jpg — scene 2 twin-plate base (dry ink)
- **--Plate-2b**: plate-2b-specimen-wet.jpg — scene 2 twin-plate overlay strips (wet ink)
- **--Plate-3**: plate-3-city-block.jpg — scene 3 full-bleed ground, quiet sky band for the headline
- **--Plate-4**: plate-4-chip-macro.jpg — scene 4 plate, and the embodiment media card
- **--Plate-5**: plate-5-headland.jpg — scene 5 selected object, and the dashboard inspector preview
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "gamut",
"type": "registry:theme",
"title": "Gamut shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F1EDE3",
"foreground": "#15161A",
"card": "#FFFFFF",
"card-foreground": "#15161A",
"popover": "#FFFFFF",
"popover-foreground": "#15161A",
"primary": "#15161A",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#5E626B",
"muted-foreground": "#15161A",
"accent": "#2059D6",
"accent-foreground": "#ffffff",
"destructive": "#C0392B",
"border": "#DFD8C8",
"input": "#DFD8C8",
"ring": "#2059D6",
"chart-1": "#15161A",
"chart-2": "#f4f4f5",
"chart-3": "#2059D6",
"chart-4": "#8CBE2E",
"chart-5": "#E8A317",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#15161A",
"sidebar-primary": "#15161A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#16A2AE",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#DFD8C8",
"sidebar-ring": "#2059D6",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#15161A",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#2059D6",
"accent-foreground": "#ffffff",
"destructive": "#C0392B",
"border": "#303642",
"input": "#303642",
"ring": "#2059D6",
"chart-1": "#15161A",
"chart-2": "#f4f4f5",
"chart-3": "#2059D6",
"chart-4": "#8CBE2E",
"chart-5": "#E8A317",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#15161A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2059D6",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#2059D6",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ffc42-96c7-7e00-999e-2c6475924f74",
"slug": "gamut",
"componentManifest": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"nativeTokenNames": {
"colors": [
"accent",
"accent_2",
"accent_soft",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"success",
"surface",
"surface_solid",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
A generated style is an aggregate of many influences — credit is given to the artists and traditions it draws on, not a claim of authorship.
produced by claude-opus-5 · sourced by claude-opus-5 · images by flux-2-pro
Keep Gamut and swap a palette and an art style onto it. The landing & dashboard recolor live.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #F1EDE3;
--foreground: #15161A;
--card: #FFFFFF;
--card-foreground: #15161A;
--popover: #FFFFFF;
--popover-foreground: #15161A;
--primary: #15161A;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #5E626B;
--muted-foreground: #15161A;
--accent: #2059D6;
--accent-foreground: #ffffff;
--destructive: #C0392B;
--border: #DFD8C8;
--input: #DFD8C8;
--ring: #2059D6;
--chart-1: #15161A;
--chart-2: #f4f4f5;
--chart-3: #2059D6;
--chart-4: #8CBE2E;
--chart-5: #E8A317;
--sidebar: #FFFFFF;
--sidebar-foreground: #15161A;
--sidebar-primary: #15161A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #16A2AE;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #DFD8C8;
--sidebar-ring: #2059D6;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #15161A;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #2059D6;
--accent-foreground: #ffffff;
--destructive: #C0392B;
--border: #303642;
--input: #303642;
--ring: #2059D6;
--chart-1: #15161A;
--chart-2: #f4f4f5;
--chart-3: #2059D6;
--chart-4: #8CBE2E;
--chart-5: #E8A317;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #15161A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2059D6;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #2059D6;
--radius: 0px;
}
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 GamutShadcnKit() {
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">Gamut</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "gamut",
"type": "registry:theme",
"extends": "none",
"cssVars": {
"theme": {
"font-sans": "Instrument Sans, ui-sans-serif, system-ui, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace",
"radius": "0rem"
},
"light": {
"background": "#F1EDE3",
"foreground": "#15161A",
"card": "#FFFFFF",
"card-foreground": "#15161A",
"popover": "#FFFFFF",
"popover-foreground": "#15161A",
"primary": "#2059D6",
"primary-foreground": "#FFFFFF",
"secondary": "#F7F4EC",
"secondary-foreground": "#15161A",
"muted": "#F7F4EC",
"muted-foreground": "#5E626B",
"accent": "#EDE7FF",
"accent-foreground": "#4522B8",
"destructive": "#C0392B",
"destructive-foreground": "#FFFFFF",
"border": "#DFD8C8",
"input": "#DFD8C8",
"ring": "#4522B8",
"chart-1": "#2059D6",
"chart-2": "#F0563A",
"chart-3": "#6B3FD4",
"chart-4": "#8CBE2E",
"chart-5": "#E8A317",
"sidebar": "#F7F4EC",
"sidebar-foreground": "#15161A",
"sidebar-primary": "#2059D6",
"sidebar-primary-foreground": "#FFFFFF",
"sidebar-accent": "#EDE7FF",
"sidebar-accent-foreground": "#4522B8",
"sidebar-border": "#DFD8C8",
"sidebar-ring": "#4522B8"
},
"dark": {
"background": "#15161A",
"foreground": "#F1EDE3",
"card": "#1D1F25",
"card-foreground": "#F1EDE3",
"popover": "#1D1F25",
"popover-foreground": "#F1EDE3",
"primary": "#5B8CF5",
"primary-foreground": "#15161A",
"secondary": "#24262E",
"secondary-foreground": "#F1EDE3",
"muted": "#24262E",
"muted-foreground": "#A5A79F",
"accent": "#2E2450",
"accent-foreground": "#C9B8FF",
"destructive": "#E0604F",
"destructive-foreground": "#15161A",
"border": "#2E3038",
"input": "#2E3038",
"ring": "#9E86FF",
"chart-1": "#5B8CF5",
"chart-2": "#F0563A",
"chart-3": "#9E86FF",
"chart-4": "#8CBE2E",
"chart-5": "#E8A317",
"sidebar": "#1D1F25",
"sidebar-foreground": "#F1EDE3",
"sidebar-primary": "#5B8CF5",
"sidebar-primary-foreground": "#15161A",
"sidebar-accent": "#2E2450",
"sidebar-accent-foreground": "#C9B8FF",
"sidebar-border": "#2E3038",
"sidebar-ring": "#9E86FF"
}
},
"visualProfile": {
"language": "Gamut",
"radiusStance": "zero",
"radiusScale": {
"none": "0px",
"md": "0px",
"lg": "0px",
"full": "0px"
},
"borderStance": "none — planes are separated by a 1px ivory kerf channel and a hard 2px offset shadow",
"shadowStance": "hard offset, no blur: 2px 2px 0 for a seated plane, 4px 4px 0 on hover, one soft lift for floating plates",
"surface": "warm ivory ground #F1EDE3, white planes, graphite ink",
"accentBudget": 3,
"accents": [
"#2059D6",
"#F0563A",
"#6B3FD4"
],
"semanticRoles": {
"success": "#8CBE2E",
"warning": "#E8A317",
"error": "#C0392B",
"info": "#16A2AE"
},
"inkVariants": {
"accent": "#123A9E",
"accent_2": "#A32B14",
"select": "#4522B8",
"success": "#3F5A0E",
"warning": "#6E4A00",
"error": "#8E2018",
"info": "#0A5A62"
},
"quantitativeRamp": [
"#2059D6",
"#E8E2D4",
"#F0563A"
],
"bodySize": "17px",
"bodyWeight": 400,
"fontFamilies": [
"Instrument Sans",
"IBM Plex Mono"
],
"signatureMechanic": "chip into slot — a square chip seats into a named slot that carries its mono token and usage label",
"bannedPatterns": [
"rounded corners",
"drawn borders",
"edge accent rails",
"pill controls",
"emoji on controls",
"glyph arrows in copy",
"boxed navigation",
"gradients"
]
},
"meta": {
"generatedBy": "katagami-agent",
"language": "gamut",
"generation": 2,
"parent": "chromatic-decision-lab",
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"components": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
]
}
}
# Gamut shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ffc42-96c7-7e00-999e-2c6475924f74`
Slug: `gamut`
## Intent
A premium product surface that treats vivid colour as operating infrastructure: every hue is a die-cut chip seated in a named slot, answerable for exactly one job — action, attention, selection, confirmation, insight or realtime presence — inside a calm ivory-and-graphite operating plane.
## Required primitives
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
## Token cues
Colors:
{
"bg": "#F1EDE3",
"surface": "#FFFFFF",
"surface_solid": "#FFFFFF",
"text": "#15161A",
"muted": "#5E626B",
"border": "#DFD8C8",
"accent": "#2059D6",
"accent_2": "#F0563A",
"accent_soft": "#EDE7FF",
"on_accent": "#FFFFFF",
"success": "#8CBE2E",
"warning": "#E8A317",
"error": "#C0392B",
"info": "#16A2AE"
}
Typography:
{
"base_size": "17px",
"body_font": "Instrument Sans",
"heading_font": "Instrument Sans",
"mono_font": "IBM Plex Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.011em",
"line_height": "1.55",
"scale_ratio": "1.18",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap"
}
## Visual character to preserve
- Warm ivory ground #F1EDE3 with pure white planes and #15161A graphite ink; the only texture is the 1px kerf channel between butted planes.
- Border-radius is 0 on every element in every artifact — cards, buttons, inputs, chips, thumbnails, media and knobs alike.
- Elevation is a hard 2px offset shadow with no blur, deepening to 4px on hover, so a plane reads as cut card catching a raking light.
- Semantic colour appears as filled square chips, heat cells, whole-object selection washes and focus inks, always beside a word or a number.
- Two families only: Instrument Sans for display and 17px regular body, IBM Plex Mono at 12px uppercase for token names, counters and instrument labels.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"motion": "still",
"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/gamut/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: Give every vivid hue a named role and repeat it across actions, states, rows, tabs, cells and workflow steps.; Use colour as filled planes, cells, selection washes, focus inks and tags, always with a visible label or number beside it.; Keep exactly one blue surface per view and let everything else drop to paper or ink.; Separate planes with the 1px kerf channel and the hard cut shadow.; Switch an accent to its measured ink variant the moment it becomes text.; Pad generously above every title and keep the ground quiet under every line of copy.
- Do not: Do not round anything — a rounded card in a square language is the defect this revision exists to fix.; Do not draw a border around a plane, and never put an accent stripe on one edge of a card, row or panel.; Do not let a quantitative ramp pass through the selection hue or borrow any role colour that already means something else.; Do not put a bright accent under small text, on ivory or over imagery.; Do not trap navigation inside a floating card or a pill bar.; Do not let colour be garnish; if a hue is not answerable for a job, cut it.
## 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 GamutShadcnKit() {
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">Gamut</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "12-column workbench — fixed 236px slot rail, flexible canvas, 336px inspector. Below 1180px the inspector moves under the canvas; below 860px the rail becomes a two-up header; below 700px everything is a single column with portrait art direction.",
"breakpoints": "wide 1800+, desktop 1440, tablet 861-1024 (two columns held and tightened), narrow 768-860 (single column, content trimmed to the stage), phone 390-700 (its own portrait composition)",
"whitespace": "8px base. 24-30px pane padding, 26px section gaps, 48px+ hero gutters, and generous headroom above every title so a heading never sits against the top of its plane."
}
{
"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-019ffc42-96c7-7e00-999e-2c6475924f74",
"name": "Gamut",
"slug": "gamut"
},
"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": [
"Warm ivory ground #F1EDE3 with pure white planes and #15161A graphite ink; the only texture is the 1px kerf channel between butted planes.",
"Border-radius is 0 on every element in every artifact — cards, buttons, inputs, chips, thumbnails, media and knobs alike.",
"Elevation is a hard 2px offset shadow with no blur, deepening to 4px on hover, so a plane reads as cut card catching a raking light.",
"Semantic colour appears as filled square chips, heat cells, whole-object selection washes and focus inks, always beside a word or a number.",
"Two families only: Instrument Sans for display and 17px regular body, IBM Plex Mono at 12px uppercase for token names, counters and instrument labels."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"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": "Gamut 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": [
"Give every vivid hue a named role and repeat it across actions, states, rows, tabs, cells and workflow steps.",
"Use colour as filled planes, cells, selection washes, focus inks and tags, always with a visible label or number beside it.",
"Keep exactly one blue surface per view and let everything else drop to paper or ink.",
"Separate planes with the 1px kerf channel and the hard cut shadow.",
"Switch an accent to its measured ink variant the moment it becomes text.",
"Pad generously above every title and keep the ground quiet under every line of copy."
],
"dont": [
"Do not round anything — a rounded card in a square language is the defect this revision exists to fix.",
"Do not draw a border around a plane, and never put an accent stripe on one edge of a card, row or panel.",
"Do not let a quantitative ramp pass through the selection hue or borrow any role colour that already means something else.",
"Do not put a bright accent under small text, on ivory or over imagery.",
"Do not trap navigation inside a floating card or a pill bar.",
"Do not let colour be garnish; if a hue is not answerable for a job, cut it."
]
}
}