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.
Build around a single listing tape: an address gutter, scope-indented operation lines, and an adjacent inspector. Hierarchy comes from address, depth, and pane scale, not decorative frames.
Use compact Space Grotesk section labels, monospaced command lines with addresses, tabular metrics, and restrained semantic color so users parse state, action, and evidence by reading down.
High information density is allowed, but rows breathe on an 8px rhythm with quiet graphite rules and grouped whitespace so the tape stays calm.
Landing and embodiment use a centered single-column listing measure (~980px) with a persistent left address gutter; the dashboard widens to a tape-plus-inspector grid (2.1fr / 1fr). Mobile collapses to stacked address+line packets without square-grid backgrounds.
Narrow but intentional: 8px row rhythm, 16-18px pane padding, and 24-32px macro gaps around primary operational zones.
dense but calm
Every artifact renders from ~390px mobile (single column, address+line packets, state below) to 2560px+ ultra-wide (capped, centred content; only the hero spans 100vw).
graphite-console
Subjects rendered as if inspected through a precision operations workstation: cool graphite tonality over an ink-violet field, broad horizontal scan bands, one-pixel cool edge highlights, monospaced syntax-color annotation tags, and a single translucent violet selection mask.
Use for the landing hero and section accents; keep the subject filling the frame and let the console treatment annotate it. Annotation colors map to syntax roles: coral=command, cyan=data, violet=selection.
# Spool ## Philosophy Spool reads terminal fluency as a continuous listing tape: every action stamps an addressed line you read top to bottom and can wind back to. Operations indent under the scope that owns them, selection flips a line to reverse video, and color does the parsing rather than the decoration. ### Values - A run is a tape: lines stamp in order, addressed, and rewindable to any point. - Structure comes from the address gutter and scope indent, not from frames or rails. - Dense information stays calm when typography, separators, and semantic color are disciplined. - Hardware-era affordances appear as machined control geometry and status modules, never arcade chrome. ### Anti-Values - No square-grid wallpaper, dotted default texture, decorative side rails, colored card stripes, or color used as garnish. - No vaporwave, cyberpunk glow, novelty CRT filters, or green-on-black hacker nostalgia. - No generic SaaS dashboard cards with terminal labels pasted on top; no nested cards or boxed-in nav. ### Visual Character - Deep ink-violet graphite ground (#15101C, aubergine-black) with broad horizontal luminance scan bands and soft radial panel light; never a square grid or dotted texture. - The listing tape: a single-column measure with a fixed left address gutter of tabular numerals, rows that indent by scope depth with SVG elbow connectors. - Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail. - Typography pairs mechanical Space Grotesk display with JetBrains Mono command, address, and metric text using tabular numerals and tight negative tracking. - Semantic syntax color is limited to coral commands, cyan data, and violet selection, with quiet green/yellow/red/blue state that always pairs color with a written word. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#15101C` | | surface | `#1E1726` | | surface_2 | `#28202F` | | surface_3 | `#322840` | | text | `#ECE6DA` | | muted | `#9A90A6` | | gutter | `#6E647E` | | border | `#37304A` | | rule | `#2A2336` | | accent | `#A78BFA` | | on_accent | `#15101C` | | command | `#FF6A45` | | data | `#5BD0E0` | | paper | `#ECE6DA` | | primary | `#FF6A45` | | success | `#7FD69B` | | warning | `#F0C45C` | | error | `#F07A6E` | | info | `#79B8F2` | ### Typography - **Base Size**: 17px - **Body Font**: Space Grotesk - **Heading Font**: Space Grotesk - **Mono Font**: JetBrains Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.018em - **Line Height**: 1.55 - **Scale Ratio**: 1.2 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap ### Radii - **None**: 0 - **Sm**: 3px - **Md**: 6px - **Lg**: 14px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.28) - **Md**: 0 1px 0 rgba(255,255,255,0.05), 0 18px 48px rgba(0,0,0,0.38) - **Lg**: 0 1px 0 rgba(255,255,255,0.06), 0 32px 90px rgba(0,0,0,0.50) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64] ### Surfaces - **Treatment**: Translucent matte graphite panels over an ink-violet field with broad horizontal luminance banding and subtle inner highlights; no default dot or square-grid texture. - **Card Style**: Low-radius machined modules with a one-pixel graphite border and a monospaced command/path header; never nested, never side-railed. - **Bg Pattern**: Layered radial panel light plus oversized horizontal scan bands at very low opacity and a faint 38px horizontal listing rhythm; never a square grid or repeated dotted pattern. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: graphite separators and form-feed perforation rules with a violet bracket focus outline on active entry - **Character**: Cool graphite separators define structure; accent edges appear only for active focus, selection, or the terminal prompt affordance, never as card rails. ### Motion - **Duration**: 160ms - **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1) - **Philosophy**: Operational and minimal: command focus snaps, the tape advances without theatrical glitch, sections reveal on scroll. The settled state renders with no JavaScript; motion is layered on top behind a class on the root and respects prefers-reduced-motion. ## Rules ### Composition Build around a single listing tape: an address gutter, scope-indented operation lines, and an adjacent inspector. Hierarchy comes from address, depth, and pane scale, not decorative frames. ### Hierarchy Use compact Space Grotesk section labels, monospaced command lines with addresses, tabular metrics, and restrained semantic color so users parse state, action, and evidence by reading down. ### Density High information density is allowed, but rows breathe on an 8px rhythm with quiet graphite rules and grouped whitespace so the tape stays calm. ### Signature - The listing tape: a fixed left address gutter (tabular numerals) with rows that indent by scope depth via an SVG elbow connector. - Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail. - Log lines use semantic syntax spans for actor, command, object, value, and state, with color doing structural parsing rather than decoration. - The command bar carries a fixed spool> prompt, a violet bracket focus outline, and segmented Run/Plan/Replay mode pills. - Sections are separated by form-feed perforation rules; data tables compress into address+line packets on mobile with the state chip dropping below. ## Layout ### Grid Landing and embodiment use a centered single-column listing measure (~980px) with a persistent left address gutter; the dashboard widens to a tape-plus-inspector grid (2.1fr / 1fr). Mobile collapses to stacked address+line packets without square-grid backgrounds. ### Whitespace Narrow but intentional: 8px row rhythm, 16-18px pane padding, and 24-32px macro gaps around primary operational zones. ### Density dense but calm ### Responsive Every artifact renders from ~390px mobile (single column, address+line packets, state below) to 2560px+ ultra-wide (capped, centred content; only the hero spans 100vw). ### Breakpoints - **Mobile**: 390px - **Tablet**: 720px - **Desktop**: 1100px - **Wide**: 1440px ## Guidance ### Do - Let the address gutter and scope indent carry structure; cite and rewind operations by address. - Keep every color mapped to a role: command, data, selection, or a labelled state. - Pair every state color with a written word so state survives a greyscale or color-blind read. - Use the spool> prompt, bracket focus, form-feed rules, and reverse-video selection as the recurring grammar. ### Don't - Do not use square-grid backgrounds, dotted textures, decorative side rails, colored card stripes, or single accent edges on cards. - Do not turn the language into vaporwave, cyberpunk, arcade CRT, or green-on-black hacker nostalgia. - Do not nest cards or box the nav into a pill bar; let the masthead sit openly across the header. - Do not spread accent colors across unrelated decoration; every color identifies state, syntax, or interaction. ### Accessibility Body text rides at 17px with high contrast (#ECE6DA on #15101C). Every form control is explicitly styled with no browser defaults. Focus is a visible violet bracket or ring. State is never carried by color alone: chips and tape states pair color with a word. Motion respects prefers-reduced-motion and the settled state renders without JavaScript. ## Imagery Direction ### Pairs With graphite-console ### Summary Subjects rendered as if inspected through a precision operations workstation: cool graphite tonality over an ink-violet field, broad horizontal scan bands, one-pixel cool edge highlights, monospaced syntax-color annotation tags, and a single translucent violet selection mask. ### Subjects - continuous-feed listing tape and spool - read-heads and machined hardware - operational instrument modules - deploy and runbook apparatus ### Usage Use for the landing hero and section accents; keep the subject filling the frame and let the console treatment annotate it. Annotation colors map to syntax roles: coral=command, cyan=data, violet=selection.
---
version: "alpha"
name: "Spool"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#15101C"
surface: "#1E1726"
surface_2: "#28202F"
surface_3: "#322840"
text: "#ECE6DA"
muted: "#9A90A6"
gutter: "#6E647E"
border: "#37304A"
rule: "#2A2336"
accent: "#A78BFA"
on_accent: "#15101C"
command: "#FF6A45"
data: "#5BD0E0"
paper: "#ECE6DA"
primary: "#FF6A45"
success: "#7FD69B"
warning: "#F0C45C"
error: "#F07A6E"
info: "#79B8F2"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.018em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.018em"
body-md:
fontFamily: "Space Grotesk"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.018em"
label-md:
fontFamily: "JetBrains Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "3px"
md: "6px"
lg: "14px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-surface_3:
backgroundColor: "{colors.surface_3}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-gutter:
backgroundColor: "{colors.gutter}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-rule:
backgroundColor: "{colors.rule}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-command:
backgroundColor: "{colors.command}"
color-reference-data:
backgroundColor: "{colors.data}"
color-reference-paper:
backgroundColor: "{colors.paper}"
color-reference-primary:
backgroundColor: "{colors.primary}"
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.primary}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Spool
## Overview
Spool reads terminal fluency as a continuous listing tape: every action stamps an addressed line you read top to bottom and can wind back to. Operations indent under the scope that owns them, selection flips a line to reverse video, and color does the parsing rather than the decoration.
### Values
- A run is a tape: lines stamp in order, addressed, and rewindable to any point.
- Structure comes from the address gutter and scope indent, not from frames or rails.
- Dense information stays calm when typography, separators, and semantic color are disciplined.
- Hardware-era affordances appear as machined control geometry and status modules, never arcade chrome.
### Anti-Values
- No square-grid wallpaper, dotted default texture, decorative side rails, colored card stripes, or color used as garnish.
- No vaporwave, cyberpunk glow, novelty CRT filters, or green-on-black hacker nostalgia.
- No generic SaaS dashboard cards with terminal labels pasted on top; no nested cards or boxed-in nav.
### Visual Character
- Deep ink-violet graphite ground (#15101C, aubergine-black) with broad horizontal luminance scan bands and soft radial panel light; never a square grid or dotted texture.
- The listing tape: a single-column measure with a fixed left address gutter of tabular numerals, rows that indent by scope depth with SVG elbow connectors.
- Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail.
- Typography pairs mechanical Space Grotesk display with JetBrains Mono command, address, and metric text using tabular numerals and tight negative tracking.
- Semantic syntax color is limited to coral commands, cyan data, and violet selection, with quiet green/yellow/red/blue state that always pairs color with a written word.
## 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 | `#15101C` |
| surface | `#1E1726` |
| surface_2 | `#28202F` |
| surface_3 | `#322840` |
| text | `#ECE6DA` |
| muted | `#9A90A6` |
| gutter | `#6E647E` |
| border | `#37304A` |
| rule | `#2A2336` |
| accent | `#A78BFA` |
| on_accent | `#15101C` |
| command | `#FF6A45` |
| data | `#5BD0E0` |
| paper | `#ECE6DA` |
| primary | `#FF6A45` |
| success | `#7FD69B` |
| warning | `#F0C45C` |
| error | `#F07A6E` |
| info | `#79B8F2` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
### Grid
Landing and embodiment use a centered single-column listing measure (~980px) with a persistent left address gutter; the dashboard widens to a tape-plus-inspector grid (2.1fr / 1fr). Mobile collapses to stacked address+line packets without square-grid backgrounds.
### Whitespace
Narrow but intentional: 8px row rhythm, 16-18px pane padding, and 24-32px macro gaps around primary operational zones.
### Density
dense but calm
### Responsive
Every artifact renders from ~390px mobile (single column, address+line packets, state below) to 2560px+ ultra-wide (capped, centred content; only the hero spans 100vw).
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 720px
- **Desktop**: 1100px
- **Wide**: 1440px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.28)
- **Md**: 0 1px 0 rgba(255,255,255,0.05), 0 18px 48px rgba(0,0,0,0.38)
- **Lg**: 0 1px 0 rgba(255,255,255,0.06), 0 32px 90px rgba(0,0,0,0.50)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `3px`
- **Md**: `6px`
- **Lg**: `14px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: Translucent matte graphite panels over an ink-violet field with broad horizontal luminance banding and subtle inner highlights; no default dot or square-grid texture.
- **Card Style**: Low-radius machined modules with a one-pixel graphite border and a monospaced command/path header; never nested, never side-railed.
- **Bg Pattern**: Layered radial panel light plus oversized horizontal scan bands at very low opacity and a faint 38px horizontal listing rhythm; never a square grid or repeated dotted pattern.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: graphite separators and form-feed perforation rules with a violet bracket focus outline on active entry
- **Character**: Cool graphite separators define structure; accent edges appear only for active focus, selection, or the terminal prompt affordance, never as card rails.
## Components
### Composition
Build around a single listing tape: an address gutter, scope-indented operation lines, and an adjacent inspector. Hierarchy comes from address, depth, and pane scale, not decorative frames.
### Hierarchy
Use compact Space Grotesk section labels, monospaced command lines with addresses, tabular metrics, and restrained semantic color so users parse state, action, and evidence by reading down.
### Density
High information density is allowed, but rows breathe on an 8px rhythm with quiet graphite rules and grouped whitespace so the tape stays calm.
### Signature
- The listing tape: a fixed left address gutter (tabular numerals) with rows that indent by scope depth via an SVG elbow connector.
- Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail.
- Log lines use semantic syntax spans for actor, command, object, value, and state, with color doing structural parsing rather than decoration.
- The command bar carries a fixed spool> prompt, a violet bracket focus outline, and segmented Run/Plan/Replay mode pills.
- Sections are separated by form-feed perforation rules; data tables compress into address+line packets on mobile with the state chip dropping below.
## 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-019ef9bd-d955-78d2-bd49-1bd396c7c8d5/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 Let the address gutter and scope indent carry structure; cite and rewind operations by address.
- Do Keep every color mapped to a role: command, data, selection, or a labelled state.
- Do Pair every state color with a written word so state survives a greyscale or color-blind read.
- Do Use the spool> prompt, bracket focus, form-feed rules, and reverse-video selection as the recurring grammar.
- Don't Do not use square-grid backgrounds, dotted textures, decorative side rails, colored card stripes, or single accent edges on cards.
- Don't Do not turn the language into vaporwave, cyberpunk, arcade CRT, or green-on-black hacker nostalgia.
- Don't Do not nest cards or box the nav into a pill bar; let the masthead sit openly across the header.
- Don't Do not spread accent colors across unrelated decoration; every color identifies state, syntax, or interaction.
### Accessibility
Body text rides at 17px with high contrast (#ECE6DA on #15101C). Every form control is explicitly styled with no browser defaults. Focus is a visible violet bracket or ring. State is never carried by color alone: chips and tape states pair color with a word. Motion respects prefers-reduced-motion and the settled state renders without JavaScript.
## Imagery Direction
### Pairs With
graphite-console
### Summary
Subjects rendered as if inspected through a precision operations workstation: cool graphite tonality over an ink-violet field, broad horizontal scan bands, one-pixel cool edge highlights, monospaced syntax-color annotation tags, and a single translucent violet selection mask.
### Subjects
- continuous-feed listing tape and spool
- read-heads and machined hardware
- operational instrument modules
- deploy and runbook apparatus
### Usage
Use for the landing hero and section accents; keep the subject filling the frame and let the console treatment annotate it. Annotation colors map to syntax roles: coral=command, cyan=data, violet=selection.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "spool",
"type": "registry:theme",
"title": "Spool shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#15101C",
"foreground": "#ECE6DA",
"card": "#1E1726",
"card-foreground": "#ECE6DA",
"popover": "#1E1726",
"popover-foreground": "#ECE6DA",
"primary": "#FF6A45",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#9A90A6",
"muted-foreground": "#ECE6DA",
"accent": "#A78BFA",
"accent-foreground": "#ffffff",
"destructive": "#F07A6E",
"border": "#37304A",
"input": "#37304A",
"ring": "#A78BFA",
"chart-1": "#FF6A45",
"chart-2": "#f4f4f5",
"chart-3": "#A78BFA",
"chart-4": "#7FD69B",
"chart-5": "#F0C45C",
"sidebar": "#1E1726",
"sidebar-foreground": "#ECE6DA",
"sidebar-primary": "#FF6A45",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#79B8F2",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#37304A",
"sidebar-ring": "#A78BFA",
"radius": "6px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#FF6A45",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#A78BFA",
"accent-foreground": "#ffffff",
"destructive": "#F07A6E",
"border": "#303642",
"input": "#303642",
"ring": "#A78BFA",
"chart-1": "#FF6A45",
"chart-2": "#f4f4f5",
"chart-3": "#A78BFA",
"chart-4": "#7FD69B",
"chart-5": "#F0C45C",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#FF6A45",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#A78BFA",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#A78BFA",
"radius": "6px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef9bd-d955-78d2-bd49-1bd396c7c8d5",
"slug": "spool",
"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",
"bg",
"border",
"command",
"data",
"error",
"gutter",
"info",
"muted",
"on_accent",
"paper",
"primary",
"rule",
"success",
"surface",
"surface_2",
"surface_3",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"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
Agent-generated
Keep Spooland 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: #15101C;
--foreground: #ECE6DA;
--card: #1E1726;
--card-foreground: #ECE6DA;
--popover: #1E1726;
--popover-foreground: #ECE6DA;
--primary: #FF6A45;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #9A90A6;
--muted-foreground: #ECE6DA;
--accent: #A78BFA;
--accent-foreground: #ffffff;
--destructive: #F07A6E;
--border: #37304A;
--input: #37304A;
--ring: #A78BFA;
--chart-1: #FF6A45;
--chart-2: #f4f4f5;
--chart-3: #A78BFA;
--chart-4: #7FD69B;
--chart-5: #F0C45C;
--sidebar: #1E1726;
--sidebar-foreground: #ECE6DA;
--sidebar-primary: #FF6A45;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #79B8F2;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #37304A;
--sidebar-ring: #A78BFA;
--radius: 6px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #FF6A45;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #A78BFA;
--accent-foreground: #ffffff;
--destructive: #F07A6E;
--border: #303642;
--input: #303642;
--ring: #A78BFA;
--chart-1: #FF6A45;
--chart-2: #f4f4f5;
--chart-3: #A78BFA;
--chart-4: #7FD69B;
--chart-5: #F0C45C;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #FF6A45;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #A78BFA;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #A78BFA;
--radius: 6px;
}
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 SpoolShadcnKit() {
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">Spool</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": "spool",
"type": "registry:theme",
"author": "katagami-agent",
"visualProfile": {
"mode": "dark",
"ground": "ink-violet-graphite",
"radius": "low",
"material": "matte graphite panels, 1px cool borders, inset highlight, clipped low radius",
"borders": "1px graphite separators; accent edge only on active focus/selection; never card rails",
"accentUsage": "highlighter roles — command (coral), data (cyan), selection (violet); state colors pair with a word",
"typography": "Space Grotesk display + JetBrains Mono for commands, addresses, metrics; tabular numerals",
"signature": "address-gutter listing rows, reverse-video selection, bracket focus outline, form-feed section rules"
},
"cssVars": {
"theme": {
"font-sans": "Space Grotesk, system-ui, sans-serif",
"font-mono": "JetBrains Mono, ui-monospace, monospace",
"radius": "6px"
},
"dark": {
"background": "#15101C",
"foreground": "#ECE6DA",
"card": "#1E1726",
"card-foreground": "#ECE6DA",
"popover": "#1E1726",
"popover-foreground": "#ECE6DA",
"primary": "#FF6A45",
"primary-foreground": "#1A0D07",
"secondary": "#28202F",
"secondary-foreground": "#ECE6DA",
"muted": "#28202F",
"muted-foreground": "#9A90A6",
"accent": "#A78BFA",
"accent-foreground": "#15101C",
"destructive": "#F07A6E",
"destructive-foreground": "#15101C",
"border": "#37304A",
"input": "#37304A",
"ring": "#A78BFA",
"chart-1": "#FF6A45",
"chart-2": "#5BD0E0",
"chart-3": "#A78BFA",
"chart-4": "#7FD69B",
"chart-5": "#F0C45C"
}
}
}
# Spool shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef9bd-d955-78d2-bd49-1bd396c7c8d5`
Slug: `spool`
## Intent
Spool reads terminal fluency as a continuous listing tape: every action stamps an addressed line you read top to bottom and can wind back to. Operations indent under the scope that owns them, selection flips a line to reverse video, and color does the parsing rather than the decoration.
## 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": "#15101C",
"surface": "#1E1726",
"surface_2": "#28202F",
"surface_3": "#322840",
"text": "#ECE6DA",
"muted": "#9A90A6",
"gutter": "#6E647E",
"border": "#37304A",
"rule": "#2A2336",
"accent": "#A78BFA",
"on_accent": "#15101C",
"command": "#FF6A45",
"data": "#5BD0E0",
"paper": "#ECE6DA",
"primary": "#FF6A45",
"success": "#7FD69B",
"warning": "#F0C45C",
"error": "#F07A6E",
"info": "#79B8F2"
}
Typography:
{
"base_size": "17px",
"body_font": "Space Grotesk",
"heading_font": "Space Grotesk",
"mono_font": "JetBrains Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.018em",
"line_height": "1.55",
"scale_ratio": "1.2",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}
## Visual character to preserve
- Deep ink-violet graphite ground (#15101C, aubergine-black) with broad horizontal luminance scan bands and soft radial panel light; never a square grid or dotted texture.
- The listing tape: a single-column measure with a fixed left address gutter of tabular numerals, rows that indent by scope depth with SVG elbow connectors.
- Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail.
- Typography pairs mechanical Space Grotesk display with JetBrains Mono command, address, and metric text using tabular numerals and tight negative tracking.
- Semantic syntax color is limited to coral commands, cyan data, and violet selection, with quiet green/yellow/red/blue state that always pairs color with a written word.
## 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/spool/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: Let the address gutter and scope indent carry structure; cite and rewind operations by address.; Keep every color mapped to a role: command, data, selection, or a labelled state.; Pair every state color with a written word so state survives a greyscale or color-blind read.; Use the spool> prompt, bracket focus, form-feed rules, and reverse-video selection as the recurring grammar.
- Do not: Do not use square-grid backgrounds, dotted textures, decorative side rails, colored card stripes, or single accent edges on cards.; Do not turn the language into vaporwave, cyberpunk, arcade CRT, or green-on-black hacker nostalgia.; Do not nest cards or box the nav into a pill bar; let the masthead sit openly across the header.; Do not spread accent colors across unrelated decoration; every color identifies state, syntax, or interaction.
## 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 SpoolShadcnKit() {
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">Spool</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": "Landing and embodiment use a centered single-column listing measure (~980px) with a persistent left address gutter; the dashboard widens to a tape-plus-inspector grid (2.1fr / 1fr). Mobile collapses to stacked address+line packets without square-grid backgrounds.",
"whitespace": "Narrow but intentional: 8px row rhythm, 16-18px pane padding, and 24-32px macro gaps around primary operational zones.",
"density": "dense but calm",
"responsive": "Every artifact renders from ~390px mobile (single column, address+line packets, state below) to 2560px+ ultra-wide (capped, centred content; only the hero spans 100vw).",
"breakpoints": {
"mobile": "390px",
"tablet": "720px",
"desktop": "1100px",
"wide": "1440px"
}
}
{
"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-019ef9bd-d955-78d2-bd49-1bd396c7c8d5",
"name": "Spool",
"slug": "spool"
},
"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": [
"Deep ink-violet graphite ground (#15101C, aubergine-black) with broad horizontal luminance scan bands and soft radial panel light; never a square grid or dotted texture.",
"The listing tape: a single-column measure with a fixed left address gutter of tabular numerals, rows that indent by scope depth with SVG elbow connectors.",
"Reverse-video selection: the chosen line flips to listing-paper neutral with darkened syntax color, never a side stripe or colored card rail.",
"Typography pairs mechanical Space Grotesk display with JetBrains Mono command, address, and metric text using tabular numerals and tight negative tracking.",
"Semantic syntax color is limited to coral commands, cyan data, and violet selection, with quiet green/yellow/red/blue state that always pairs color with a written word."
],
"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": "Spool 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": [
"Let the address gutter and scope indent carry structure; cite and rewind operations by address.",
"Keep every color mapped to a role: command, data, selection, or a labelled state.",
"Pair every state color with a written word so state survives a greyscale or color-blind read.",
"Use the spool> prompt, bracket focus, form-feed rules, and reverse-video selection as the recurring grammar."
],
"dont": [
"Do not use square-grid backgrounds, dotted textures, decorative side rails, colored card stripes, or single accent edges on cards.",
"Do not turn the language into vaporwave, cyberpunk, arcade CRT, or green-on-black hacker nostalgia.",
"Do not nest cards or box the nav into a pill bar; let the masthead sit openly across the header.",
"Do not spread accent colors across unrelated decoration; every color identifies state, syntax, or interaction."
]
}
}