A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Impose pages onto one registration sheet, not as boxed cards on a blank canvas. High-level regions are cells of a hairline crossfield, pinned at the corner by a registration crosshair; section heads are crop-mark rows — a signature letter, a heading, a right-aligned issue label over a single ink rule. Asymmetric 8/4 or 7/5 splits keep the editorial tension.
Use scale, weight, the mono signature, and rule presence to establish rank; avoid depth-heavy shadows and rely on alignment, the hairline crossfield, and crop marks for authority. The vermilion lock is reserved for flagged state, selection, a colour-pop on one word, and the hot mark in a tick-gauge.
Medium-dense to dense. Cells may be compact, but every dense area is buffered by deliberate whitespace bands and the visible crossfield; generous padding above titles.
The imposition crossfield: every module is registered into one hairline grid with corner registration-crosshairs; quantities read as discrete dot-circle plate marks (filled when set, ringed vermilion when locked); a single vermilion lock marks the cell still being chased — never a wash.
Desktop is a 12-column editorial grid on an 8px base; key compositions span 8/4 or 7/5 column splits for asymmetric tension, contained at ~1200–1240px. Dashboards use a 248px ink-navy register sidebar plus a crossfield of stat tiles and proof panels. Tablet collapses the sidebar to a top register bar; phone is a single stack preserving the crossfield and corner crosshairs.
At 1080px the crossfield drops to two columns. At 860px the dashboard sidebar collapses to a horizontal top register. At 620px all grids become a single column and non-essential nav links drop. At 390px action clusters go full-width, the headline clamps and wraps, table overflow is allowed only inside the scrollable data panel, and nothing else overflows horizontally.
Use large top margins and inter-section bands for institutional breathing room around dense content; whitespace is measured, never soft. Always pad above titles.
Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.
reglet-letterpress-rule
Imagery uses the letterpress relief technique: subjects pressed hard into cool cotton-rag paper, value built from broken-ink dry-press texture and fine engraved hatching, in a strict two-ink registration with one small vermilion spot accent. Heroes are full-bleed worked fields with the ink mass weighted to one side and a calm band of bare cool paper left open for the overlay.
Use full-bleed relief fields for heroes with the ink mass weighted to one side and a bare cool-paper band left for the overlay; use centered single-subject print specimens for feature and avatar slots, each pinned by a corner registration crosshair; keep empty-states mostly bare paper with one faint impression.
# Quire ## Philosophy Quire imposes the whole interface onto one registration sheet: modules are registered into a hairline crossfield, pinned at the corner by a crosshair target, and a single vermilion lock marks the one cell the desk is still chasing. It reinterprets an institutional technology-review source — disciplined grids, rigorous typographic hierarchy, restrained signal colour — but moves it off the warm-paper red-black-white spread and onto a cool proofing sheet, where a registration crosshair, not a margin rule, carries the structure. Depth is never a shadow; the hairline crossfield and the crop mark do the framing, and a quiet cobalt is the only counter-ink. ### Values - imposition over stacked cards - one ownable mark — the registration crosshair - machine-honest counts read as discrete plate marks - restrained vermilion signalling used like a registration lock - high-contrast ink-navy on cool proofing paper ### Anti-Values - rounded consumer-app softness - the SaaS hero template (eyebrow tag, button pair, stat trio) - serif↔italic headline swaps - accent floods and decorative gradients - defaulting the ground to white or warm paper ### Visual Character - every region is imposed into one hairline crossfield with corner registration-crosshairs, so the page reads as a proofing sheet rather than a pile of cards - the registration crosshair — a + target with a tick-ring — is the single ownable mark across masthead, buttons, nav, alerts and corner pins, recoloured vermilion only where a cell is locked - predominantly cool proofing-paper surfaces interrupted by 1px ink rules and crop-mark corners, with a restrained vermilion lock used only for flagged state, selection and a colour-pop on one word - quantities read as a run of discrete dot-circle plate marks — filled when set, ringed vermilion when locked — never a smooth bar - verdicts are typeset large in a geometric grotesque against serif copy and mono metadata, an institutional tri-level voice ## Tokens ### Colors | Name | Value | |------|-------| | primary | `#16202E` | | secondary | `#DCE3EA` | | accent | `#D8341E` | | background | `#E7ECF1` | | surface | `#F3F6F9` | | text | `#16202E` | | muted | `#5C6B7C` | | border | `#C3CDD8` | | on_accent | `#F3F6F9` | | cobalt | `#2456C8` | | error | `#C42E1C` | | success | `#1E7A4D` | | warning | `#B26A00` | | info | `#2456C8` | ### Typography - **Heading Font**: "Space Grotesk", system-ui, sans-serif - **Body Font**: "Newsreader", Georgia, serif - **Mono Font**: "JetBrains Mono", ui-monospace, monospace - **Base Size**: 17px - **Scale Ratio**: 1.25 - **Line Height**: 1.6 - **Letter Spacing**: -0.02em - **Heading Weight**: 700 - **Heading Transform**: none - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500;700&display=swap ### Spacing - **Base Unit**: 8px - **Base**: 8px - **Scale**: ["8px","12px","16px","24px","32px","48px","64px","96px"] ### Radii - **None**: 0px - **Sm**: 0px - **Md**: 0px - **Lg**: 0px - **Full**: 9999px ### Shadows - **Sm**: none - **Md**: none - **Focus**: 0 0 0 3px rgba(216,52,30,0.14) - **Lock**: 0 0 0 3px rgba(216,52,30,0.16) ### Surfaces - **Treatment**: proofing-paper - **Card Style**: cool paper panels imposed on a hairline crossfield, pinned by a corner registration crosshair; flagged cells shift to surface-2 and recolour the crosshair vermilion - **Bg Pattern**: crossfield ### Borders - **Default Width**: 1px - **Accent Width**: 1px - **Style**: solid - **Character**: 1px ink rules and a hairline crossfield do the framing; a flagged cell recolours its corner crosshair vermilion rather than carrying an all-around accent edge ### Motion - **Duration**: 200ms - **Easing**: cubic-bezier(0.16,1,0.3,1) - **Philosophy**: deliberate, like a sheet going to register; the fully-imposed settled state renders with no JS, a crosshair lock-in reveal layered on top ### Responsive - **Breakpoints**: [1200,1080,860,620,390] - **Column Progression**: 12 → 8 → 4 → 1 ## Rules ### Composition Impose pages onto one registration sheet, not as boxed cards on a blank canvas. High-level regions are cells of a hairline crossfield, pinned at the corner by a registration crosshair; section heads are crop-mark rows — a signature letter, a heading, a right-aligned issue label over a single ink rule. Asymmetric 8/4 or 7/5 splits keep the editorial tension. ### Hierarchy Use scale, weight, the mono signature, and rule presence to establish rank; avoid depth-heavy shadows and rely on alignment, the hairline crossfield, and crop marks for authority. The vermilion lock is reserved for flagged state, selection, a colour-pop on one word, and the hot mark in a tick-gauge. ### Density Medium-dense to dense. Cells may be compact, but every dense area is buffered by deliberate whitespace bands and the visible crossfield; generous padding above titles. ### Signature The imposition crossfield: every module is registered into one hairline grid with corner registration-crosshairs; quantities read as discrete dot-circle plate marks (filled when set, ringed vermilion when locked); a single vermilion lock marks the cell still being chased — never a wash. ### Signature Patterns - every major region is imposed into one hairline crossfield with a corner registration crosshair pinning each cell - the registration crosshair (a + with a tick-ring) is the single ownable mark — masthead, buttons, nav, alerts, corner pins — recoloured vermilion only on a locked cell - quantities read as a run of discrete dot-circle plate marks, one ringed vermilion when locked, never a smooth gradient bar - section heads are crop-mark rows: a mono signature letter, a display heading, a right-aligned mono issue label over a 1px ink rule - verdicts and scores are typeset large in a geometric grotesque against serif copy and mono metadata, with a vermilion colour-pop on one word ## Layout ### Grid Desktop is a 12-column editorial grid on an 8px base; key compositions span 8/4 or 7/5 column splits for asymmetric tension, contained at ~1200–1240px. Dashboards use a 248px ink-navy register sidebar plus a crossfield of stat tiles and proof panels. Tablet collapses the sidebar to a top register bar; phone is a single stack preserving the crossfield and corner crosshairs. ### Breakpoints At 1080px the crossfield drops to two columns. At 860px the dashboard sidebar collapses to a horizontal top register. At 620px all grids become a single column and non-essential nav links drop. At 390px action clusters go full-width, the headline clamps and wraps, table overflow is allowed only inside the scrollable data panel, and nothing else overflows horizontally. ### Whitespace Use large top margins and inter-section bands for institutional breathing room around dense content; whitespace is measured, never soft. Always pad above titles. ### Responsive Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide. ### Breakpoints Map - **Xl**: 1200 - **Lg**: 1080 - **Md**: 860 - **Sm**: 620 - **Xs**: 390 ## Guidance ### Do - Impose regions onto one hairline crossfield with corner registration-crosshairs instead of stacking cards. - Use the registration crosshair as the single mark; recolour it vermilion only where a cell is locked. - Read quantities as discrete dot-circle plate marks, not smooth bars. - Keep corners square and the rule logic consistent across buttons, cells, filters and tables. - Keep text ink-navy on cool paper for high contrast; double every state with a label, never colour alone. ### Don't - Do not draw a single accent edge on a card or float a rounded pill bar for navigation. - Do not open with the SaaS hero template — no tracked eyebrow tag, no primary+secondary button pair, no three-stat row. - Do not swap a serif word to italic for emphasis — use the vermilion colour-pop. - Do not flood a panel with vermilion as a flat fill or introduce a third structural accent. - Do not drop the ground to white or warm paper — the cool proofing stock is the identity. ### Accessibility Body text is ink-navy #16202E on cool proofing paper (~11:1); the accent never carries meaning on its own — state is always doubled by a labelled mono tag and a discrete plate count. Every form control is explicitly styled with a vermilion registration focus ring. Motion respects prefers-reduced-motion and the page is fully usable with no JavaScript. ## Imagery Direction ### Pairs With reglet-letterpress-rule ### Summary Imagery uses the letterpress relief technique: subjects pressed hard into cool cotton-rag paper, value built from broken-ink dry-press texture and fine engraved hatching, in a strict two-ink registration with one small vermilion spot accent. Heroes are full-bleed worked fields with the ink mass weighted to one side and a calm band of bare cool paper left open for the overlay. ### Subjects - a printer's imposition desk — folded signatures, composing rule, registration crosshair marks - single instruments and tools as print specimens - portraits and avatars as engraved relief prints - skylines and architecture pressed into paper - review-desk still lifes ### Usage Use full-bleed relief fields for heroes with the ink mass weighted to one side and a bare cool-paper band left for the overlay; use centered single-subject print specimens for feature and avatar slots, each pinned by a corner registration crosshair; keep empty-states mostly bare paper with one faint impression.
---
version: "alpha"
name: "Quire"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
primary: "#16202E"
secondary: "#DCE3EA"
accent: "#D8341E"
background: "#E7ECF1"
surface: "#F3F6F9"
text: "#16202E"
muted: "#5C6B7C"
border: "#C3CDD8"
on_accent: "#F3F6F9"
cobalt: "#2456C8"
error: "#C42E1C"
success: "#1E7A4D"
warning: "#B26A00"
info: "#2456C8"
typography:
headline-lg:
fontFamily: "\"Space Grotesk\", system-ui, sans-serif"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "\"Space Grotesk\", system-ui, sans-serif"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "\"Newsreader\", Georgia, serif"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "\"JetBrains Mono\", ui-monospace, monospace"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
lg: "0px"
full: "9999px"
spacing:
base: "8px"
xs: "8px"
sm: "12px"
md: "16px"
lg: "24px"
xl: "32px"
2xl: "48px"
3xl: "64px"
4xl: "96px"
base_unit: "8px"
components:
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-cobalt:
backgroundColor: "{colors.cobalt}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-info:
backgroundColor: "{colors.info}"
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"
---
# Quire
## Overview
Quire imposes the whole interface onto one registration sheet: modules are registered into a hairline crossfield, pinned at the corner by a crosshair target, and a single vermilion lock marks the one cell the desk is still chasing. It reinterprets an institutional technology-review source — disciplined grids, rigorous typographic hierarchy, restrained signal colour — but moves it off the warm-paper red-black-white spread and onto a cool proofing sheet, where a registration crosshair, not a margin rule, carries the structure. Depth is never a shadow; the hairline crossfield and the crop mark do the framing, and a quiet cobalt is the only counter-ink.
### Values
- imposition over stacked cards
- one ownable mark — the registration crosshair
- machine-honest counts read as discrete plate marks
- restrained vermilion signalling used like a registration lock
- high-contrast ink-navy on cool proofing paper
### Anti-Values
- rounded consumer-app softness
- the SaaS hero template (eyebrow tag, button pair, stat trio)
- serif↔italic headline swaps
- accent floods and decorative gradients
- defaulting the ground to white or warm paper
### Visual Character
- every region is imposed into one hairline crossfield with corner registration-crosshairs, so the page reads as a proofing sheet rather than a pile of cards
- the registration crosshair — a + target with a tick-ring — is the single ownable mark across masthead, buttons, nav, alerts and corner pins, recoloured vermilion only where a cell is locked
- predominantly cool proofing-paper surfaces interrupted by 1px ink rules and crop-mark corners, with a restrained vermilion lock used only for flagged state, selection and a colour-pop on one word
- quantities read as a run of discrete dot-circle plate marks — filled when set, ringed vermilion when locked — never a smooth bar
- verdicts are typeset large in a geometric grotesque against serif copy and mono metadata, an institutional tri-level voice
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| primary | `#16202E` |
| secondary | `#DCE3EA` |
| accent | `#D8341E` |
| background | `#E7ECF1` |
| surface | `#F3F6F9` |
| text | `#16202E` |
| muted | `#5C6B7C` |
| border | `#C3CDD8` |
| on_accent | `#F3F6F9` |
| cobalt | `#2456C8` |
| error | `#C42E1C` |
| success | `#1E7A4D` |
| warning | `#B26A00` |
| info | `#2456C8` |
## Typography
- **Headline-Lg**: "Space Grotesk", system-ui, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: "Space Grotesk", system-ui, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: "Newsreader", Georgia, serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: "JetBrains Mono", ui-monospace, monospace, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `12px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `32px`
- **2xl**: `48px`
- **3xl**: `64px`
- **4xl**: `96px`
- **Base Unit**: `8px`
### Grid
Desktop is a 12-column editorial grid on an 8px base; key compositions span 8/4 or 7/5 column splits for asymmetric tension, contained at ~1200–1240px. Dashboards use a 248px ink-navy register sidebar plus a crossfield of stat tiles and proof panels. Tablet collapses the sidebar to a top register bar; phone is a single stack preserving the crossfield and corner crosshairs.
### Breakpoints
At 1080px the crossfield drops to two columns. At 860px the dashboard sidebar collapses to a horizontal top register. At 620px all grids become a single column and non-essential nav links drop. At 390px action clusters go full-width, the headline clamps and wraps, table overflow is allowed only inside the scrollable data panel, and nothing else overflows horizontally.
### Whitespace
Use large top margins and inter-section bands for institutional breathing room around dense content; whitespace is measured, never soft. Always pad above titles.
### Responsive
Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.
### Breakpoints Map
- **Xl**: 1200
- **Lg**: 1080
- **Md**: 860
- **Sm**: 620
- **Xs**: 390
## Elevation & Depth
### Shadows
- **Sm**: none
- **Md**: none
- **Focus**: 0 0 0 3px rgba(216,52,30,0.14)
- **Lock**: 0 0 0 3px rgba(216,52,30,0.16)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: proofing-paper
- **Card Style**: cool paper panels imposed on a hairline crossfield, pinned by a corner registration crosshair; flagged cells shift to surface-2 and recolour the crosshair vermilion
- **Bg Pattern**: crossfield
### Borders
- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: 1px ink rules and a hairline crossfield do the framing; a flagged cell recolours its corner crosshair vermilion rather than carrying an all-around accent edge
## Components
### Composition
Impose pages onto one registration sheet, not as boxed cards on a blank canvas. High-level regions are cells of a hairline crossfield, pinned at the corner by a registration crosshair; section heads are crop-mark rows — a signature letter, a heading, a right-aligned issue label over a single ink rule. Asymmetric 8/4 or 7/5 splits keep the editorial tension.
### Hierarchy
Use scale, weight, the mono signature, and rule presence to establish rank; avoid depth-heavy shadows and rely on alignment, the hairline crossfield, and crop marks for authority. The vermilion lock is reserved for flagged state, selection, a colour-pop on one word, and the hot mark in a tick-gauge.
### Density
Medium-dense to dense. Cells may be compact, but every dense area is buffered by deliberate whitespace bands and the visible crossfield; generous padding above titles.
### Signature
The imposition crossfield: every module is registered into one hairline grid with corner registration-crosshairs; quantities read as discrete dot-circle plate marks (filled when set, ringed vermilion when locked); a single vermilion lock marks the cell still being chased — never a wash.
### Signature Patterns
- every major region is imposed into one hairline crossfield with a corner registration crosshair pinning each cell
- the registration crosshair (a + with a tick-ring) is the single ownable mark — masthead, buttons, nav, alerts, corner pins — recoloured vermilion only on a locked cell
- quantities read as a run of discrete dot-circle plate marks, one ringed vermilion when locked, never a smooth gradient bar
- section heads are crop-mark rows: a mono signature letter, a display heading, a right-aligned mono issue label over a 1px ink rule
- verdicts and scores are typeset large in a geometric grotesque against serif copy and mono metadata, with a vermilion colour-pop on one word
## 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-019efd6f-2845-7b61-add9-a422b382a87c/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 Impose regions onto one hairline crossfield with corner registration-crosshairs instead of stacking cards.
- Do Use the registration crosshair as the single mark; recolour it vermilion only where a cell is locked.
- Do Read quantities as discrete dot-circle plate marks, not smooth bars.
- Do Keep corners square and the rule logic consistent across buttons, cells, filters and tables.
- Do Keep text ink-navy on cool paper for high contrast; double every state with a label, never colour alone.
- Don't Do not draw a single accent edge on a card or float a rounded pill bar for navigation.
- Don't Do not open with the SaaS hero template — no tracked eyebrow tag, no primary+secondary button pair, no three-stat row.
- Don't Do not swap a serif word to italic for emphasis — use the vermilion colour-pop.
- Don't Do not flood a panel with vermilion as a flat fill or introduce a third structural accent.
- Don't Do not drop the ground to white or warm paper — the cool proofing stock is the identity.
### Accessibility
Body text is ink-navy #16202E on cool proofing paper (~11:1); the accent never carries meaning on its own — state is always doubled by a labelled mono tag and a discrete plate count. Every form control is explicitly styled with a vermilion registration focus ring. Motion respects prefers-reduced-motion and the page is fully usable with no JavaScript.
## Imagery Direction
### Pairs With
reglet-letterpress-rule
### Summary
Imagery uses the letterpress relief technique: subjects pressed hard into cool cotton-rag paper, value built from broken-ink dry-press texture and fine engraved hatching, in a strict two-ink registration with one small vermilion spot accent. Heroes are full-bleed worked fields with the ink mass weighted to one side and a calm band of bare cool paper left open for the overlay.
### Subjects
- a printer's imposition desk — folded signatures, composing rule, registration crosshair marks
- single instruments and tools as print specimens
- portraits and avatars as engraved relief prints
- skylines and architecture pressed into paper
- review-desk still lifes
### Usage
Use full-bleed relief fields for heroes with the ink mass weighted to one side and a bare cool-paper band left for the overlay; use centered single-subject print specimens for feature and avatar slots, each pinned by a corner registration crosshair; keep empty-states mostly bare paper with one faint impression.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "quire",
"type": "registry:theme",
"title": "Quire shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#E7ECF1",
"foreground": "#16202E",
"card": "#F3F6F9",
"card-foreground": "#16202E",
"popover": "#F3F6F9",
"popover-foreground": "#16202E",
"primary": "#16202E",
"primary-foreground": "#ffffff",
"secondary": "#DCE3EA",
"secondary-foreground": "#111111",
"muted": "#5C6B7C",
"muted-foreground": "#16202E",
"accent": "#D8341E",
"accent-foreground": "#ffffff",
"destructive": "#C42E1C",
"border": "#C3CDD8",
"input": "#C3CDD8",
"ring": "#D8341E",
"chart-1": "#16202E",
"chart-2": "#DCE3EA",
"chart-3": "#D8341E",
"chart-4": "#1E7A4D",
"chart-5": "#B26A00",
"sidebar": "#F3F6F9",
"sidebar-foreground": "#16202E",
"sidebar-primary": "#16202E",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2456C8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#C3CDD8",
"sidebar-ring": "#D8341E",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#16202E",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#D8341E",
"accent-foreground": "#ffffff",
"destructive": "#C42E1C",
"border": "#303642",
"input": "#303642",
"ring": "#D8341E",
"chart-1": "#16202E",
"chart-2": "#DCE3EA",
"chart-3": "#D8341E",
"chart-4": "#1E7A4D",
"chart-5": "#B26A00",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#16202E",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#D8341E",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#D8341E",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efd6f-2845-7b61-add9-a422b382a87c",
"slug": "quire",
"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",
"background",
"border",
"cobalt",
"error",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"spacing": [
"base",
"base_unit",
"scale"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"focus",
"lock",
"md",
"sm"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
],
"responsive": [
"breakpoints",
"column_progression"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
images by gpt-image-2
Keep Quireand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #E7ECF1;
--foreground: #16202E;
--card: #F3F6F9;
--card-foreground: #16202E;
--popover: #F3F6F9;
--popover-foreground: #16202E;
--primary: #16202E;
--primary-foreground: #ffffff;
--secondary: #DCE3EA;
--secondary-foreground: #111111;
--muted: #5C6B7C;
--muted-foreground: #16202E;
--accent: #D8341E;
--accent-foreground: #ffffff;
--destructive: #C42E1C;
--border: #C3CDD8;
--input: #C3CDD8;
--ring: #D8341E;
--chart-1: #16202E;
--chart-2: #DCE3EA;
--chart-3: #D8341E;
--chart-4: #1E7A4D;
--chart-5: #B26A00;
--sidebar: #F3F6F9;
--sidebar-foreground: #16202E;
--sidebar-primary: #16202E;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2456C8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #C3CDD8;
--sidebar-ring: #D8341E;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #16202E;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #D8341E;
--accent-foreground: #ffffff;
--destructive: #C42E1C;
--border: #303642;
--input: #303642;
--ring: #D8341E;
--chart-1: #16202E;
--chart-2: #DCE3EA;
--chart-3: #D8341E;
--chart-4: #1E7A4D;
--chart-5: #B26A00;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #16202E;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #D8341E;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #D8341E;
--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 QuireShadcnKit() {
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">Quire</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": "quire",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "Newsreader, Georgia, serif",
"font-serif": "Newsreader, Georgia, serif",
"font-mono": "JetBrains Mono, ui-monospace, monospace",
"font-display": "Space Grotesk, system-ui, sans-serif",
"radius": "0px"
},
"light": {
"background": "oklch(0.941 0.009 247.9)",
"foreground": "oklch(0.241 0.031 256.9)",
"card": "oklch(0.972 0.005 247.9)",
"card-foreground": "oklch(0.241 0.031 256.9)",
"popover": "oklch(0.972 0.005 247.9)",
"popover-foreground": "oklch(0.241 0.031 256.9)",
"primary": "oklch(0.241 0.031 256.9)",
"primary-foreground": "oklch(0.972 0.005 247.9)",
"secondary": "oklch(0.913 0.012 248.0)",
"secondary-foreground": "oklch(0.241 0.031 256.9)",
"muted": "oklch(0.888 0.015 251.2)",
"muted-foreground": "oklch(0.522 0.033 251.7)",
"accent": "oklch(0.579 0.203 31.1)",
"accent-foreground": "oklch(0.972 0.005 247.9)",
"destructive": "oklch(0.539 0.189 30.7)",
"destructive-foreground": "oklch(0.972 0.005 247.9)",
"border": "oklch(0.844 0.019 250.6)",
"input": "oklch(0.888 0.015 251.2)",
"ring": "oklch(0.579 0.203 31.1)",
"chart-1": "oklch(0.579 0.203 31.1)",
"chart-2": "oklch(0.491 0.186 263.3)",
"chart-3": "oklch(0.241 0.031 256.9)",
"chart-4": "oklch(0.515 0.111 156.9)",
"chart-5": "oklch(0.591 0.132 65.1)"
},
"dark": {
"background": "oklch(0.241 0.031 256.9)",
"foreground": "oklch(0.941 0.009 247.9)",
"card": "oklch(0.300 0.030 256.0)",
"card-foreground": "oklch(0.941 0.009 247.9)",
"popover": "oklch(0.300 0.030 256.0)",
"popover-foreground": "oklch(0.941 0.009 247.9)",
"primary": "oklch(0.941 0.009 247.9)",
"primary-foreground": "oklch(0.241 0.031 256.9)",
"secondary": "oklch(0.330 0.028 256.0)",
"secondary-foreground": "oklch(0.941 0.009 247.9)",
"muted": "oklch(0.300 0.030 256.0)",
"muted-foreground": "oklch(0.722 0.025 251.7)",
"accent": "oklch(0.579 0.203 31.1)",
"accent-foreground": "oklch(0.972 0.005 247.9)",
"destructive": "oklch(0.539 0.189 30.7)",
"destructive-foreground": "oklch(0.972 0.005 247.9)",
"border": "oklch(0.380 0.026 256.0)",
"input": "oklch(0.330 0.028 256.0)",
"ring": "oklch(0.579 0.203 31.1)",
"chart-1": "oklch(0.579 0.203 31.1)",
"chart-2": "oklch(0.491 0.186 263.3)",
"chart-3": "oklch(0.941 0.009 247.9)",
"chart-4": "oklch(0.515 0.111 156.9)",
"chart-5": "oklch(0.591 0.132 65.1)"
}
}
}
# Quire shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efd6f-2845-7b61-add9-a422b382a87c`
Slug: `quire`
## Intent
Quire imposes the whole interface onto one registration sheet: modules are registered into a hairline crossfield, pinned at the corner by a crosshair target, and a single vermilion lock marks the one cell the desk is still chasing. It reinterprets an institutional technology-review source — disciplined grids, rigorous typographic hierarchy, restrained signal colour — but moves it off the warm-paper red-black-white spread and onto a cool proofing sheet, where a registration crosshair, not a margin rule, carries the structure. Depth is never a shadow; the hairline crossfield and the crop mark do the framing, and a quiet cobalt is the only counter-ink.
## 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:
{
"primary": "#16202E",
"secondary": "#DCE3EA",
"accent": "#D8341E",
"background": "#E7ECF1",
"surface": "#F3F6F9",
"text": "#16202E",
"muted": "#5C6B7C",
"border": "#C3CDD8",
"on_accent": "#F3F6F9",
"cobalt": "#2456C8",
"error": "#C42E1C",
"success": "#1E7A4D",
"warning": "#B26A00",
"info": "#2456C8"
}
Typography:
{
"heading_font": "\"Space Grotesk\", system-ui, sans-serif",
"body_font": "\"Newsreader\", Georgia, serif",
"mono_font": "\"JetBrains Mono\", ui-monospace, monospace",
"base_size": "17px",
"scale_ratio": "1.25",
"line_height": "1.6",
"letter_spacing": "-0.02em",
"heading_weight": "700",
"heading_transform": "none",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=JetBrains+Mono:wght@400;500;700&display=swap"
}
## Visual character to preserve
- every region is imposed into one hairline crossfield with corner registration-crosshairs, so the page reads as a proofing sheet rather than a pile of cards
- the registration crosshair — a + target with a tick-ring — is the single ownable mark across masthead, buttons, nav, alerts and corner pins, recoloured vermilion only where a cell is locked
- predominantly cool proofing-paper surfaces interrupted by 1px ink rules and crop-mark corners, with a restrained vermilion lock used only for flagged state, selection and a colour-pop on one word
- quantities read as a run of discrete dot-circle plate marks — filled when set, ringed vermilion when locked — never a smooth bar
- verdicts are typeset large in a geometric grotesque against serif copy and mono metadata, an institutional tri-level voice
## 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/quire/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: Impose regions onto one hairline crossfield with corner registration-crosshairs instead of stacking cards.; Use the registration crosshair as the single mark; recolour it vermilion only where a cell is locked.; Read quantities as discrete dot-circle plate marks, not smooth bars.; Keep corners square and the rule logic consistent across buttons, cells, filters and tables.; Keep text ink-navy on cool paper for high contrast; double every state with a label, never colour alone.
- Do not: Do not draw a single accent edge on a card or float a rounded pill bar for navigation.; Do not open with the SaaS hero template — no tracked eyebrow tag, no primary+secondary button pair, no three-stat row.; Do not swap a serif word to italic for emphasis — use the vermilion colour-pop.; Do not flood a panel with vermilion as a flat fill or introduce a third structural accent.; Do not drop the ground to white or warm paper — the cool proofing stock is the identity.
## 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 QuireShadcnKit() {
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">Quire</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "Desktop is a 12-column editorial grid on an 8px base; key compositions span 8/4 or 7/5 column splits for asymmetric tension, contained at ~1200–1240px. Dashboards use a 248px ink-navy register sidebar plus a crossfield of stat tiles and proof panels. Tablet collapses the sidebar to a top register bar; phone is a single stack preserving the crossfield and corner crosshairs.",
"breakpoints": "At 1080px the crossfield drops to two columns. At 860px the dashboard sidebar collapses to a horizontal top register. At 620px all grids become a single column and non-essential nav links drop. At 390px action clusters go full-width, the headline clamps and wraps, table overflow is allowed only inside the scrollable data panel, and nothing else overflows horizontally.",
"whitespace": "Use large top margins and inter-section bands for institutional breathing room around dense content; whitespace is measured, never soft. Always pad above titles.",
"responsive": "Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.",
"breakpoints_map": {
"xl": 1200,
"lg": 1080,
"md": 860,
"sm": 620,
"xs": 390
}
}
{
"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-019efd6f-2845-7b61-add9-a422b382a87c",
"name": "Quire",
"slug": "quire"
},
"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": [
"every region is imposed into one hairline crossfield with corner registration-crosshairs, so the page reads as a proofing sheet rather than a pile of cards",
"the registration crosshair — a + target with a tick-ring — is the single ownable mark across masthead, buttons, nav, alerts and corner pins, recoloured vermilion only where a cell is locked",
"predominantly cool proofing-paper surfaces interrupted by 1px ink rules and crop-mark corners, with a restrained vermilion lock used only for flagged state, selection and a colour-pop on one word",
"quantities read as a run of discrete dot-circle plate marks — filled when set, ringed vermilion when locked — never a smooth bar",
"verdicts are typeset large in a geometric grotesque against serif copy and mono metadata, an institutional tri-level voice"
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Quire 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": [
"Impose regions onto one hairline crossfield with corner registration-crosshairs instead of stacking cards.",
"Use the registration crosshair as the single mark; recolour it vermilion only where a cell is locked.",
"Read quantities as discrete dot-circle plate marks, not smooth bars.",
"Keep corners square and the rule logic consistent across buttons, cells, filters and tables.",
"Keep text ink-navy on cool paper for high contrast; double every state with a label, never colour alone."
],
"dont": [
"Do not draw a single accent edge on a card or float a rounded pill bar for navigation.",
"Do not open with the SaaS hero template — no tracked eyebrow tag, no primary+secondary button pair, no three-stat row.",
"Do not swap a serif word to italic for emphasis — use the vermilion colour-pop.",
"Do not flood a panel with vermilion as a flat fill or introduce a third structural accent.",
"Do not drop the ground to white or warm paper — the cool proofing stock is the identity."
]
}
}