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.
A continuous-form sheet: a centred column with perforated tractor-feed margins; sections stack as report pages under page-break labels (P. OVERVIEW … PG 002). The dashboard adds a left section-directory rail.
Hairline outlines, dashed inner dividers, the inset recess, the greenbar stripe, and a double rule for major breaks — never nested cards.
Dense, instrument-panel listings favouring numbered records, tables, figures, and command surfaces over decorative hero moments.
Result-code gutter + greenbar stripe rows + angled overprint stamp; supported by tractor-feed sprocket margins and double-rule report letterhead.
Character-cell rhythm; minmax(0,1fr) columns with min-width:0 children so grids never blow out their container.
Generous padding above titles; the inset recess, dashed dividers, and greenbar stripe replace heavy boxing.
Dense, report-style layouts favouring listings, figures, and queues.
Single column on mobile; the dashboard rail and non-essential nav links hide, the feed margin narrows, the listing drops its amount column; never overflow horizontally; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
phosphor
Phosphor-technique CAD wireframes of printing and ledger machinery — thin luminous green hairlines on near-black, like a pen-plotter blueprint. The landing hero is a high-speed line printer feeding a long curving sheet of perforated continuous-form paper, the machine that produced the report.
One full-viewport hero with the phosphor wireframe on near-black in the right column and the headline on a paper column to the left; keep imagery to the wireframe technique, never photographic or painterly.
# Greenbar ## Philosophy Greenbar is a line-printer report design language: the interface is a printed operations listing on continuous-form paper, not a glowing screen. A run prints as a numbered listing with a fixed-width result code in the left gutter, totals are footed at the page break, and the run is struck with an angled overprint stamp. It takes the Technical Mono brief — monospace as a deliberate choice, character-precise alignment, exposed structure, state as fixed-width text — to its paper artifact: the green-striped, tractor-fed printout the terminal was always producing. Warm paper ground, two inks, strictly rectangular, flat. ### Values - State reads down one column: a fixed-width result code in the gutter (000 / W12 / E04 / RUN / ---), never a field of badges - The greenbar stripe is the row rhythm itself — separation off continuous-form stock, with no boxed or nested cells - Exposed structure as the form: perforated tractor-feed margins, dashed inner dividers, double-rule report breaks - Flat material: warm paper, hairline outlines, two inks plus a structural green stripe — no gradient, blur, or drop shadow ### Anti-Values - Soft rounded SaaS friendliness and pill-shaped status badges - Nested cards or a top nav trapped in a floating pill or rounded bar - Decorative ornament that does not belong to the printed-report grammar - Letting the green stripe become a fourth accent fill instead of structure ### Visual Character - A warm continuous-form paper ground (#F3F0E6) with perforated tractor-feed sprocket margins punched down both page edges as the only edge texture. - Listing rows alternate paper-white and a pale green stripe (#DCE7CF) carried straight off greenbar stock, so a record's rhythm is the band, not a box. - A fixed-width result-code gutter on the left — 000 clean (green), W12 held (amber), E04 reject (oxblood), RUN active (ink) — read as one scannable column. - Runs are footed and struck with an angled overprint stamp (POSTED / RECONCILED / HELD), drawn as a rotated 2px outline, never a soft pill. - Two deliberate monospaces — Martian Mono for display, codes, and stamps; Spline Sans Mono for body and listings — set on a strictly rectangular, flat-filled report. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F3F0E6` | | surface | `#FBF9F1` | | band | `#DCE7CF` | | inset | `#EEEADC` | | text | `#21241C` | | muted | `#7C7A6B` | | border | `#C9C4B0` | | rule | `#B7B19A` | | accent | `#B23A28` | | on_accent | `#FBF9F1` | | ink | `#2E5A8F` | | amber | `#8A6A12` | | success | `#3E6B33` | | info | `#2E5A8F` | | warning | `#8A6A12` | | error | `#B23A28` | ### Typography - **Base Size**: 17px - **Body Font**: Spline Sans Mono - **Heading Font**: Martian Mono - **Mono Font**: Spline Sans Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: 0.01em - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600;700&family=Spline+Sans+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap ### Radii - **None**: 0 - **Sm**: 0 - **Md**: 0 - **Lg**: 0 - **Card**: 0 - **Full**: 9999px ### Shadows - **Sm**: 0 0 0 1px #C9C4B0 - **Md**: 0 0 0 1px #C9C4B0 - **Lg**: none - **Stamp**: 0 0 0 2px currentColor ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,40,56,80] ### Surfaces - **Treatment**: flat - **Card Style**: Flat #FBF9F1 print surface on a #F3F0E6 paper ground, separated by 0 0 0 1px hairline outlines and 1px dashed inner dividers; listings recess into the greenbar stripe and the #EEEADC inset, never into a nested card. No gradients, blur, or shadow. - **Bg Pattern**: tractor-feed sprocket margins + greenbar zebra stripe ### Borders - **Default Width**: 1px - **Accent Width**: 1px - **Style**: solid - **Character**: Borders are flat hairline box-shadow outlines, never a coloured accent edge; nested groups switch to dashed dividers and a double rule marks a report page break, keeping hierarchy without a second box. ### Motion - **Duration**: 150ms - **Easing**: linear - **Philosophy**: Snappy and mechanical, like a printer advancing a line. The settled state renders with no JavaScript; an inline script adds .preanim only when motion is allowed, gating an on-scroll reveal, and respects prefers-reduced-motion. ## Rules ### Composition A continuous-form sheet: a centred column with perforated tractor-feed margins; sections stack as report pages under page-break labels (P. OVERVIEW … PG 002). The dashboard adds a left section-directory rail. ### Hierarchy Hairline outlines, dashed inner dividers, the inset recess, the greenbar stripe, and a double rule for major breaks — never nested cards. ### Density Dense, instrument-panel listings favouring numbered records, tables, figures, and command surfaces over decorative hero moments. ### Signature Result-code gutter + greenbar stripe rows + angled overprint stamp; supported by tractor-feed sprocket margins and double-rule report letterhead. ## Layout ### Grid Character-cell rhythm; minmax(0,1fr) columns with min-width:0 children so grids never blow out their container. ### Whitespace Generous padding above titles; the inset recess, dashed dividers, and greenbar stripe replace heavy boxing. ### Density Dense, report-style layouts favouring listings, figures, and queues. ### Responsive Single column on mobile; the dashboard rail and non-essential nav links hide, the feed margin narrows, the listing drops its amount column; never overflow horizontally; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide. ### Breakpoints - **Mobile**: 390px - **Tablet**: 760px - **Desktop**: 980px - **Wide**: 1440px ## Guidance ### Do - Read state down the result-code gutter; recolour the codes by semantic role. - Use the greenbar stripe as the row rhythm, not as an accent fill. - Foot runs with an angled overprint stamp drawn as a rotated outline. - Keep the masthead open across a double rule; build hierarchy with space, type, rules, and the inset. ### Don't - Don't box listing rows into cards or nest a second border inside a panel. - Don't render state as a soft pill or icon circle. - Don't let green read as a fourth highlighter; keep three (oxblood, ink, amber). - Don't add gradients, blur, or drop shadow as depth. ### Accessibility Body 17px on warm paper; ledger ink #21241C on #FBF9F1 exceeds 12:1 contrast. Result codes pair colour with a distinct fixed-width token (000/W12/E04) so state never relies on colour alone. Focus draws a 2px ink-blue ring. Respects prefers-reduced-motion. ## Imagery Direction ### Pairs With phosphor ### Summary Phosphor-technique CAD wireframes of printing and ledger machinery — thin luminous green hairlines on near-black, like a pen-plotter blueprint. The landing hero is a high-speed line printer feeding a long curving sheet of perforated continuous-form paper, the machine that produced the report. ### Subjects - line printer / print-chain mechanism - continuous-form fan-fold paper - tractor-feed sprocket - ribbon spool - ledger machine - punched card / tape reel ### Usage One full-viewport hero with the phosphor wireframe on near-black in the right column and the headline on a paper column to the left; keep imagery to the wireframe technique, never photographic or painterly.
---
version: "alpha"
name: "Greenbar"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F3F0E6"
surface: "#FBF9F1"
band: "#DCE7CF"
inset: "#EEEADC"
text: "#21241C"
muted: "#7C7A6B"
border: "#C9C4B0"
rule: "#B7B19A"
accent: "#B23A28"
on_accent: "#FBF9F1"
ink: "#2E5A8F"
amber: "#8A6A12"
success: "#3E6B33"
info: "#2E5A8F"
warning: "#8A6A12"
error: "#B23A28"
typography:
headline-lg:
fontFamily: "Martian Mono"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "0.01em"
headline-md:
fontFamily: "Martian Mono"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "0.01em"
body-md:
fontFamily: "Spline Sans Mono"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "0.01em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
lg: "0px"
card: "0px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "40px"
4xl: "56px"
step-8: "80px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-band:
backgroundColor: "{colors.band}"
color-reference-inset:
backgroundColor: "{colors.inset}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
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-ink:
backgroundColor: "{colors.ink}"
color-reference-amber:
backgroundColor: "{colors.amber}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#ffffff"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Greenbar
## Overview
Greenbar is a line-printer report design language: the interface is a printed operations listing on continuous-form paper, not a glowing screen. A run prints as a numbered listing with a fixed-width result code in the left gutter, totals are footed at the page break, and the run is struck with an angled overprint stamp. It takes the Technical Mono brief — monospace as a deliberate choice, character-precise alignment, exposed structure, state as fixed-width text — to its paper artifact: the green-striped, tractor-fed printout the terminal was always producing. Warm paper ground, two inks, strictly rectangular, flat.
### Values
- State reads down one column: a fixed-width result code in the gutter (000 / W12 / E04 / RUN / ---), never a field of badges
- The greenbar stripe is the row rhythm itself — separation off continuous-form stock, with no boxed or nested cells
- Exposed structure as the form: perforated tractor-feed margins, dashed inner dividers, double-rule report breaks
- Flat material: warm paper, hairline outlines, two inks plus a structural green stripe — no gradient, blur, or drop shadow
### Anti-Values
- Soft rounded SaaS friendliness and pill-shaped status badges
- Nested cards or a top nav trapped in a floating pill or rounded bar
- Decorative ornament that does not belong to the printed-report grammar
- Letting the green stripe become a fourth accent fill instead of structure
### Visual Character
- A warm continuous-form paper ground (#F3F0E6) with perforated tractor-feed sprocket margins punched down both page edges as the only edge texture.
- Listing rows alternate paper-white and a pale green stripe (#DCE7CF) carried straight off greenbar stock, so a record's rhythm is the band, not a box.
- A fixed-width result-code gutter on the left — 000 clean (green), W12 held (amber), E04 reject (oxblood), RUN active (ink) — read as one scannable column.
- Runs are footed and struck with an angled overprint stamp (POSTED / RECONCILED / HELD), drawn as a rotated 2px outline, never a soft pill.
- Two deliberate monospaces — Martian Mono for display, codes, and stamps; Spline Sans Mono for body and listings — set on a strictly rectangular, flat-filled report.
## 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 | `#F3F0E6` |
| surface | `#FBF9F1` |
| band | `#DCE7CF` |
| inset | `#EEEADC` |
| text | `#21241C` |
| muted | `#7C7A6B` |
| border | `#C9C4B0` |
| rule | `#B7B19A` |
| accent | `#B23A28` |
| on_accent | `#FBF9F1` |
| ink | `#2E5A8F` |
| amber | `#8A6A12` |
| success | `#3E6B33` |
| info | `#2E5A8F` |
| warning | `#8A6A12` |
| error | `#B23A28` |
## Typography
- **Headline-Lg**: Martian Mono, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Martian Mono, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Spline Sans Mono, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans 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**: `40px`
- **4xl**: `56px`
- **Step-8**: `80px`
### Grid
Character-cell rhythm; minmax(0,1fr) columns with min-width:0 children so grids never blow out their container.
### Whitespace
Generous padding above titles; the inset recess, dashed dividers, and greenbar stripe replace heavy boxing.
### Density
Dense, report-style layouts favouring listings, figures, and queues.
### Responsive
Single column on mobile; the dashboard rail and non-essential nav links hide, the feed margin narrows, the listing drops its amount column; never overflow horizontally; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 760px
- **Desktop**: 980px
- **Wide**: 1440px
## Elevation & Depth
### Shadows
- **Sm**: 0 0 0 1px #C9C4B0
- **Md**: 0 0 0 1px #C9C4B0
- **Lg**: none
- **Stamp**: 0 0 0 2px currentColor
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Card**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: flat
- **Card Style**: Flat #FBF9F1 print surface on a #F3F0E6 paper ground, separated by 0 0 0 1px hairline outlines and 1px dashed inner dividers; listings recess into the greenbar stripe and the #EEEADC inset, never into a nested card. No gradients, blur, or shadow.
- **Bg Pattern**: tractor-feed sprocket margins + greenbar zebra stripe
### Borders
- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Borders are flat hairline box-shadow outlines, never a coloured accent edge; nested groups switch to dashed dividers and a double rule marks a report page break, keeping hierarchy without a second box.
## Components
### Composition
A continuous-form sheet: a centred column with perforated tractor-feed margins; sections stack as report pages under page-break labels (P. OVERVIEW … PG 002). The dashboard adds a left section-directory rail.
### Hierarchy
Hairline outlines, dashed inner dividers, the inset recess, the greenbar stripe, and a double rule for major breaks — never nested cards.
### Density
Dense, instrument-panel listings favouring numbered records, tables, figures, and command surfaces over decorative hero moments.
### Signature
Result-code gutter + greenbar stripe rows + angled overprint stamp; supported by tractor-feed sprocket margins and double-rule report letterhead.
## 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-019ef94d-1485-7ba2-bfb5-558c2fe99b97/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 Read state down the result-code gutter; recolour the codes by semantic role.
- Do Use the greenbar stripe as the row rhythm, not as an accent fill.
- Do Foot runs with an angled overprint stamp drawn as a rotated outline.
- Do Keep the masthead open across a double rule; build hierarchy with space, type, rules, and the inset.
- Don't Don't box listing rows into cards or nest a second border inside a panel.
- Don't Don't render state as a soft pill or icon circle.
- Don't Don't let green read as a fourth highlighter; keep three (oxblood, ink, amber).
- Don't Don't add gradients, blur, or drop shadow as depth.
### Accessibility
Body 17px on warm paper; ledger ink #21241C on #FBF9F1 exceeds 12:1 contrast. Result codes pair colour with a distinct fixed-width token (000/W12/E04) so state never relies on colour alone. Focus draws a 2px ink-blue ring. Respects prefers-reduced-motion.
## Imagery Direction
### Pairs With
phosphor
### Summary
Phosphor-technique CAD wireframes of printing and ledger machinery — thin luminous green hairlines on near-black, like a pen-plotter blueprint. The landing hero is a high-speed line printer feeding a long curving sheet of perforated continuous-form paper, the machine that produced the report.
### Subjects
- line printer / print-chain mechanism
- continuous-form fan-fold paper
- tractor-feed sprocket
- ribbon spool
- ledger machine
- punched card / tape reel
### Usage
One full-viewport hero with the phosphor wireframe on near-black in the right column and the headline on a paper column to the left; keep imagery to the wireframe technique, never photographic or painterly.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "greenbar",
"type": "registry:theme",
"title": "Greenbar shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F3F0E6",
"foreground": "#21241C",
"card": "#FBF9F1",
"card-foreground": "#21241C",
"popover": "#FBF9F1",
"popover-foreground": "#21241C",
"primary": "#21241C",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#7C7A6B",
"muted-foreground": "#21241C",
"accent": "#B23A28",
"accent-foreground": "#ffffff",
"destructive": "#B23A28",
"border": "#C9C4B0",
"input": "#C9C4B0",
"ring": "#B23A28",
"chart-1": "#21241C",
"chart-2": "#f4f4f5",
"chart-3": "#B23A28",
"chart-4": "#3E6B33",
"chart-5": "#8A6A12",
"sidebar": "#FBF9F1",
"sidebar-foreground": "#21241C",
"sidebar-primary": "#21241C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2E5A8F",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#C9C4B0",
"sidebar-ring": "#B23A28",
"radius": "0"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#21241C",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#B23A28",
"accent-foreground": "#ffffff",
"destructive": "#B23A28",
"border": "#303642",
"input": "#303642",
"ring": "#B23A28",
"chart-1": "#21241C",
"chart-2": "#f4f4f5",
"chart-3": "#B23A28",
"chart-4": "#3E6B33",
"chart-5": "#8A6A12",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#21241C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#B23A28",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#B23A28",
"radius": "0"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef94d-1485-7ba2-bfb5-558c2fe99b97",
"slug": "greenbar",
"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",
"amber",
"band",
"bg",
"border",
"error",
"info",
"ink",
"inset",
"muted",
"on_accent",
"rule",
"success",
"surface",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"mono_font"
],
"radii": [
"card",
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"lg",
"md",
"sm",
"stamp"
],
"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 Greenbarand 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: #F3F0E6;
--foreground: #21241C;
--card: #FBF9F1;
--card-foreground: #21241C;
--popover: #FBF9F1;
--popover-foreground: #21241C;
--primary: #21241C;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #7C7A6B;
--muted-foreground: #21241C;
--accent: #B23A28;
--accent-foreground: #ffffff;
--destructive: #B23A28;
--border: #C9C4B0;
--input: #C9C4B0;
--ring: #B23A28;
--chart-1: #21241C;
--chart-2: #f4f4f5;
--chart-3: #B23A28;
--chart-4: #3E6B33;
--chart-5: #8A6A12;
--sidebar: #FBF9F1;
--sidebar-foreground: #21241C;
--sidebar-primary: #21241C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2E5A8F;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #C9C4B0;
--sidebar-ring: #B23A28;
--radius: 0;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #21241C;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #B23A28;
--accent-foreground: #ffffff;
--destructive: #B23A28;
--border: #303642;
--input: #303642;
--ring: #B23A28;
--chart-1: #21241C;
--chart-2: #f4f4f5;
--chart-3: #B23A28;
--chart-4: #3E6B33;
--chart-5: #8A6A12;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #21241C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #B23A28;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #B23A28;
--radius: 0;
}
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 GreenbarShadcnKit() {
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">Greenbar</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": "greenbar",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "Spline Sans Mono, ui-monospace, monospace",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"font-serif": "Martian Mono, ui-monospace, monospace",
"radius": "0rem"
},
"light": {
"background": "#F3F0E6",
"foreground": "#21241C",
"card": "#FBF9F1",
"card-foreground": "#21241C",
"popover": "#FBF9F1",
"popover-foreground": "#21241C",
"primary": "#B23A28",
"primary-foreground": "#FBF9F1",
"secondary": "#DCE7CF",
"secondary-foreground": "#21241C",
"muted": "#EEEADC",
"muted-foreground": "#7C7A6B",
"accent": "#2E5A8F",
"accent-foreground": "#FBF9F1",
"destructive": "#B23A28",
"destructive-foreground": "#FBF9F1",
"border": "#C9C4B0",
"input": "#B7B19A",
"ring": "#2E5A8F",
"chart-1": "#3E6B33",
"chart-2": "#2E5A8F",
"chart-3": "#8A6A12",
"chart-4": "#B23A28",
"chart-5": "#7C7A6B"
},
"dark": {
"background": "#16170F",
"foreground": "#EDE9DA",
"card": "#1C1E14",
"card-foreground": "#EDE9DA",
"popover": "#1C1E14",
"popover-foreground": "#EDE9DA",
"primary": "#D85A45",
"primary-foreground": "#16170F",
"secondary": "#2A2E1F",
"secondary-foreground": "#EDE9DA",
"muted": "#23251A",
"muted-foreground": "#A09C89",
"accent": "#6FA0CE",
"accent-foreground": "#16170F",
"destructive": "#D85A45",
"destructive-foreground": "#16170F",
"border": "#34372A",
"input": "#414434",
"ring": "#6FA0CE",
"chart-1": "#6FAd5A",
"chart-2": "#6FA0CE",
"chart-3": "#C49A3E",
"chart-4": "#D85A45",
"chart-5": "#A09C89"
}
}
}
# Greenbar shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef94d-1485-7ba2-bfb5-558c2fe99b97`
Slug: `greenbar`
## Intent
Greenbar is a line-printer report design language: the interface is a printed operations listing on continuous-form paper, not a glowing screen. A run prints as a numbered listing with a fixed-width result code in the left gutter, totals are footed at the page break, and the run is struck with an angled overprint stamp. It takes the Technical Mono brief — monospace as a deliberate choice, character-precise alignment, exposed structure, state as fixed-width text — to its paper artifact: the green-striped, tractor-fed printout the terminal was always producing. Warm paper ground, two inks, strictly rectangular, flat.
## 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": "#F3F0E6",
"surface": "#FBF9F1",
"band": "#DCE7CF",
"inset": "#EEEADC",
"text": "#21241C",
"muted": "#7C7A6B",
"border": "#C9C4B0",
"rule": "#B7B19A",
"accent": "#B23A28",
"on_accent": "#FBF9F1",
"ink": "#2E5A8F",
"amber": "#8A6A12",
"success": "#3E6B33",
"info": "#2E5A8F",
"warning": "#8A6A12",
"error": "#B23A28"
}
Typography:
{
"base_size": "17px",
"body_font": "Spline Sans Mono",
"heading_font": "Martian Mono",
"mono_font": "Spline Sans Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "0.01em",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600;700&family=Spline+Sans+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap"
}
## Visual character to preserve
- A warm continuous-form paper ground (#F3F0E6) with perforated tractor-feed sprocket margins punched down both page edges as the only edge texture.
- Listing rows alternate paper-white and a pale green stripe (#DCE7CF) carried straight off greenbar stock, so a record's rhythm is the band, not a box.
- A fixed-width result-code gutter on the left — 000 clean (green), W12 held (amber), E04 reject (oxblood), RUN active (ink) — read as one scannable column.
- Runs are footed and struck with an angled overprint stamp (POSTED / RECONCILED / HELD), drawn as a rotated 2px outline, never a soft pill.
- Two deliberate monospaces — Martian Mono for display, codes, and stamps; Spline Sans Mono for body and listings — set on a strictly rectangular, flat-filled report.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "pebble",
"border": "dashed",
"underlay": false,
"grain": true,
"stickerBadges": true,
"motion": "lift-rotate",
"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/greenbar/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: Read state down the result-code gutter; recolour the codes by semantic role.; Use the greenbar stripe as the row rhythm, not as an accent fill.; Foot runs with an angled overprint stamp drawn as a rotated outline.; Keep the masthead open across a double rule; build hierarchy with space, type, rules, and the inset.
- Do not: Don't box listing rows into cards or nest a second border inside a panel.; Don't render state as a soft pill or icon circle.; Don't let green read as a fourth highlighter; keep three (oxblood, ink, amber).; Don't add gradients, blur, or drop shadow as depth.
## 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 GreenbarShadcnKit() {
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">Greenbar</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": "Character-cell rhythm; minmax(0,1fr) columns with min-width:0 children so grids never blow out their container.",
"whitespace": "Generous padding above titles; the inset recess, dashed dividers, and greenbar stripe replace heavy boxing.",
"density": "Dense, report-style layouts favouring listings, figures, and queues.",
"responsive": "Single column on mobile; the dashboard rail and non-essential nav links hide, the feed margin narrows, the listing drops its amount column; never overflow horizontally; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.",
"breakpoints": {
"mobile": "390px",
"tablet": "760px",
"desktop": "980px",
"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-019ef94d-1485-7ba2-bfb5-558c2fe99b97",
"name": "Greenbar",
"slug": "greenbar"
},
"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": [
"A warm continuous-form paper ground (#F3F0E6) with perforated tractor-feed sprocket margins punched down both page edges as the only edge texture.",
"Listing rows alternate paper-white and a pale green stripe (#DCE7CF) carried straight off greenbar stock, so a record's rhythm is the band, not a box.",
"A fixed-width result-code gutter on the left — 000 clean (green), W12 held (amber), E04 reject (oxblood), RUN active (ink) — read as one scannable column.",
"Runs are footed and struck with an angled overprint stamp (POSTED / RECONCILED / HELD), drawn as a rotated 2px outline, never a soft pill.",
"Two deliberate monospaces — Martian Mono for display, codes, and stamps; Spline Sans Mono for body and listings — set on a strictly rectangular, flat-filled report."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "pebble",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": true,
"motion": "lift-rotate",
"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": "Greenbar 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": [
"Read state down the result-code gutter; recolour the codes by semantic role.",
"Use the greenbar stripe as the row rhythm, not as an accent fill.",
"Foot runs with an angled overprint stamp drawn as a rotated outline.",
"Keep the masthead open across a double rule; build hierarchy with space, type, rules, and the inset."
],
"dont": [
"Don't box listing rows into cards or nest a second border inside a panel.",
"Don't render state as a soft pill or icon circle.",
"Don't let green read as a fourth highlighter; keep three (oxblood, ink, amber).",
"Don't add gradients, blur, or drop shadow as depth."
]
}
}