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 strict 12-column editorial grid, 1320px cap, with a left measure-column anchored to the vertical sounding line; content hangs to its right in asymmetric two- and three-up streamer rows, with 64-96px of vertical silence between dense ledger blocks.
Mono labels with section indices (01 / PROGRAM); condensed display headlines; serif editorial body; readings and gauge scales in mono. One primary action per view.
Dense but calm: rich ledger and program blocks separated by generous silence, never a wall and never sparse.
A 1px ink sounding line with tick-stops threads the page. Cards clip to it via a caret notch and carry a graduated tick-rail; buttons share one pill height (primary solid sky, secondary recessed with a leading tick); baseline-rule inputs drop a sky plumb-bob dot on focus; tables are ascent ledgers with gauge chips; nav is the line with a filled active tick.
12-column editorial grid, 1320px cap; a vertical sounding line anchors a left measure-column; asymmetric two- and three-up streamer rows to its right.
Generous 64-96px vertical silence between dense blocks; always pad above titles.
Program day-rails and ascent ledgers carry real content; silence frames them.
Mobile collapses to a single column; the line moves to the far-left margin and cards stack as clipped slips; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
390px mobile, 760px and 980px reflow, 1320px cap, full-bleed hero at 100vw.
sumitsubo
Atmospheric, layered cyanotype-style overprints of a civic riverside Children's Day festival: koinobori streamers rising along a city riverbank in clear early-summer light, a sky-blue ink plate over a warm-grey photographic halftone with registration ghosting and a faint blueprint tick-grid, one thin plumb-line carrying calibration tick-stops dropping through the frame. Never a flat loud silhouette.
Hero is one full-bleed atmospheric riverside scene with the sounding line continuing edge to edge; the milk veil keeps overlay type legible over the lit left zone; below the hero, imagery gives way to contained editorial calm.
# Plumb ## Philosophy A Bauhaus-lineage publishing and wayfinding system built on the koinobori as a calibrated measuring instrument. Every carp is a graduated ascent gauge marking how high a child has climbed this year. The ownable idea is the sounding line: a thin 1px ink plumb-line that drops true through the whole page like a flagpole rope, with tick-stops where streamers attach. Confident, grown-up, editorial. ### Values - The carp is an instrument, not a toy: every streamer reads a milestone scale. - One continuous ink line threads the page; components hang off it like streamers off a pole. - Accents are highlighters: a tick, a dot, or one knockout button, never a panel flood. - Editorial calm: generous silence between dense ledger blocks. ### Anti-Values - Childish mascots, balloons, primary-colour clutter, or toy aesthetics. - Full-bleed colour floods; muddy or washed-out pastel. - Border boxes and accent-edge cards. - Sparse, decorative pages without a measuring idea. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#FFFFFF` | | surface | `#F4F7F8` | | surface_2 | `#FFFFFF` | | text | `#0E1518` | | muted | `#5A6A70` | | border | `#0E1518` | | accent | `#1FA8FF` | | accent_deep | `#0E7CCB` | | on_accent | `#FFFFFF` | | signal | `#46D17A` | | on_signal | `#08361A` | | success | `#46D17A` | | warning | `#E0962E` | | error | `#FF5A4D` | | info | `#1FA8FF` | ### Typography - **Base Size**: 17px - **Body Font**: Fraunces - **Heading Font**: Archivo Narrow - **Mono Font**: Spline Sans Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.035em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spline+Sans+Mono:wght@400;500&display=swap ### Radii - **None**: 0 - **Card**: 16px - **Lg**: 24px - **Pill**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(14,21,24,0.08) - **Md**: 0 18px 50px rgba(31,168,255,0.10) - **Lg**: 0 40px 100px rgba(14,21,24,0.10) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Bg Pattern**: Pure white ground; the only repeating mark is a faint blueprint tick-grid behind the embodiment at ~3% opacity. Recessed slips take a faint #F4F7F8 paper tint. - **Card Style**: Streamer slip: no border box, 16px radius, soft sky-tinted shadow, a caret notch on the leading edge and a graduated ink tick-rail down the leading side. - **Treatment**: White-led and bright; accents never fill a panel. ### Borders - **Default Width**: 1px - **Accent Width**: 1.5px - **Style**: solid - **Character**: The sounding line is a 1px ink rule used vertically as the spine, plus short tick-stops; never a card border box, never an accent edge. ### Motion - **Duration**: 200ms - **Easing**: cubic-bezier(0.2, 0.0, 0.1, 1) - **Philosophy**: The settled page is the default. Sections rise on intersect; the plumb-bob dot drops onto the line on focus. Short fades and small lifts, no spectacle; respects prefers-reduced-motion. ## Rules ### Composition A strict 12-column editorial grid, 1320px cap, with a left measure-column anchored to the vertical sounding line; content hangs to its right in asymmetric two- and three-up streamer rows, with 64-96px of vertical silence between dense ledger blocks. ### Hierarchy Mono labels with section indices (01 / PROGRAM); condensed display headlines; serif editorial body; readings and gauge scales in mono. One primary action per view. ### Density Dense but calm: rich ledger and program blocks separated by generous silence, never a wall and never sparse. ### Signature A 1px ink sounding line with tick-stops threads the page. Cards clip to it via a caret notch and carry a graduated tick-rail; buttons share one pill height (primary solid sky, secondary recessed with a leading tick); baseline-rule inputs drop a sky plumb-bob dot on focus; tables are ascent ledgers with gauge chips; nav is the line with a filled active tick. ## Layout ### Grid 12-column editorial grid, 1320px cap; a vertical sounding line anchors a left measure-column; asymmetric two- and three-up streamer rows to its right. ### Whitespace Generous 64-96px vertical silence between dense blocks; always pad above titles. ### Density Program day-rails and ascent ledgers carry real content; silence frames them. ### Responsive Mobile collapses to a single column; the line moves to the far-left margin and cards stack as clipped slips; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide. ### Breakpoints 390px mobile, 760px and 980px reflow, 1320px cap, full-bleed hero at 100vw. ## Guidance ### Do - Thread one continuous 1px ink sounding line through the layout with tick-stops where components attach. - Clip cards to the line with a caret notch and a graduated tick-rail down the leading edge. - Use electric sky for ascent and the active state, fresh leaf only for a milestone reached, hot coral for one hero pop and the error. - Keep one primary button per view; share one pill height across the set. - Use baseline-rule inputs with mono field-tags on the rule and a sky plumb-bob dot on focus. ### Don't - Don't flood a panel with an accent colour or give a card an accent edge. - Don't make it childish, cluttered, or a toy; no mascots or balloons. - Don't box the nav into a pill bar or floating card. - Don't crowd the hero image with type or use a lazy full scrim. ### Accessibility Body 17px+, table rows 14.5px+; high contrast ink on white and white on sky; focus is a visible sky plumb-bob dot; motion respects prefers-reduced-motion; the settled page renders with no JavaScript. ## Imagery Direction ### Pairs With sumitsubo ### Summary Atmospheric, layered cyanotype-style overprints of a civic riverside Children's Day festival: koinobori streamers rising along a city riverbank in clear early-summer light, a sky-blue ink plate over a warm-grey photographic halftone with registration ghosting and a faint blueprint tick-grid, one thin plumb-line carrying calibration tick-stops dropping through the frame. Never a flat loud silhouette. ### Subjects - koinobori streamers on bamboo poles along a riverbank - a calm city river with a low arched stone bridge - a riverside festival site with pole-stations - paper lanterns floating on water after dark - a graduated plumb-line measuring instrument ### Usage Hero is one full-bleed atmospheric riverside scene with the sounding line continuing edge to edge; the milk veil keeps overlay type legible over the lit left zone; below the hero, imagery gives way to contained editorial calm.
---
version: "alpha"
name: "Plumb"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#FFFFFF"
surface: "#F4F7F8"
surface_2: "#FFFFFF"
text: "#0E1518"
muted: "#5A6A70"
border: "#0E1518"
accent: "#1FA8FF"
accent_deep: "#0E7CCB"
on_accent: "#FFFFFF"
signal: "#46D17A"
on_signal: "#08361A"
success: "#46D17A"
warning: "#E0962E"
error: "#FF5A4D"
info: "#1FA8FF"
typography:
headline-lg:
fontFamily: "Archivo Narrow"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.035em"
headline-md:
fontFamily: "Archivo Narrow"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.035em"
body-md:
fontFamily: "Fraunces"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.035em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
card: "16px"
lg: "24px"
pill: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_deep:
backgroundColor: "{colors.accent_deep}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-signal:
backgroundColor: "{colors.signal}"
color-reference-on_signal:
backgroundColor: "{colors.on_signal}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.lg}"
height: "44px"
---
# Plumb
## Overview
A Bauhaus-lineage publishing and wayfinding system built on the koinobori as a calibrated measuring instrument. Every carp is a graduated ascent gauge marking how high a child has climbed this year. The ownable idea is the sounding line: a thin 1px ink plumb-line that drops true through the whole page like a flagpole rope, with tick-stops where streamers attach. Confident, grown-up, editorial.
### Values
- The carp is an instrument, not a toy: every streamer reads a milestone scale.
- One continuous ink line threads the page; components hang off it like streamers off a pole.
- Accents are highlighters: a tick, a dot, or one knockout button, never a panel flood.
- Editorial calm: generous silence between dense ledger blocks.
### Anti-Values
- Childish mascots, balloons, primary-colour clutter, or toy aesthetics.
- Full-bleed colour floods; muddy or washed-out pastel.
- Border boxes and accent-edge cards.
- Sparse, decorative pages without a measuring idea.
## 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 | `#FFFFFF` |
| surface | `#F4F7F8` |
| surface_2 | `#FFFFFF` |
| text | `#0E1518` |
| muted | `#5A6A70` |
| border | `#0E1518` |
| accent | `#1FA8FF` |
| accent_deep | `#0E7CCB` |
| on_accent | `#FFFFFF` |
| signal | `#46D17A` |
| on_signal | `#08361A` |
| success | `#46D17A` |
| warning | `#E0962E` |
| error | `#FF5A4D` |
| info | `#1FA8FF` |
## Typography
- **Headline-Lg**: Archivo Narrow, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Narrow, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Fraunces, 17px, weight 400, line-height 1.55.
- **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**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
### Grid
12-column editorial grid, 1320px cap; a vertical sounding line anchors a left measure-column; asymmetric two- and three-up streamer rows to its right.
### Whitespace
Generous 64-96px vertical silence between dense blocks; always pad above titles.
### Density
Program day-rails and ascent ledgers carry real content; silence frames them.
### Responsive
Mobile collapses to a single column; the line moves to the far-left margin and cards stack as clipped slips; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
### Breakpoints
390px mobile, 760px and 980px reflow, 1320px cap, full-bleed hero at 100vw.
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(14,21,24,0.08)
- **Md**: 0 18px 50px rgba(31,168,255,0.10)
- **Lg**: 0 40px 100px rgba(14,21,24,0.10)
## Shapes
### Rounded
- **None**: `0px`
- **Card**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`
### Surfaces
- **Bg Pattern**: Pure white ground; the only repeating mark is a faint blueprint tick-grid behind the embodiment at ~3% opacity. Recessed slips take a faint #F4F7F8 paper tint.
- **Card Style**: Streamer slip: no border box, 16px radius, soft sky-tinted shadow, a caret notch on the leading edge and a graduated ink tick-rail down the leading side.
- **Treatment**: White-led and bright; accents never fill a panel.
### Borders
- **Default Width**: 1px
- **Accent Width**: 1.5px
- **Style**: solid
- **Character**: The sounding line is a 1px ink rule used vertically as the spine, plus short tick-stops; never a card border box, never an accent edge.
## Components
### Composition
A strict 12-column editorial grid, 1320px cap, with a left measure-column anchored to the vertical sounding line; content hangs to its right in asymmetric two- and three-up streamer rows, with 64-96px of vertical silence between dense ledger blocks.
### Hierarchy
Mono labels with section indices (01 / PROGRAM); condensed display headlines; serif editorial body; readings and gauge scales in mono. One primary action per view.
### Density
Dense but calm: rich ledger and program blocks separated by generous silence, never a wall and never sparse.
### Signature
A 1px ink sounding line with tick-stops threads the page. Cards clip to it via a caret notch and carry a graduated tick-rail; buttons share one pill height (primary solid sky, secondary recessed with a leading tick); baseline-rule inputs drop a sky plumb-bob dot on focus; tables are ascent ledgers with gauge chips; nav is the line with a filled active tick.
## 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-019efaca-de91-73d2-8ad0-752e52ea8991/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 Thread one continuous 1px ink sounding line through the layout with tick-stops where components attach.
- Do Clip cards to the line with a caret notch and a graduated tick-rail down the leading edge.
- Do Use electric sky for ascent and the active state, fresh leaf only for a milestone reached, hot coral for one hero pop and the error.
- Do Keep one primary button per view; share one pill height across the set.
- Do Use baseline-rule inputs with mono field-tags on the rule and a sky plumb-bob dot on focus.
- Don't Don't flood a panel with an accent colour or give a card an accent edge.
- Don't Don't make it childish, cluttered, or a toy; no mascots or balloons.
- Don't Don't box the nav into a pill bar or floating card.
- Don't Don't crowd the hero image with type or use a lazy full scrim.
### Accessibility
Body 17px+, table rows 14.5px+; high contrast ink on white and white on sky; focus is a visible sky plumb-bob dot; motion respects prefers-reduced-motion; the settled page renders with no JavaScript.
## Imagery Direction
### Pairs With
sumitsubo
### Summary
Atmospheric, layered cyanotype-style overprints of a civic riverside Children's Day festival: koinobori streamers rising along a city riverbank in clear early-summer light, a sky-blue ink plate over a warm-grey photographic halftone with registration ghosting and a faint blueprint tick-grid, one thin plumb-line carrying calibration tick-stops dropping through the frame. Never a flat loud silhouette.
### Subjects
- koinobori streamers on bamboo poles along a riverbank
- a calm city river with a low arched stone bridge
- a riverside festival site with pole-stations
- paper lanterns floating on water after dark
- a graduated plumb-line measuring instrument
### Usage
Hero is one full-bleed atmospheric riverside scene with the sounding line continuing edge to edge; the milk veil keeps overlay type legible over the lit left zone; below the hero, imagery gives way to contained editorial calm.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "plumb",
"type": "registry:theme",
"title": "Plumb shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#FFFFFF",
"foreground": "#0E1518",
"card": "#F4F7F8",
"card-foreground": "#0E1518",
"popover": "#F4F7F8",
"popover-foreground": "#0E1518",
"primary": "#0E1518",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#5A6A70",
"muted-foreground": "#0E1518",
"accent": "#1FA8FF",
"accent-foreground": "#ffffff",
"destructive": "#FF5A4D",
"border": "#0E1518",
"input": "#0E1518",
"ring": "#1FA8FF",
"chart-1": "#0E1518",
"chart-2": "#f4f4f5",
"chart-3": "#1FA8FF",
"chart-4": "#46D17A",
"chart-5": "#E0962E",
"sidebar": "#F4F7F8",
"sidebar-foreground": "#0E1518",
"sidebar-primary": "#0E1518",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#1FA8FF",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#0E1518",
"sidebar-ring": "#1FA8FF",
"radius": "24px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#0E1518",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#1FA8FF",
"accent-foreground": "#ffffff",
"destructive": "#FF5A4D",
"border": "#303642",
"input": "#303642",
"ring": "#1FA8FF",
"chart-1": "#0E1518",
"chart-2": "#f4f4f5",
"chart-3": "#1FA8FF",
"chart-4": "#46D17A",
"chart-5": "#E0962E",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#0E1518",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#1FA8FF",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#1FA8FF",
"radius": "24px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efaca-de91-73d2-8ad0-752e52ea8991",
"slug": "plumb",
"componentManifest": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"nativeTokenNames": {
"colors": [
"accent",
"accent_deep",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"on_signal",
"signal",
"success",
"surface",
"surface_2",
"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": [
"card",
"lg",
"none",
"pill"
],
"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
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2
Keep Plumband 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: #FFFFFF;
--foreground: #0E1518;
--card: #F4F7F8;
--card-foreground: #0E1518;
--popover: #F4F7F8;
--popover-foreground: #0E1518;
--primary: #0E1518;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #5A6A70;
--muted-foreground: #0E1518;
--accent: #1FA8FF;
--accent-foreground: #ffffff;
--destructive: #FF5A4D;
--border: #0E1518;
--input: #0E1518;
--ring: #1FA8FF;
--chart-1: #0E1518;
--chart-2: #f4f4f5;
--chart-3: #1FA8FF;
--chart-4: #46D17A;
--chart-5: #E0962E;
--sidebar: #F4F7F8;
--sidebar-foreground: #0E1518;
--sidebar-primary: #0E1518;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #1FA8FF;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #0E1518;
--sidebar-ring: #1FA8FF;
--radius: 24px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #0E1518;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #1FA8FF;
--accent-foreground: #ffffff;
--destructive: #FF5A4D;
--border: #303642;
--input: #303642;
--ring: #1FA8FF;
--chart-1: #0E1518;
--chart-2: #f4f4f5;
--chart-3: #1FA8FF;
--chart-4: #46D17A;
--chart-5: #E0962E;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #0E1518;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #1FA8FF;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #1FA8FF;
--radius: 24px;
}
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 PlumbShadcnKit() {
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">Plumb</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": "plumb",
"type": "registry:theme",
"title": "Plumb — Sounding Line",
"author": "katagami-agent",
"cssVars": {
"theme": {
"font-sans": "Archivo Narrow, Arial Narrow, sans-serif",
"font-serif": "Fraunces, Georgia, serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#FFFFFF",
"foreground": "#0E1518",
"card": "#FFFFFF",
"card-foreground": "#0E1518",
"popover": "#FFFFFF",
"popover-foreground": "#0E1518",
"primary": "#1FA8FF",
"primary-foreground": "#FFFFFF",
"secondary": "#F4F7F8",
"secondary-foreground": "#0E1518",
"muted": "#F4F7F8",
"muted-foreground": "#5A6A70",
"accent": "#E1F0FC",
"accent-foreground": "#0E7CCB",
"destructive": "#FF5A4D",
"destructive-foreground": "#FFFFFF",
"success": "#46D17A",
"success-foreground": "#08361A",
"border": "#0E1518",
"input": "#0E1518",
"ring": "#1FA8FF",
"radius": "16px",
"chart-1": "#1FA8FF",
"chart-2": "#46D17A",
"chart-3": "#0E7CCB",
"chart-4": "#FF5A4D",
"chart-5": "#5A6A70"
},
"dark": {
"background": "#0E1518",
"foreground": "#EAF4FB",
"card": "#121C20",
"card-foreground": "#EAF4FB",
"popover": "#121C20",
"popover-foreground": "#EAF4FB",
"primary": "#1FA8FF",
"primary-foreground": "#04222F",
"secondary": "#16242A",
"secondary-foreground": "#EAF4FB",
"muted": "#16242A",
"muted-foreground": "#9FB6C2",
"accent": "#0E3A55",
"accent-foreground": "#8FD0FF",
"destructive": "#FF5A4D",
"destructive-foreground": "#FFFFFF",
"success": "#46D17A",
"success-foreground": "#08361A",
"border": "#26343A",
"input": "#26343A",
"ring": "#1FA8FF",
"radius": "16px",
"chart-1": "#1FA8FF",
"chart-2": "#46D17A",
"chart-3": "#8FD0FF",
"chart-4": "#FF5A4D",
"chart-5": "#9FB6C2"
}
}
}
# Plumb shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efaca-de91-73d2-8ad0-752e52ea8991`
Slug: `plumb`
## Intent
A Bauhaus-lineage publishing and wayfinding system built on the koinobori as a calibrated measuring instrument. Every carp is a graduated ascent gauge marking how high a child has climbed this year. The ownable idea is the sounding line: a thin 1px ink plumb-line that drops true through the whole page like a flagpole rope, with tick-stops where streamers attach. Confident, grown-up, editorial.
## 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": "#FFFFFF",
"surface": "#F4F7F8",
"surface_2": "#FFFFFF",
"text": "#0E1518",
"muted": "#5A6A70",
"border": "#0E1518",
"accent": "#1FA8FF",
"accent_deep": "#0E7CCB",
"on_accent": "#FFFFFF",
"signal": "#46D17A",
"on_signal": "#08361A",
"success": "#46D17A",
"warning": "#E0962E",
"error": "#FF5A4D",
"info": "#1FA8FF"
}
Typography:
{
"base_size": "17px",
"body_font": "Fraunces",
"heading_font": "Archivo Narrow",
"mono_font": "Spline Sans Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.035em",
"line_height": 1.55,
"scale_ratio": 1.25,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spline+Sans+Mono:wght@400;500&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": false,
"motion": "lift",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/plumb/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: Thread one continuous 1px ink sounding line through the layout with tick-stops where components attach.; Clip cards to the line with a caret notch and a graduated tick-rail down the leading edge.; Use electric sky for ascent and the active state, fresh leaf only for a milestone reached, hot coral for one hero pop and the error.; Keep one primary button per view; share one pill height across the set.; Use baseline-rule inputs with mono field-tags on the rule and a sky plumb-bob dot on focus.
- Do not: Don't flood a panel with an accent colour or give a card an accent edge.; Don't make it childish, cluttered, or a toy; no mascots or balloons.; Don't box the nav into a pill bar or floating card.; Don't crowd the hero image with type or use a lazy full scrim.
## 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 PlumbShadcnKit() {
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">Plumb</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "12-column editorial grid, 1320px cap; a vertical sounding line anchors a left measure-column; asymmetric two- and three-up streamer rows to its right.",
"whitespace": "Generous 64-96px vertical silence between dense blocks; always pad above titles.",
"density": "Program day-rails and ascent ledgers carry real content; silence frames them.",
"responsive": "Mobile collapses to a single column; the line moves to the far-left margin and cards stack as clipped slips; the full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.",
"breakpoints": "390px mobile, 760px and 980px reflow, 1320px cap, full-bleed hero at 100vw."
}
{
"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-019efaca-de91-73d2-8ad0-752e52ea8991",
"name": "Plumb",
"slug": "plumb"
},
"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": [],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"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": "Plumb 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": [
"Thread one continuous 1px ink sounding line through the layout with tick-stops where components attach.",
"Clip cards to the line with a caret notch and a graduated tick-rail down the leading edge.",
"Use electric sky for ascent and the active state, fresh leaf only for a milestone reached, hot coral for one hero pop and the error.",
"Keep one primary button per view; share one pill height across the set.",
"Use baseline-rule inputs with mono field-tags on the rule and a sky plumb-bob dot on focus."
],
"dont": [
"Don't flood a panel with an accent colour or give a card an accent edge.",
"Don't make it childish, cluttered, or a toy; no mascots or balloons.",
"Don't box the nav into a pill bar or floating card.",
"Don't crowd the hero image with type or use a lazy full scrim."
]
}
}