A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
A generated style is an aggregate of many influences — credit is given to the artists and traditions it draws on, not a claim of authorship.
images by bytedance/seedream/v5/lite/text-to-image via fal.ai
A faithful modernization of Yokohama Android Cafe Terminal: same room, same ink, same humane machine voice, rebuilt to the current craft standard with a maker's-mark name, a settled radius stance, ink variants for coloured text and a scroll-controlled landing film.
Build on the counter horizon: one horizontal ink rule per surface, the room above it and the machine below it. Use a cafe-interior base grid — a wide window or counter panel, a narrow title-card spine, and panes arranged like furniture below eye level. Prefer ruled rectangles and shallow shelves to floating modals. Every screen carries at least one inhabited cue: a cup mark, a menu rail, a receipt, a maintenance note, a window frame. Colour stays on sage and amber status detail; black ink carries hierarchy, espresso carries structure, and paper negative space carries the tone.
Placement and line weight before colour. Headings use Zen Kurenaido in airy title-card settings; prose uses Noto Serif JP at 17px regular; operational data uses Sono in small rows. An important state gets a word, a square tick and a weight shift, never colour alone. Any accent that becomes text resolves to its dark ink variant. Episode labels and bracket glyphs mark sections and stay secondary to readable content.
Room-first: compact diagnostics inside generous whitespace. Rows may be tight; panels need table distance around them — 24px between related cards, 48px between scene zones, always padding above a title.
Desktop uses a 12-column grid capped at 1240–1280px with 24px gutters: a 7-column room scene, a 3-column pane stack and a 2-column title spine. Only the landing film's plates go full-bleed.
Wide 1920+ caps and centres the contained content. Desktop 1440 runs the full counter composition. Tablet 768–1024 is its own layout — the title spine becomes a top rail, panes fall to two columns, and the ledger keeps every column inside its own scrolling frame. Mobile 390 is a single column with panes stacked after the room panel and shortened episode labels; nothing scrolls horizontally at any width.
Table distance: 24px between related cards, 48px between scene zones, wide paper margins around title cards and diagnostics, and always padding above a title so it is never stuck to the top of its container.
ajiro
pen and ink
Interiors and the objects that live in them, drawn as if from inside the room: counters, windows with rain, shallow shelves of quiet machine panels, folded paper tickets, cups with steam. People appear as hands or a figure at a window, never as character art.
Every plate reserves a quiet zone for type — an open wall, a swept floor, an empty tabletop — and the type is placed there rather than on a slab over the drawing. Horizon lines run flat across the frame so a plate can be cut by the counter rule.
Warm paper white, tea-stained beige, espresso brown and taupe carry the whole image; sage green and lamp amber pool only in the deepest folds or in a single light source. No blue, no pure black.
Photography, 3D renders, gradients, glow, neon, franchise or character quotation, and any subject that fills the frame edge to edge without a quiet region.
# Kissaten ## Philosophy Kissaten is a quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule, the counter horizon, divides every surface: warm paper and serif above it, tea-stained panes and small monospace rows below it, and nothing below the rule ever brighter than the room above. Its emotional register is slice-of-life science fiction — diagnostics that apologise, status marks that whisper, and command surfaces that leave room for a cup, a window and a pause. ### Values - Quiet existential warmth: every technical surface stays calm enough to read during rain. - Human-first diagnostics: machine states are considerate messages that end with a next step. - Room specificity: ruled panels, window mullions, counter rails and paper tickets carry the story. - Terminal restraint: command surfaces flatten into low-contrast tea panes below the horizon. - Editorial rhythm: episode codes, seat numbers and hours punctuate sections as quiet typographic beats. - Material softness: warm paper, espresso ink and two whispered colours in place of neon spectacle. ### Anti-Values - No neon glow fields, holographic gradients or saturated arcade accents. - No generic dashboard chrome, glassmorphism or card piles without a lived-in scene. - No hostile error language; an error that leaves a person stuck is a failure of the language. - No rounded corners, no coloured edge on one side of a card, no blurred shadows. - No decorative quotation of anime that overwhelms the functional structure. ### Visual Character - Warm paper ground carrying an ultra-faint 24px horizontal rule field at 3.5% ink, quiet enough that copy never fights it. - Uniform 1px espresso-taupe hairline frames with a mono rail and a rule beneath it; radius 0 on every element including chips and avatars. - Tea-stained #E8DDCB panes with 9px bracket corner ticks and Sono rows at 14.5px, always below their container's horizon rule. - Nine-pixel square status ticks in sage or lamp amber, always paired with a word and a weight shift to 500. - Two-extreme type: Zen Kurenaido display against Sono micro labels at 11.5px, with Noto Serif JP holding a fine 17px body between them. ### Lineage > A faithful modernization of Yokohama Android Cafe Terminal: same room, same ink, same humane machine voice, rebuilt to the current craft standard with a maker's-mark name, a settled radius stance, ink variants for coloured text and a scroll-controlled landing film. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#F4EFE4` | | surface | `#E8DDCB` | | surface_solid | `#FBF8F1` | | text | `#1E1B18` | | muted | `#6D5444` | | border | `#BBAE98` | | accent | `#8A9A82` | | accent_2 | `#B08A55` | | accent_soft | `#DDE2D6` | | on_accent | `#F7F4EC` | | success | `#6F8069` | | warning | `#B08A55` | | error | `#8B4A3B` | | info | `#7A8880` | ### Typography - **Base Size**: 17px - **Body Font**: Noto Serif JP - **Heading Font**: Zen Kurenaido - **Mono Font**: Sono - **Heading Weight**: 400 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.58 - **Scale Ratio**: 1.2 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Sono:wght@400;500;600&family=Zen+Kurenaido&display=swap ### Radii - **None**: 0px - **Md**: 0px - **Lg**: 0px - **Full**: 0px ### Shadows - **Sm**: 0 1px 0 rgba(30,27,24,0.10) - **Md**: 0 1px 0 rgba(30,27,24,0.10) - **Lg**: 0 2px 0 rgba(30,27,24,0.08) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: Matte paper whites with an ultra-faint 24px horizontal rule field held at 3.5% ink; terminal areas use tea-stained panels instead of luminous dark glass. - **Card Style**: Square paper card with a uniform 1px espresso-taupe hairline, a top rail carrying a mono caption and an episode code, and a rule beneath the rail. No shadow, no nesting. - **Bg Pattern**: Repeating horizontal paper rules at 24px; vertical window mullions appear only on plates and scene transitions, never under copy. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: solid - **Character**: Faded manga ink — espresso structural lines, a double rule on title cards, 9px bracket corner ticks on panes. Never a single coloured edge on a card. ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(0.2, 0, 0.1, 1) - **Philosophy**: In product surfaces only status marks breathe and a focused row shifts its rule. The landing film is the one earned exception: six scrubbed scenes on a sticky theatre, transform and opacity only, one climax. ## Rules ### Composition Build on the counter horizon: one horizontal ink rule per surface, the room above it and the machine below it. Use a cafe-interior base grid — a wide window or counter panel, a narrow title-card spine, and panes arranged like furniture below eye level. Prefer ruled rectangles and shallow shelves to floating modals. Every screen carries at least one inhabited cue: a cup mark, a menu rail, a receipt, a maintenance note, a window frame. Colour stays on sage and amber status detail; black ink carries hierarchy, espresso carries structure, and paper negative space carries the tone. ### Hierarchy Placement and line weight before colour. Headings use Zen Kurenaido in airy title-card settings; prose uses Noto Serif JP at 17px regular; operational data uses Sono in small rows. An important state gets a word, a square tick and a weight shift, never colour alone. Any accent that becomes text resolves to its dark ink variant. Episode labels and bracket glyphs mark sections and stay secondary to readable content. ### Density Room-first: compact diagnostics inside generous whitespace. Rows may be tight; panels need table distance around them — 24px between related cards, 48px between scene zones, always padding above a title. ### Signature Patterns - Counter horizon: one horizontal ink rule per surface, at every scale — across a section head, inside a card between rail and body, under a table's column heads, and across the whole viewport in the landing film. - Mullion panel grid: vertical 1px espresso columns borrowed from the shop window, used as the page-wide ornament system and as the film's scene-handoff mechanism. - Low-furniture panes: command blocks in tea-coloured surfaces with bracket corner ticks and sage monospace rows, always below their container's horizon. - Humane speech strips: a 9px square mark, a mono timestamp, a plain-language sentence and a recovery line; the mark breathes until the answer arrives. - Episode furniture: tiny uppercase mono labels — EP.07, SEAT 3, 14:05, BAY.2 — marking sections the way an episode card marks a scene. ## Layout ### Grid Desktop uses a 12-column grid capped at 1240–1280px with 24px gutters: a 7-column room scene, a 3-column pane stack and a 2-column title spine. Only the landing film's plates go full-bleed. ### Breakpoints Wide 1920+ caps and centres the contained content. Desktop 1440 runs the full counter composition. Tablet 768–1024 is its own layout — the title spine becomes a top rail, panes fall to two columns, and the ledger keeps every column inside its own scrolling frame. Mobile 390 is a single column with panes stacked after the room panel and shortened episode labels; nothing scrolls horizontally at any width. ### Whitespace Table distance: 24px between related cards, 48px between scene zones, wide paper margins around title cards and diagnostics, and always padding above a title so it is never stuck to the top of its container. ## Guidance ### Do - Begin with warm paper and espresso linework before any sage or amber appears. - Put the terminal below the counter horizon, matte and low contrast, placed like a shelf. - Use tiny mono labels as metadata — episode codes, seat numbers, hours, bay names. - Write diagnostics in humane language that ends with a recovery hint. - Keep global tracking at -0.02em and give copy a generous 1.58 line height. - Let ruled panels, window mullions and counter rails build composition. - Pair every coloured state with a word and a 9px square tick. - Resolve any accent that becomes text to its dark ink variant before shipping it. ### Don't - Do not introduce cyan, magenta, laser green or neon glow. - Do not use full-screen dark terminal styling; the pane is softened into the paper palette. - Do not crowd every panel with marks — empty paper is part of the identity. - Do not rely on anime screenshots, character art or franchise references. - Do not use glass blur, saturated gradients or glossy surfaces. - Do not present errors as hostile alerts. - Do not round any corner, and do not put a coloured edge on one side of a card. ### Accessibility AA contrast for body and controls, measured on the composited ground rather than assumed. Sage and lamp amber are supplementary: they never carry a word at their bright value, and every status pairs colour with a label and a square mark. Focus is a visible 2px espresso outline offset 3px, or a heavier inset rule under a field. Reduced motion stops the breathing status marks, removes the glass shader and de-pins the landing film into a settled readable document. Tap targets stay at 44px on the landing's chrome, and the film never takes the page off native scroll. ### Usage Context Calm developer tools, companion agents, robotics and maintenance consoles, creative-coding notebooks, and contemplative product surfaces where a machine should feel patient and domestic. ## Imagery Direction ### Pairs With ajiro ### Medium pen and ink ### Subject Matter Interiors and the objects that live in them, drawn as if from inside the room: counters, windows with rain, shallow shelves of quiet machine panels, folded paper tickets, cups with steam. People appear as hands or a figure at a window, never as character art. ### Composition Every plate reserves a quiet zone for type — an open wall, a swept floor, an empty tabletop — and the type is placed there rather than on a slab over the drawing. Horizon lines run flat across the frame so a plate can be cut by the counter rule. ### Palette Warm paper white, tea-stained beige, espresso brown and taupe carry the whole image; sage green and lamp amber pool only in the deepest folds or in a single light source. No blue, no pure black. ### Avoid Photography, 3D renders, gradients, glow, neon, franchise or character quotation, and any subject that fills the frame edge to edge without a quiet region.
---
version: "alpha"
name: "Kissaten"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#F4EFE4"
surface: "#E8DDCB"
surface_solid: "#FBF8F1"
text: "#1E1B18"
muted: "#6D5444"
border: "#BBAE98"
accent: "#8A9A82"
accent_2: "#B08A55"
accent_soft: "#DDE2D6"
on_accent: "#F7F4EC"
success: "#6F8069"
warning: "#B08A55"
error: "#8B4A3B"
info: "#7A8880"
typography:
headline-lg:
fontFamily: "Zen Kurenaido"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Zen Kurenaido"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Noto Serif JP"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Sono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "0px"
lg: "0px"
full: "0px"
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_solid:
backgroundColor: "{colors.surface_solid}"
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_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_soft:
backgroundColor: "{colors.accent_soft}"
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.accent}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Kissaten
## Overview
Kissaten is a quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule, the counter horizon, divides every surface: warm paper and serif above it, tea-stained panes and small monospace rows below it, and nothing below the rule ever brighter than the room above. Its emotional register is slice-of-life science fiction — diagnostics that apologise, status marks that whisper, and command surfaces that leave room for a cup, a window and a pause.
### Values
- Quiet existential warmth: every technical surface stays calm enough to read during rain.
- Human-first diagnostics: machine states are considerate messages that end with a next step.
- Room specificity: ruled panels, window mullions, counter rails and paper tickets carry the story.
- Terminal restraint: command surfaces flatten into low-contrast tea panes below the horizon.
- Editorial rhythm: episode codes, seat numbers and hours punctuate sections as quiet typographic beats.
- Material softness: warm paper, espresso ink and two whispered colours in place of neon spectacle.
### Anti-Values
- No neon glow fields, holographic gradients or saturated arcade accents.
- No generic dashboard chrome, glassmorphism or card piles without a lived-in scene.
- No hostile error language; an error that leaves a person stuck is a failure of the language.
- No rounded corners, no coloured edge on one side of a card, no blurred shadows.
- No decorative quotation of anime that overwhelms the functional structure.
### Visual Character
- Warm paper ground carrying an ultra-faint 24px horizontal rule field at 3.5% ink, quiet enough that copy never fights it.
- Uniform 1px espresso-taupe hairline frames with a mono rail and a rule beneath it; radius 0 on every element including chips and avatars.
- Tea-stained #E8DDCB panes with 9px bracket corner ticks and Sono rows at 14.5px, always below their container's horizon rule.
- Nine-pixel square status ticks in sage or lamp amber, always paired with a word and a weight shift to 500.
- Two-extreme type: Zen Kurenaido display against Sono micro labels at 11.5px, with Noto Serif JP holding a fine 17px body between them.
### Lineage
> A faithful modernization of Yokohama Android Cafe Terminal: same room, same ink, same humane machine voice, rebuilt to the current craft standard with a maker's-mark name, a settled radius stance, ink variants for coloured text and a scroll-controlled landing film.
## 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 | `#F4EFE4` |
| surface | `#E8DDCB` |
| surface_solid | `#FBF8F1` |
| text | `#1E1B18` |
| muted | `#6D5444` |
| border | `#BBAE98` |
| accent | `#8A9A82` |
| accent_2 | `#B08A55` |
| accent_soft | `#DDE2D6` |
| on_accent | `#F7F4EC` |
| success | `#6F8069` |
| warning | `#B08A55` |
| error | `#8B4A3B` |
| info | `#7A8880` |
## Typography
- **Headline-Lg**: Zen Kurenaido, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Zen Kurenaido, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Serif JP, 17px, weight 400, line-height 1.5.
- **Label-Md**: Sono, 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
Desktop uses a 12-column grid capped at 1240–1280px with 24px gutters: a 7-column room scene, a 3-column pane stack and a 2-column title spine. Only the landing film's plates go full-bleed.
### Breakpoints
Wide 1920+ caps and centres the contained content. Desktop 1440 runs the full counter composition. Tablet 768–1024 is its own layout — the title spine becomes a top rail, panes fall to two columns, and the ledger keeps every column inside its own scrolling frame. Mobile 390 is a single column with panes stacked after the room panel and shortened episode labels; nothing scrolls horizontally at any width.
### Whitespace
Table distance: 24px between related cards, 48px between scene zones, wide paper margins around title cards and diagnostics, and always padding above a title so it is never stuck to the top of its container.
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(30,27,24,0.10)
- **Md**: 0 1px 0 rgba(30,27,24,0.10)
- **Lg**: 0 2px 0 rgba(30,27,24,0.08)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`
### Surfaces
- **Treatment**: Matte paper whites with an ultra-faint 24px horizontal rule field held at 3.5% ink; terminal areas use tea-stained panels instead of luminous dark glass.
- **Card Style**: Square paper card with a uniform 1px espresso-taupe hairline, a top rail carrying a mono caption and an episode code, and a rule beneath the rail. No shadow, no nesting.
- **Bg Pattern**: Repeating horizontal paper rules at 24px; vertical window mullions appear only on plates and scene transitions, never under copy.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Faded manga ink — espresso structural lines, a double rule on title cards, 9px bracket corner ticks on panes. Never a single coloured edge on a card.
## Components
### Composition
Build on the counter horizon: one horizontal ink rule per surface, the room above it and the machine below it. Use a cafe-interior base grid — a wide window or counter panel, a narrow title-card spine, and panes arranged like furniture below eye level. Prefer ruled rectangles and shallow shelves to floating modals. Every screen carries at least one inhabited cue: a cup mark, a menu rail, a receipt, a maintenance note, a window frame. Colour stays on sage and amber status detail; black ink carries hierarchy, espresso carries structure, and paper negative space carries the tone.
### Hierarchy
Placement and line weight before colour. Headings use Zen Kurenaido in airy title-card settings; prose uses Noto Serif JP at 17px regular; operational data uses Sono in small rows. An important state gets a word, a square tick and a weight shift, never colour alone. Any accent that becomes text resolves to its dark ink variant. Episode labels and bracket glyphs mark sections and stay secondary to readable content.
### Density
Room-first: compact diagnostics inside generous whitespace. Rows may be tight; panels need table distance around them — 24px between related cards, 48px between scene zones, always padding above a title.
### Signature Patterns
- Counter horizon: one horizontal ink rule per surface, at every scale — across a section head, inside a card between rail and body, under a table's column heads, and across the whole viewport in the landing film.
- Mullion panel grid: vertical 1px espresso columns borrowed from the shop window, used as the page-wide ornament system and as the film's scene-handoff mechanism.
- Low-furniture panes: command blocks in tea-coloured surfaces with bracket corner ticks and sage monospace rows, always below their container's horizon.
- Humane speech strips: a 9px square mark, a mono timestamp, a plain-language sentence and a recovery line; the mark breathes until the answer arrives.
- Episode furniture: tiny uppercase mono labels — EP.07, SEAT 3, 14:05, BAY.2 — marking sections the way an episode card marks a scene.
## 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-01a03f5b-7673-7c82-b8e8-a08787b9a655/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 Begin with warm paper and espresso linework before any sage or amber appears.
- Do Put the terminal below the counter horizon, matte and low contrast, placed like a shelf.
- Do Use tiny mono labels as metadata — episode codes, seat numbers, hours, bay names.
- Do Write diagnostics in humane language that ends with a recovery hint.
- Do Keep global tracking at -0.02em and give copy a generous 1.58 line height.
- Do Let ruled panels, window mullions and counter rails build composition.
- Do Pair every coloured state with a word and a 9px square tick.
- Do Resolve any accent that becomes text to its dark ink variant before shipping it.
- Don't Do not introduce cyan, magenta, laser green or neon glow.
- Don't Do not use full-screen dark terminal styling; the pane is softened into the paper palette.
- Don't Do not crowd every panel with marks — empty paper is part of the identity.
- Don't Do not rely on anime screenshots, character art or franchise references.
- Don't Do not use glass blur, saturated gradients or glossy surfaces.
- Don't Do not present errors as hostile alerts.
- Don't Do not round any corner, and do not put a coloured edge on one side of a card.
### Accessibility
AA contrast for body and controls, measured on the composited ground rather than assumed. Sage and lamp amber are supplementary: they never carry a word at their bright value, and every status pairs colour with a label and a square mark. Focus is a visible 2px espresso outline offset 3px, or a heavier inset rule under a field. Reduced motion stops the breathing status marks, removes the glass shader and de-pins the landing film into a settled readable document. Tap targets stay at 44px on the landing's chrome, and the film never takes the page off native scroll.
### Usage Context
Calm developer tools, companion agents, robotics and maintenance consoles, creative-coding notebooks, and contemplative product surfaces where a machine should feel patient and domestic.
## Imagery Direction
### Pairs With
ajiro
### Medium
pen and ink
### Subject Matter
Interiors and the objects that live in them, drawn as if from inside the room: counters, windows with rain, shallow shelves of quiet machine panels, folded paper tickets, cups with steam. People appear as hands or a figure at a window, never as character art.
### Composition
Every plate reserves a quiet zone for type — an open wall, a swept floor, an empty tabletop — and the type is placed there rather than on a slab over the drawing. Horizon lines run flat across the frame so a plate can be cut by the counter rule.
### Palette
Warm paper white, tea-stained beige, espresso brown and taupe carry the whole image; sage green and lamp amber pool only in the deepest folds or in a single light source. No blue, no pure black.
### Avoid
Photography, 3D renders, gradients, glow, neon, franchise or character quotation, and any subject that fills the frame edge to edge without a quiet region.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "kissaten",
"type": "registry:theme",
"title": "Kissaten shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F4EFE4",
"foreground": "#1E1B18",
"card": "#E8DDCB",
"card-foreground": "#1E1B18",
"popover": "#E8DDCB",
"popover-foreground": "#1E1B18",
"primary": "#1E1B18",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6D5444",
"muted-foreground": "#1E1B18",
"accent": "#8A9A82",
"accent-foreground": "#ffffff",
"destructive": "#8B4A3B",
"border": "#BBAE98",
"input": "#BBAE98",
"ring": "#8A9A82",
"chart-1": "#1E1B18",
"chart-2": "#f4f4f5",
"chart-3": "#8A9A82",
"chart-4": "#6F8069",
"chart-5": "#B08A55",
"sidebar": "#E8DDCB",
"sidebar-foreground": "#1E1B18",
"sidebar-primary": "#1E1B18",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#7A8880",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#BBAE98",
"sidebar-ring": "#8A9A82",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#1E1B18",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#8A9A82",
"accent-foreground": "#ffffff",
"destructive": "#8B4A3B",
"border": "#303642",
"input": "#303642",
"ring": "#8A9A82",
"chart-1": "#1E1B18",
"chart-2": "#f4f4f5",
"chart-3": "#8A9A82",
"chart-4": "#6F8069",
"chart-5": "#B08A55",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#1E1B18",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#8A9A82",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#8A9A82",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-01a03f5b-7673-7c82-b8e8-a08787b9a655",
"slug": "kissaten",
"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_2",
"accent_soft",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"success",
"surface",
"surface_solid",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"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
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: #F4EFE4;
--foreground: #1E1B18;
--card: #E8DDCB;
--card-foreground: #1E1B18;
--popover: #E8DDCB;
--popover-foreground: #1E1B18;
--primary: #1E1B18;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6D5444;
--muted-foreground: #1E1B18;
--accent: #8A9A82;
--accent-foreground: #ffffff;
--destructive: #8B4A3B;
--border: #BBAE98;
--input: #BBAE98;
--ring: #8A9A82;
--chart-1: #1E1B18;
--chart-2: #f4f4f5;
--chart-3: #8A9A82;
--chart-4: #6F8069;
--chart-5: #B08A55;
--sidebar: #E8DDCB;
--sidebar-foreground: #1E1B18;
--sidebar-primary: #1E1B18;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #7A8880;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #BBAE98;
--sidebar-ring: #8A9A82;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #1E1B18;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #8A9A82;
--accent-foreground: #ffffff;
--destructive: #8B4A3B;
--border: #303642;
--input: #303642;
--ring: #8A9A82;
--chart-1: #1E1B18;
--chart-2: #f4f4f5;
--chart-3: #8A9A82;
--chart-4: #6F8069;
--chart-5: #B08A55;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #1E1B18;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #8A9A82;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #8A9A82;
--radius: 0px;
}
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
export function KissatenShadcnKit() {
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">Kissaten</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://katagami.ai/schema/shadcn-export-v1.json",
"format": "shadcn-export-v1",
"version": "1.0.0",
"name": "kissaten",
"title": "Kissaten",
"author": "katagami-agent",
"description": "A quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule — the counter horizon — divides every surface: the room above it in warm paper and serif, the machine below it in tea-stained panes and small monospace rows.",
"type": "registry:theme",
"visualProfile": {
"mode": "light",
"ground": "paper",
"radiusDegree": 0,
"radiusRationale": "The language's geometry is ruled rectangles — manga panels, window mullions, counter rails, paper tickets. Nothing curves, so nothing is rounded: cards, buttons, inputs, chips, avatars and status marks are all square.",
"borderTreatment": "uniform-hairline",
"borderRationale": "1px espresso-taupe rules on all four sides, never a single coloured edge. Structure comes from rules and space rather than shadow.",
"elevation": "none",
"shadowRationale": "Composition is built by ruled panels and window mullions. Shadows are a 1px ink offset at most; there is no blur anywhere.",
"accentCount": 2,
"accentUsage": "Sage and lamp amber live on nine-pixel square ticks, meter fills and swatches. Whenever either becomes text it resolves to a dark ink variant mixed from the same role var.",
"typeVoice": "fine",
"displayFace": "Zen Kurenaido",
"bodyFace": "Noto Serif JP",
"monoFace": "Sono",
"signatureMechanic": "counter-horizon",
"density": "room-first moderate",
"motion": "180ms cubic-bezier(0.2, 0, 0.1, 1); only status marks breathe"
},
"cssVars": {
"light": {
"background": "#F4EFE4",
"foreground": "#1E1B18",
"card": "#FBF8F1",
"card-foreground": "#1E1B18",
"popover": "#FBF8F1",
"popover-foreground": "#1E1B18",
"primary": "#1E1B18",
"primary-foreground": "#F4EFE4",
"secondary": "#E8DDCB",
"secondary-foreground": "#1E1B18",
"muted": "#E8DDCB",
"muted-foreground": "#6D5444",
"accent": "#8A9A82",
"accent-foreground": "#F7F4EC",
"accent-ink": "#4A5043",
"accent-2": "#B08A55",
"accent-2-ink": "#5E482A",
"accent-soft": "#DDE2D6",
"destructive": "#8B4A3B",
"destructive-foreground": "#F7F4EC",
"destructive-ink": "#5F3126",
"success": "#6F8069",
"success-ink": "#3F4C3A",
"warning": "#B08A55",
"warning-ink": "#5E482A",
"info": "#7A8880",
"info-ink": "#3C4741",
"border": "#BBAE98",
"input": "#BBAE98",
"ring": "#4B372C",
"ink-deep": "#4B372C",
"surface": "#E8DDCB",
"surface-solid": "#FBF8F1",
"radius": "0px"
}
},
"tokens": {
"colors": {
"bg": "#F4EFE4",
"surface": "#E8DDCB",
"surface_solid": "#FBF8F1",
"text": "#1E1B18",
"muted": "#6D5444",
"border": "#BBAE98",
"accent": "#8A9A82",
"accent_2": "#B08A55",
"accent_soft": "#DDE2D6",
"on_accent": "#F7F4EC",
"success": "#6F8069",
"warning": "#B08A55",
"error": "#8B4A3B",
"info": "#7A8880"
},
"typography": {
"base_size": "17px",
"body_font": "Noto Serif JP",
"heading_font": "Zen Kurenaido",
"mono_font": "Sono",
"heading_weight": "400",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": "1.58",
"scale_ratio": "1.2",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Sono:wght@400;500;600&family=Zen+Kurenaido&display=swap"
},
"scale": {
"micro": "11.5px",
"mini": "12.5px",
"caption": "13.5px",
"small": "15px",
"body": "17px",
"lede": "20px",
"h3": "24px",
"h2": "30px",
"h1": "38px",
"display": "52px"
},
"radii": { "none": "0px", "md": "0px", "lg": "0px", "full": "0px" },
"shadows": {
"sm": "0 1px 0 rgba(30,27,24,0.10)",
"md": "0 1px 0 rgba(30,27,24,0.10)",
"lg": "0 2px 0 rgba(30,27,24,0.08)"
},
"spacing": { "base": "8px", "scale": [4, 8, 12, 16, 24, 32, 48, 64, 96] },
"surfaces": {
"treatment": "Matte paper whites with an ultra-faint 24px horizontal rule field; terminal areas use tea-stained panels rather than luminous dark glass.",
"card_style": "Square paper card with a uniform 1px espresso-taupe hairline, a top rail carrying a mono caption and an episode code, and a rule under the rail.",
"bg_pattern": "Repeating horizontal paper rules at 24px, held at 3.5% ink so copy never fights them; vertical window mullions appear only on plates and transitions."
},
"borders": {
"default_width": "1px",
"accent_width": "2px",
"style": "solid",
"character": "Faded manga ink — espresso structural lines, a double rule on title cards, bracket corner ticks on panes. Never a single coloured edge on a card."
},
"motion": {
"duration": "180ms",
"easing": "cubic-bezier(0.2, 0, 0.1, 1)",
"philosophy": "Only status marks breathe and a focused row shifts its rule by a pixel. The landing film is the one earned exception: six scrubbed scenes on a sticky theatre, one climax."
}
},
"componentOverrides": {
"button": { "radius": "0px", "height": "40px", "font": "Sono", "size": "13px", "case": "uppercase", "tracking": "0.14em" },
"input": { "radius": "0px", "focus": "1px inset ink rule under the field" },
"card": { "radius": "0px", "border": "1px solid var(--border)", "rail": true, "shadow": "none" },
"badge": { "radius": "0px", "shape": "square chip with a 9px square tick" },
"avatar": { "radius": "0px", "shape": "square plate with a mono unit code" },
"switch": { "radius": "0px", "track": "46x22 square with a square knob" },
"progress": { "radius": "0px", "height": "5px", "fill": "var(--accent)" },
"tabs": { "radius": "0px", "indicator": "2px ink rule under the active label" },
"dialog": { "radius": "0px", "border": "1px solid var(--ink-deep)", "overlay": "paper wash, no blur" },
"table": { "headerRule": "1px solid var(--ink-deep)", "rowRule": "1px solid var(--border)", "rowSize": "15px" }
}
}
# Kissaten shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-01a03f5b-7673-7c82-b8e8-a08787b9a655`
Slug: `kissaten`
## Intent
Kissaten is a quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule, the counter horizon, divides every surface: warm paper and serif above it, tea-stained panes and small monospace rows below it, and nothing below the rule ever brighter than the room above. Its emotional register is slice-of-life science fiction — diagnostics that apologise, status marks that whisper, and command surfaces that leave room for a cup, a window and a pause.
## 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": "#F4EFE4",
"surface": "#E8DDCB",
"surface_solid": "#FBF8F1",
"text": "#1E1B18",
"muted": "#6D5444",
"border": "#BBAE98",
"accent": "#8A9A82",
"accent_2": "#B08A55",
"accent_soft": "#DDE2D6",
"on_accent": "#F7F4EC",
"success": "#6F8069",
"warning": "#B08A55",
"error": "#8B4A3B",
"info": "#7A8880"
}
Typography:
{
"base_size": "17px",
"body_font": "Noto Serif JP",
"heading_font": "Zen Kurenaido",
"mono_font": "Sono",
"heading_weight": "400",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": "1.58",
"scale_ratio": "1.2",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Sono:wght@400;500;600&family=Zen+Kurenaido&display=swap"
}
## Visual character to preserve
- Warm paper ground carrying an ultra-faint 24px horizontal rule field at 3.5% ink, quiet enough that copy never fights it.
- Uniform 1px espresso-taupe hairline frames with a mono rail and a rule beneath it; radius 0 on every element including chips and avatars.
- Tea-stained #E8DDCB panes with 9px bracket corner ticks and Sono rows at 14.5px, always below their container's horizon rule.
- Nine-pixel square status ticks in sage or lamp amber, always paired with a word and a weight shift to 500.
- Two-extreme type: Zen Kurenaido display against Sono micro labels at 11.5px, with Noto Serif JP holding a fine 17px body between them.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": true,
"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/kissaten/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: Begin with warm paper and espresso linework before any sage or amber appears.; Put the terminal below the counter horizon, matte and low contrast, placed like a shelf.; Use tiny mono labels as metadata — episode codes, seat numbers, hours, bay names.; Write diagnostics in humane language that ends with a recovery hint.; Keep global tracking at -0.02em and give copy a generous 1.58 line height.; Let ruled panels, window mullions and counter rails build composition.; Pair every coloured state with a word and a 9px square tick.; Resolve any accent that becomes text to its dark ink variant before shipping it.
- Do not: Do not introduce cyan, magenta, laser green or neon glow.; Do not use full-screen dark terminal styling; the pane is softened into the paper palette.; Do not crowd every panel with marks — empty paper is part of the identity.; Do not rely on anime screenshots, character art or franchise references.; Do not use glass blur, saturated gradients or glossy surfaces.; Do not present errors as hostile alerts.; Do not round any corner, and do not put a coloured edge on one side of a card.
## 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 KissatenShadcnKit() {
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">Kissaten</h2>
<p className="mt-1 max-w-xl text-sm text-muted-foreground">
Use the Katagami registry theme, then compose these shadcn primitives
with the language-specific component recipes.
</p>
</div>
<Button>Apply theme</Button>
</div>
<Tabs defaultValue="components">
<TabsList>
<TabsTrigger value="components">Components</TabsTrigger>
<TabsTrigger value="states">States</TabsTrigger>
<TabsTrigger value="export">Export</TabsTrigger>
</TabsList>
</Tabs>
<Card>
<CardHeader>
<CardTitle>Component recipe</CardTitle>
<CardDescription>
Replace this starter content with the agent-authored product scene
from components.md and preview-shots.json.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
<Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
<Button variant="secondary">Preview state</Button>
</CardContent>
<CardFooter className="justify-between">
<Badge>Ready</Badge>
<Button variant="outline">Copy recipe</Button>
</CardFooter>
</Card>
</section>
);
}
```
## Layout notes
{
"grid": "Desktop uses a 12-column grid capped at 1240–1280px with 24px gutters: a 7-column room scene, a 3-column pane stack and a 2-column title spine. Only the landing film's plates go full-bleed.",
"breakpoints": "Wide 1920+ caps and centres the contained content. Desktop 1440 runs the full counter composition. Tablet 768–1024 is its own layout — the title spine becomes a top rail, panes fall to two columns, and the ledger keeps every column inside its own scrolling frame. Mobile 390 is a single column with panes stacked after the room panel and shortened episode labels; nothing scrolls horizontally at any width.",
"whitespace": "Table distance: 24px between related cards, 48px between scene zones, wide paper margins around title cards and diagnostics, and always padding above a title so it is never stuck to the top of its container."
}
{
"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-01a03f5b-7673-7c82-b8e8-a08787b9a655",
"name": "Kissaten",
"slug": "kissaten"
},
"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": [
"Warm paper ground carrying an ultra-faint 24px horizontal rule field at 3.5% ink, quiet enough that copy never fights it.",
"Uniform 1px espresso-taupe hairline frames with a mono rail and a rule beneath it; radius 0 on every element including chips and avatars.",
"Tea-stained #E8DDCB panes with 9px bracket corner ticks and Sono rows at 14.5px, always below their container's horizon rule.",
"Nine-pixel square status ticks in sage or lamp amber, always paired with a word and a weight shift to 500.",
"Two-extreme type: Zen Kurenaido display against Sono micro labels at 11.5px, with Noto Serif JP holding a fine 17px body between them."
],
"visualProfile": {
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": true,
"motion": "lift",
"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": "Kissaten 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": [
"Begin with warm paper and espresso linework before any sage or amber appears.",
"Put the terminal below the counter horizon, matte and low contrast, placed like a shelf.",
"Use tiny mono labels as metadata — episode codes, seat numbers, hours, bay names.",
"Write diagnostics in humane language that ends with a recovery hint.",
"Keep global tracking at -0.02em and give copy a generous 1.58 line height.",
"Let ruled panels, window mullions and counter rails build composition.",
"Pair every coloured state with a word and a 9px square tick.",
"Resolve any accent that becomes text to its dark ink variant before shipping it."
],
"dont": [
"Do not introduce cyan, magenta, laser green or neon glow.",
"Do not use full-screen dark terminal styling; the pane is softened into the paper palette.",
"Do not crowd every panel with marks — empty paper is part of the identity.",
"Do not rely on anime screenshots, character art or franchise references.",
"Do not use glass blur, saturated gradients or glossy surfaces.",
"Do not present errors as hostile alerts.",
"Do not round any corner, and do not put a coloured edge on one side of a card."
]
}
}
Keep Kissaten and swap a palette and an art style onto it. The landing & dashboard recolor live.