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.
Poster-led. Every screen opens onto open white; the landing leads with one full-bleed hero image, then alternates airy type-blocks, a full-bleed streamer-band, and flat panels. One primary action and one koi-pop per region; left-aligned, large, confident type blocks.
Three voices (Archivo Expanded display, Zen Kaku Gothic New body/UI, Space Mono data) plus the index-rule registration and the highlighter mark carry hierarchy. Colour is a highlighter, never the hierarchy device.
Airy and confident — big type, generous space, tall table rows (15px+), mono tabular numbers, flat panels with real internal padding. Bright and uncrowded.
streamer-band (full-bleed flat koinobori band, hard edges, forked tail); poster-head (oversized Archivo Expanded with one green/vermilion highlighter mark); index-rule (Space Mono section indices on a 2px ink rule with ticks); flat-block (hard-edged flat accent colour fields, no gradient, no shadow); koi-pop (the single hot-vermilion lead-carp mark per region)
12-column fluid, max-width 1200px; at least four distinct layout families across the landing's eight sections, each used once; dashboard is a fixed 248px left nav + fluid content
generous and confident — section rhythm 120px desktop / 64px mobile; ≥32px above every title; white is the ground the graphic punches against; whitespace, a brightness step, and flat panels do the dividing borders would otherwise do
airy, bright, uncrowded
renders well from ~390px mobile to 2560px+; single column on mobile; full-bleed hero spans 100vw; grids shrink via minmax(0,1fr) and never overflow
hanga-cut
Bold flat-graphic poster illustration in the modernist Japanese tradition — Ikko Tanaka's flat geometric forms on a limited palette, fused with Bauhaus discipline. Never photographic, woodblock, gradient-shaded, or cute. Pure bright white ground with generous open space; most shapes electric young-leaf green and wind-cyan with exactly one hot vermilion focal pop.
Landing hero is one full-bleed flat-graphic koinobori image; secondary imagery (streamer trio, river-field) supports the manifesto and media bands; never a photographic or gradient-shaded image.
# Kunpu ## Philosophy Kunpu — 薫風, the fragrant early-summer wind — is the bold-graphic Kodomo no Hi language: a festival poster of flat colour, hard edges, oversized type set tight, and big open white. Colour is held to three highlighters — electric young-leaf green, wind-cyan, and exactly one hot vermilion lead carp — on pure ink and white. Grown-up and hopeful, never childish or cluttered: the courage of the carp that climbs the wind, at a modern studio's polish. ### Values - The poster instinct — flat colour, hard edges, big confident type, lots of open white - Daylight clarity: a clean bright ground, high-contrast ink, colour that never goes muddy - Disciplined colour: electric green and wind-cyan as highlighters, one hot vermilion carp as the pop - Wind, not float: things are caught taut and enter on a single directional gust, never a loop - Grown-up optimism — a festival's courage at product-launch polish ### Anti-Values - Childish primary-colour clutter, kawaii mascots, balloon palettes, emoji - Soft, timid, washed-out pastel; reflexive cream or beige grounds; gradients on UI - Heavy borders, coloured side-rails, boxes nested inside boxes - Crowded layouts, gimmicky looping motion, scroll cues, oversized italic-serif heroes ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F2F6EE` | | surface | `#FFFFFF` | | text | `#0B1A10` | | muted | `#5C6F60` | | border | `#DDE6D6` | | primary | `#00A94A` | | secondary | `#0097DC` | | accent | `#FF4D2E` | | on_accent | `#FFFFFF` | | success | `#00A94A` | | warning | `#E0930A` | | error | `#D11A2A` | | info | `#0097DC` | ### Typography - **Base Size**: 17px - **Body Font**: Zen Kaku Gothic New - **Heading Font**: Archivo Expanded - **Mono Font**: Space Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.03em - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap ### Radii - **None**: 0 - **Control**: 16px - **Card**: 16px - **Panel**: 24px - **Round**: 9999px ### Shadows - **Sm**: 0 1px 2px rgba(11,26,16,.05) - **Md**: 0 18px 40px -22px rgba(11,40,22,.16) - **Lg**: 0 36px 72px -30px rgba(11,40,22,.20) - **Character**: low, diffuse, tinted toward green-ink; flat blocks carry none ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Treatment**: pure-white cards on a faint young-leaf ground, separated by a brightness step and open space; full-bleed hard-edged flat blocks for graphic statements - **Card Style**: flat white, 16px radius, faint ink-tinted shadow, no border - **Bg Pattern**: none on content; the only motif is the flat koinobori scale tile, used sparingly inside imagery ### Borders - **Default Width**: 0 - **Accent Width**: 1px leaf hairline (table dividers, input underlines); 2px ink registration rule under the index numbers - **Style**: solid - **Character**: no boxes, no coloured side-rails, no stripes ### Motion - **Duration**: 300ms - **Easing**: cubic-bezier(.2,.8,.2,1) - **Philosophy**: content enters on a single directional gust (16–24px slide + fade) once on entry; no loops, no scroll cues; settled state is the default with no JS; respects prefers-reduced-motion ## Rules ### Composition Poster-led. Every screen opens onto open white; the landing leads with one full-bleed hero image, then alternates airy type-blocks, a full-bleed streamer-band, and flat panels. One primary action and one koi-pop per region; left-aligned, large, confident type blocks. ### Hierarchy Three voices (Archivo Expanded display, Zen Kaku Gothic New body/UI, Space Mono data) plus the index-rule registration and the highlighter mark carry hierarchy. Colour is a highlighter, never the hierarchy device. ### Density Airy and confident — big type, generous space, tall table rows (15px+), mono tabular numbers, flat panels with real internal padding. Bright and uncrowded. ### Signature streamer-band (full-bleed flat koinobori band, hard edges, forked tail); poster-head (oversized Archivo Expanded with one green/vermilion highlighter mark); index-rule (Space Mono section indices on a 2px ink rule with ticks); flat-block (hard-edged flat accent colour fields, no gradient, no shadow); koi-pop (the single hot-vermilion lead-carp mark per region) ## Layout ### Grid 12-column fluid, max-width 1200px; at least four distinct layout families across the landing's eight sections, each used once; dashboard is a fixed 248px left nav + fluid content ### Whitespace generous and confident — section rhythm 120px desktop / 64px mobile; ≥32px above every title; white is the ground the graphic punches against; whitespace, a brightness step, and flat panels do the dividing borders would otherwise do ### Density airy, bright, uncrowded ### Responsive renders well from ~390px mobile to 2560px+; single column on mobile; full-bleed hero spans 100vw; grids shrink via minmax(0,1fr) and never overflow ### Breakpoints - **Lg**: 1024 - **Md**: 768 - **Sm**: 480 ## Guidance ### Do - Lead the landing with one full-bleed hero image; overlay the headline on a clean white panel (not a dark scrim) so it stays legible and bright - Keep cards pure white on the faint young-leaf ground; separate with space and a brightness step, never borders or nested cards - Use exactly one vermilion koi-pop per region as the single warm spark; keep secondary actions quiet pale-green - Set headlines in Archivo Expanded with one highlighter mark, body in Zen Kaku Gothic New, and every number in Space Mono - Number sections with the Space Mono index-rule; let content enter on a single directional gust; respect prefers-reduced-motion ### Don't - Crowd the page — no busy patterns, no primary-colour clutter, no grids or graph-paper grounds - Use gradients on UI elements, coloured side-rails, or borders to add colour - Reach for cream or beige; the ground is a clean cool young-leaf white - Let vermilion spread — one warm mark per region, never blocks of text; no kawaii mascots and no emoji - Add scroll cues, looping motion, an oversized italic-serif hero, or the regular/italic serif-swap headline ### Accessibility Body 17px+, high-contrast green-ink on white; the saturated accents are graphic fills/marks, never small text on white; the primary action is solid ink + white label (always AA); the single vermilion is a focal accent, never load-bearing for meaning; controls show a green focus ring. ## Imagery Direction ### Pairs With hanga-cut ### Summary Bold flat-graphic poster illustration in the modernist Japanese tradition — Ikko Tanaka's flat geometric forms on a limited palette, fused with Bauhaus discipline. Never photographic, woodblock, gradient-shaded, or cute. Pure bright white ground with generous open space; most shapes electric young-leaf green and wind-cyan with exactly one hot vermilion focal pop. ### Subjects - koinobori carp streamers caught taut on the wind - flat geometric young maple and oak leaves - the koinobori scale motif of small circles and triangles - river-field sea of carp with one vermilion lead ### Usage Landing hero is one full-bleed flat-graphic koinobori image; secondary imagery (streamer trio, river-field) supports the manifesto and media bands; never a photographic or gradient-shaded image.
---
version: "alpha"
name: "Kunpu"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F2F6EE"
surface: "#FFFFFF"
text: "#0B1A10"
muted: "#5C6F60"
border: "#DDE6D6"
primary: "#00A94A"
secondary: "#0097DC"
accent: "#FF4D2E"
on_accent: "#FFFFFF"
success: "#00A94A"
warning: "#E0930A"
error: "#D11A2A"
info: "#0097DC"
typography:
headline-lg:
fontFamily: "Archivo Expanded"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.03em"
headline-md:
fontFamily: "Archivo Expanded"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.03em"
body-md:
fontFamily: "Zen Kaku Gothic New"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.03em"
label-md:
fontFamily: "Space Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
control: "16px"
card: "16px"
panel: "24px"
round: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
step-9: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
height: "44px"
---
# Kunpu
## Overview
Kunpu — 薫風, the fragrant early-summer wind — is the bold-graphic Kodomo no Hi language: a festival poster of flat colour, hard edges, oversized type set tight, and big open white. Colour is held to three highlighters — electric young-leaf green, wind-cyan, and exactly one hot vermilion lead carp — on pure ink and white. Grown-up and hopeful, never childish or cluttered: the courage of the carp that climbs the wind, at a modern studio's polish.
### Values
- The poster instinct — flat colour, hard edges, big confident type, lots of open white
- Daylight clarity: a clean bright ground, high-contrast ink, colour that never goes muddy
- Disciplined colour: electric green and wind-cyan as highlighters, one hot vermilion carp as the pop
- Wind, not float: things are caught taut and enter on a single directional gust, never a loop
- Grown-up optimism — a festival's courage at product-launch polish
### Anti-Values
- Childish primary-colour clutter, kawaii mascots, balloon palettes, emoji
- Soft, timid, washed-out pastel; reflexive cream or beige grounds; gradients on UI
- Heavy borders, coloured side-rails, boxes nested inside boxes
- Crowded layouts, gimmicky looping motion, scroll cues, oversized italic-serif heroes
## 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 | `#F2F6EE` |
| surface | `#FFFFFF` |
| text | `#0B1A10` |
| muted | `#5C6F60` |
| border | `#DDE6D6` |
| primary | `#00A94A` |
| secondary | `#0097DC` |
| accent | `#FF4D2E` |
| on_accent | `#FFFFFF` |
| success | `#00A94A` |
| warning | `#E0930A` |
| error | `#D11A2A` |
| info | `#0097DC` |
## Typography
- **Headline-Lg**: Archivo Expanded, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Expanded, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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`
- **Step-9**: `128px`
### Grid
12-column fluid, max-width 1200px; at least four distinct layout families across the landing's eight sections, each used once; dashboard is a fixed 248px left nav + fluid content
### Whitespace
generous and confident — section rhythm 120px desktop / 64px mobile; ≥32px above every title; white is the ground the graphic punches against; whitespace, a brightness step, and flat panels do the dividing borders would otherwise do
### Density
airy, bright, uncrowded
### Responsive
renders well from ~390px mobile to 2560px+; single column on mobile; full-bleed hero spans 100vw; grids shrink via minmax(0,1fr) and never overflow
### Breakpoints
- **Lg**: 1024
- **Md**: 768
- **Sm**: 480
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 2px rgba(11,26,16,.05)
- **Md**: 0 18px 40px -22px rgba(11,40,22,.16)
- **Lg**: 0 36px 72px -30px rgba(11,40,22,.20)
- **Character**: low, diffuse, tinted toward green-ink; flat blocks carry none
## Shapes
### Rounded
- **None**: `0px`
- **Control**: `16px`
- **Card**: `16px`
- **Panel**: `24px`
- **Round**: `9999px`
### Surfaces
- **Treatment**: pure-white cards on a faint young-leaf ground, separated by a brightness step and open space; full-bleed hard-edged flat blocks for graphic statements
- **Card Style**: flat white, 16px radius, faint ink-tinted shadow, no border
- **Bg Pattern**: none on content; the only motif is the flat koinobori scale tile, used sparingly inside imagery
### Borders
- **Default Width**: 0
- **Accent Width**: 1px leaf hairline (table dividers, input underlines); 2px ink registration rule under the index numbers
- **Style**: solid
- **Character**: no boxes, no coloured side-rails, no stripes
## Components
### Composition
Poster-led. Every screen opens onto open white; the landing leads with one full-bleed hero image, then alternates airy type-blocks, a full-bleed streamer-band, and flat panels. One primary action and one koi-pop per region; left-aligned, large, confident type blocks.
### Hierarchy
Three voices (Archivo Expanded display, Zen Kaku Gothic New body/UI, Space Mono data) plus the index-rule registration and the highlighter mark carry hierarchy. Colour is a highlighter, never the hierarchy device.
### Density
Airy and confident — big type, generous space, tall table rows (15px+), mono tabular numbers, flat panels with real internal padding. Bright and uncrowded.
### Signature
streamer-band (full-bleed flat koinobori band, hard edges, forked tail); poster-head (oversized Archivo Expanded with one green/vermilion highlighter mark); index-rule (Space Mono section indices on a 2px ink rule with ticks); flat-block (hard-edged flat accent colour fields, no gradient, no shadow); koi-pop (the single hot-vermilion lead-carp mark per region)
## 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-019efb7c-3434-77e1-bc48-4168b2fa8aa6/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 Lead the landing with one full-bleed hero image; overlay the headline on a clean white panel (not a dark scrim) so it stays legible and bright
- Do Keep cards pure white on the faint young-leaf ground; separate with space and a brightness step, never borders or nested cards
- Do Use exactly one vermilion koi-pop per region as the single warm spark; keep secondary actions quiet pale-green
- Do Set headlines in Archivo Expanded with one highlighter mark, body in Zen Kaku Gothic New, and every number in Space Mono
- Do Number sections with the Space Mono index-rule; let content enter on a single directional gust; respect prefers-reduced-motion
- Don't Crowd the page — no busy patterns, no primary-colour clutter, no grids or graph-paper grounds
- Don't Use gradients on UI elements, coloured side-rails, or borders to add colour
- Don't Reach for cream or beige; the ground is a clean cool young-leaf white
- Don't Let vermilion spread — one warm mark per region, never blocks of text; no kawaii mascots and no emoji
- Don't Add scroll cues, looping motion, an oversized italic-serif hero, or the regular/italic serif-swap headline
### Accessibility
Body 17px+, high-contrast green-ink on white; the saturated accents are graphic fills/marks, never small text on white; the primary action is solid ink + white label (always AA); the single vermilion is a focal accent, never load-bearing for meaning; controls show a green focus ring.
## Imagery Direction
### Pairs With
hanga-cut
### Summary
Bold flat-graphic poster illustration in the modernist Japanese tradition — Ikko Tanaka's flat geometric forms on a limited palette, fused with Bauhaus discipline. Never photographic, woodblock, gradient-shaded, or cute. Pure bright white ground with generous open space; most shapes electric young-leaf green and wind-cyan with exactly one hot vermilion focal pop.
### Subjects
- koinobori carp streamers caught taut on the wind
- flat geometric young maple and oak leaves
- the koinobori scale motif of small circles and triangles
- river-field sea of carp with one vermilion lead
### Usage
Landing hero is one full-bleed flat-graphic koinobori image; secondary imagery (streamer trio, river-field) supports the manifesto and media bands; never a photographic or gradient-shaded image.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "kunpu",
"type": "registry:theme",
"title": "Kunpu shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F2F6EE",
"foreground": "#0B1A10",
"card": "#FFFFFF",
"card-foreground": "#0B1A10",
"popover": "#FFFFFF",
"popover-foreground": "#0B1A10",
"primary": "#00A94A",
"primary-foreground": "#ffffff",
"secondary": "#0097DC",
"secondary-foreground": "#ffffff",
"muted": "#5C6F60",
"muted-foreground": "#0B1A10",
"accent": "#FF4D2E",
"accent-foreground": "#ffffff",
"destructive": "#D11A2A",
"border": "#DDE6D6",
"input": "#DDE6D6",
"ring": "#FF4D2E",
"chart-1": "#00A94A",
"chart-2": "#0097DC",
"chart-3": "#FF4D2E",
"chart-4": "#00A94A",
"chart-5": "#E0930A",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#0B1A10",
"sidebar-primary": "#00A94A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#0097DC",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#DDE6D6",
"sidebar-ring": "#FF4D2E",
"radius": "0.625rem"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#00A94A",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#FF4D2E",
"accent-foreground": "#ffffff",
"destructive": "#D11A2A",
"border": "#303642",
"input": "#303642",
"ring": "#FF4D2E",
"chart-1": "#00A94A",
"chart-2": "#0097DC",
"chart-3": "#FF4D2E",
"chart-4": "#00A94A",
"chart-5": "#E0930A",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#00A94A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#FF4D2E",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#FF4D2E",
"radius": "0.625rem"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efb7c-3434-77e1-bc48-4168b2fa8aa6",
"slug": "kunpu",
"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",
"error",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"mono_font"
],
"radii": [
"card",
"control",
"none",
"panel",
"round"
],
"shadows": [
"character",
"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 opus-4.8 (bake-off import) · images by gpt-image-2
Keep Kunpuand 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: #F2F6EE;
--foreground: #0B1A10;
--card: #FFFFFF;
--card-foreground: #0B1A10;
--popover: #FFFFFF;
--popover-foreground: #0B1A10;
--primary: #00A94A;
--primary-foreground: #ffffff;
--secondary: #0097DC;
--secondary-foreground: #ffffff;
--muted: #5C6F60;
--muted-foreground: #0B1A10;
--accent: #FF4D2E;
--accent-foreground: #ffffff;
--destructive: #D11A2A;
--border: #DDE6D6;
--input: #DDE6D6;
--ring: #FF4D2E;
--chart-1: #00A94A;
--chart-2: #0097DC;
--chart-3: #FF4D2E;
--chart-4: #00A94A;
--chart-5: #E0930A;
--sidebar: #FFFFFF;
--sidebar-foreground: #0B1A10;
--sidebar-primary: #00A94A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #0097DC;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #DDE6D6;
--sidebar-ring: #FF4D2E;
--radius: 0.625rem;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #00A94A;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #FF4D2E;
--accent-foreground: #ffffff;
--destructive: #D11A2A;
--border: #303642;
--input: #303642;
--ring: #FF4D2E;
--chart-1: #00A94A;
--chart-2: #0097DC;
--chart-3: #FF4D2E;
--chart-4: #00A94A;
--chart-5: #E0930A;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #00A94A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #FF4D2E;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #FF4D2E;
--radius: 0.625rem;
}
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 KunpuShadcnKit() {
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">Kunpu</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": "kunpu",
"type": "registry:theme",
"title": "Kunpu",
"description": "Bold-graphic Kodomo no Hi koinobori poster theme. Three highlighter accents on ink and white — electric young-leaf green, wind-cyan, and one hot vermilion lead carp. No borders; the brightness step and flat colour blocks do the dividing.",
"cssVars": {
"theme": {
"font-sans": "Zen Kaku Gothic New, ui-sans-serif, sans-serif",
"font-display": "Archivo Expanded, ui-sans-serif, sans-serif",
"font-mono": "Space Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#F2F6EE",
"foreground": "#0B1A10",
"card": "#FFFFFF",
"card-foreground": "#0B1A10",
"popover": "#FFFFFF",
"popover-foreground": "#0B1A10",
"primary": "#0B1A10",
"primary-foreground": "#FFFFFF",
"secondary": "#E6F5EC",
"secondary-foreground": "#00833A",
"accent": "#FF4D2E",
"accent-foreground": "#FFFFFF",
"muted": "#E6F5EC",
"muted-foreground": "#5C6F60",
"destructive": "#D11A2A",
"destructive-foreground": "#FFFFFF",
"success": "#00A94A",
"warning": "#E0930A",
"info": "#0097DC",
"chart-1": "#00A94A",
"chart-2": "#0097DC",
"chart-3": "#FF4D2E",
"chart-4": "#00833A",
"chart-5": "#076A99",
"border": "transparent",
"input": "#DDE6D6",
"ring": "#00A94A",
"radius": "16px"
}
}
}
# Kunpu shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efb7c-3434-77e1-bc48-4168b2fa8aa6`
Slug: `kunpu`
## Intent
Kunpu — 薫風, the fragrant early-summer wind — is the bold-graphic Kodomo no Hi language: a festival poster of flat colour, hard edges, oversized type set tight, and big open white. Colour is held to three highlighters — electric young-leaf green, wind-cyan, and exactly one hot vermilion lead carp — on pure ink and white. Grown-up and hopeful, never childish or cluttered: the courage of the carp that climbs the wind, at a modern studio's polish.
## 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": "#F2F6EE",
"surface": "#FFFFFF",
"text": "#0B1A10",
"muted": "#5C6F60",
"border": "#DDE6D6",
"primary": "#00A94A",
"secondary": "#0097DC",
"accent": "#FF4D2E",
"on_accent": "#FFFFFF",
"success": "#00A94A",
"warning": "#E0930A",
"error": "#D11A2A",
"info": "#0097DC"
}
Typography:
{
"base_size": "17px",
"body_font": "Zen Kaku Gothic New",
"heading_font": "Archivo Expanded",
"mono_font": "Space Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.03em",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"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/kunpu/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: Lead the landing with one full-bleed hero image; overlay the headline on a clean white panel (not a dark scrim) so it stays legible and bright; Keep cards pure white on the faint young-leaf ground; separate with space and a brightness step, never borders or nested cards; Use exactly one vermilion koi-pop per region as the single warm spark; keep secondary actions quiet pale-green; Set headlines in Archivo Expanded with one highlighter mark, body in Zen Kaku Gothic New, and every number in Space Mono; Number sections with the Space Mono index-rule; let content enter on a single directional gust; respect prefers-reduced-motion
- Do not: Crowd the page — no busy patterns, no primary-colour clutter, no grids or graph-paper grounds; Use gradients on UI elements, coloured side-rails, or borders to add colour; Reach for cream or beige; the ground is a clean cool young-leaf white; Let vermilion spread — one warm mark per region, never blocks of text; no kawaii mascots and no emoji; Add scroll cues, looping motion, an oversized italic-serif hero, or the regular/italic serif-swap headline
## 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 KunpuShadcnKit() {
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">Kunpu</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 fluid, max-width 1200px; at least four distinct layout families across the landing's eight sections, each used once; dashboard is a fixed 248px left nav + fluid content",
"whitespace": "generous and confident — section rhythm 120px desktop / 64px mobile; ≥32px above every title; white is the ground the graphic punches against; whitespace, a brightness step, and flat panels do the dividing borders would otherwise do",
"density": "airy, bright, uncrowded",
"responsive": "renders well from ~390px mobile to 2560px+; single column on mobile; full-bleed hero spans 100vw; grids shrink via minmax(0,1fr) and never overflow",
"breakpoints": {
"lg": "1024",
"md": "768",
"sm": "480"
}
}
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"author": "katagami-agent",
"generatedBy": "katagami-agent",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": { "name": "Kunpu", "slug": "kunpu" },
"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": [
"Three highlighter accents only: electric young-leaf green (primary), wind-cyan (secondary), one hot vermilion koi-pop (accent). Vermilion appears at most once per region.",
"The primary button is solid ink (#0B1A10) with a white label and the single vermilion koi-pop dot; secondary is a quiet pale-green fill; never two equally loud buttons.",
"No borders and no grey dividers: separate surfaces with the brightness step (pure-white card on faint young-leaf ground), open space, and hard-edged flat colour blocks. Radius 16px for the interface, 0 for the graphic layer, 9999 for round marks.",
"Every number, date, SKU and the section index numerals are Space Mono; headings are Archivo Expanded with at most one highlighter mark."
],
"visualProfile": {
"family": "flat-graphic-poster",
"material": "flat",
"contour": "default",
"border": "none",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "gust",
"density": "airy",
"accents": ["primary","secondary","accent"]
},
"shots": [
{
"id": "application-shell",
"title": "Atelier overview",
"viewport": "desktop",
"primitives": ["button","card","input","select","tabs","badge","separator","table"],
"composition": "A koinobori atelier operations workspace: left nav, a four-up KPI row with one green flat-block tile among white cards, a filter row, and the dense commissions table with status pills.",
"mustShow": [
"primary (solid ink + vermilion koi-pop) vs secondary (pale-green) actions",
"white card surface + Space Mono caption on the faint young-leaf ground",
"one green flat-block KPI among white KPI cards",
"commissions table with tall rows, mono numerals, and status pills — no borders"
],
"avoid": ["component inventory walls","placeholder-only content","any borders or grey dividers","more than one vermilion mark per region","generic SaaS chrome"],
"scene": {
"headline": "Overview — Kunpu Studio",
"description": "A programme team's workspace where nav, KPIs, filters and dense rows stay airy on white, the colour held to green and cyan with one vermilion pop.",
"primaryAction": "New commission",
"secondaryAction": "Export schedule",
"stats": [
{ "label": "open commissions", "value": "312", "tone": "ink" },
{ "label": "in production", "value": "1,480", "tone": "success" },
{ "label": "almost due", "value": "3", "tone": "destructive" }
],
"rows": [
{ "label": "Haruki Kondo · 3-carp set", "value": "Wakaba green · ¥38,400", "status": "open" },
{ "label": "Tatebayashi river-hang", "value": "Mixed school · ¥1,240,000", "status": "filling" },
{ "label": "Yuna Nakai · 5-carp set", "value": "Higoi vermilion · ¥61,000", "status": "delayed" }
]
}
},
{
"id": "detail-editor",
"title": "Commission a streamer",
"viewport": "tablet",
"primitives": ["dialog","input","textarea","select","checkbox","switch","slider","button","badge","tooltip"],
"composition": "A commission dialog over the workspace: a child's name field, a colourway select, a wish textarea, gift-wrap checkbox, a wind-tension slider, and a save action — every control fully styled, no browser defaults.",
"mustShow": [
"fully styled inputs with a leaf-hairline underline and a green focus ring (no boxed grey borders)",
"switch and slider thumbs in green on round tracks",
"the single vermilion koi-pop only inside the primary save button",
"pale-tint badges at 16px radius"
],
"avoid": ["browser-default form controls","grey borders","two equally loud buttons","vermilion used twice"],
"scene": {
"headline": "Commission a streamer",
"description": "Configure a koinobori commission — name, colourway, size, and a wish — in a clean white dialog.",
"primaryAction": "Place commission",
"secondaryAction": "Cancel",
"fields": [
{ "label": "Child's name", "value": "Sora" },
{ "label": "Colourway", "value": "Wakaba green" },
{ "label": "A wish for them", "value": "May you be brave enough for the wind." }
],
"stats": [
{ "label": "size", "value": "River 5m", "tone": "ink" },
{ "label": "from", "value": "¥9,800", "tone": "success" }
]
}
},
{
"id": "data-operations",
"title": "Production queue",
"viewport": "mobile",
"primitives": ["sheet","table","badge","button","dropdown-menu","tabs","separator"],
"composition": "A mobile production queue: tabs across status, a stacked-row list of commissions with status pills, a row action dropdown, and a bottom sheet for the selected order.",
"mustShow": [
"table reflowed to stacked rows on mobile, mono numerals preserved",
"status pills (green / cyan / red) carrying state, never decoration",
"dropdown-menu and sheet styled as flat white surfaces with the green-ink shadow",
"one primary action, the rest quiet"
],
"avoid": ["horizontal overflow","grey zebra grids","borders","vermilion spread across rows"],
"scene": {
"headline": "Production queue",
"description": "The shop floor on a phone: what is printing, what is rigging, what ships next — airy rows, mono dates, status pills.",
"primaryAction": "Advance stage",
"secondaryAction": "Filter",
"rows": [
{ "label": "Kasumi family · 5-carp set", "value": "DUE 24 JUN", "status": "open" },
{ "label": "Tatebayashi river-hang", "value": "DUE 02 JUL", "status": "filling" },
{ "label": "Sora keepsake · year 7", "value": "DUE 28 JUN", "status": "open" }
]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Action hierarchy: solid-ink primary bearing the single vermilion koi-pop = the one dominant action; pale-green secondary; ghost is an ink link with a green underline; disabled reads sold-out; green focus ring." },
{ "primitive": "card", "intent": "Pure-white surface on the faint young-leaf ground, 16px radius, faint green-ink shadow, NO border; never nested." },
{ "primitive": "input", "intent": "White fill, a 1px leaf-hairline underline (not a full box), 16px radius, a 2px green focus ring; placeholder in sage." },
{ "primitive": "textarea", "intent": "Same as input, resizable vertically, generous internal padding." },
{ "primitive": "select", "intent": "White fill with an SVG chevron (no native arrow), hairline underline, green focus ring." },
{ "primitive": "dialog", "intent": "Flat white panel, 24px radius, green-ink shadow, no border; one primary action carrying the koi-pop." },
{ "primitive": "sheet", "intent": "Flat white slide-over with the green-ink shadow; hard-edged top handle; no border." },
{ "primitive": "tabs", "intent": "Quiet text tabs; the active tab carries a pale-green tint fill, never an underline-only treatment fighting the index-rule." },
{ "primitive": "badge", "intent": "Pale-tint fills (green / cyan / pop / amber) at 16px radius; semantic badges stay small, never visually primary." },
{ "primitive": "separator", "intent": "A single leaf-hairline divider used only inside tables/lists; prefer space and a brightness step over rules." },
{ "primitive": "checkbox", "intent": "16px-radius box, inset hairline when off, solid green with a white tick when on." },
{ "primitive": "switch", "intent": "Round track (9999), grey when off, green when on, white thumb with a faint shadow." },
{ "primitive": "slider", "intent": "Round track, green thumb with a pale-green halo; green focus ring on keyboard focus." },
{ "primitive": "tooltip", "intent": "Solid-ink bubble, white text, 16px radius, green-ink shadow, small arrow." },
{ "primitive": "dropdown-menu", "intent": "Flat white menu, 16px radius, green-ink shadow, no border; active item in pale-green." },
{ "primitive": "table", "intent": "Airy tall rows (15px+), Space Mono numerals right-aligned, a single hairline between rows, status as pills; no boxes, no zebra grids; reflows to stacked rows on mobile." }
],
"qualityRules": {
"do": [
"Hold colour to three highlighters — green, cyan, and exactly one vermilion koi-pop per region.",
"Set every number, date, SKU and index numeral in Space Mono, like a printed programme.",
"Separate surfaces with the brightness step, open space, and flat colour blocks — never borders.",
"Keep one button clearly primary (solid ink + koi-pop); keep the rest quiet."
],
"dont": [
"Tint backgrounds, use gradients on UI, or reach for cream/beige.",
"Add borders, coloured side-rails, or grey dividers.",
"Spend vermilion decoratively or more than once per region.",
"Nest cards or trap navigation in a floating pill bar."
]
}
}