Kissaten

# Kissaten

## Philosophy

Kissaten is a quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule, the counter horizon, divides the view: the room above it in warm paper, a soft hand and a fine serif, and the machine below it. The machine answers on one real object: a strip of thermal receipt paper fed out from under the counter, lit from the top left, carrying the log and a plain apology, and stamped with a cherry 休 hanko when a machine is resting. Everything else stays flat, small and precise, so the receipt is the only raised thing in a view.

### Values

- One object is the interface: the thermal receipt, fed out from under the counter horizon and shown whole once per page.
- Red is state, not decoration: the 休 hanko appears only on a resting machine, pressed once.
- Human-first diagnostics: every machine note says what happened, what is being done, and one thing you might try.
- Room first: warm paper, a soft hand for the one big light line, a fine 17px serif for prose, and the machine's print only where the machine speaks.
- Flat and precise around the object: separation by space and the value of the type, never by boxes or lines.

### Anti-Values

- Hairline card frames, corner ticks and tea-stained panes around everything.
- Decorative codes (EP.07, SEAT 3, BAY.2) and tracked uppercase mono used as ornament.
- A ruled paper field or window mullions laid under copy.
- Sage and amber status squares; colour that is not a state.
- Hostile error language, neon, glass, gradients on the page, and rounded corners.

### Visual Character

- Warm paper #F4EFE4 ground with espresso ink #1E1B18, flat, with no rule field or texture.
- The counter horizon: one full-bleed ink rule per view, the room above it and the machine below it.
- The thermal receipt #FFFDF8 hanging from under the horizon: a faint paper tooth, a slot shadow, a top-left light falloff, a torn serrated foot and a two-layer espresso shadow that widens toward the free end.
- The 休 hanko in cherry #A3161E, carved thick with ink voids, rotated -11deg, pressed onto the receipt as the grinder's state.
- Type that is small and quiet around one big light line: Zen Kurenaido 400 at 48 to 96px, Noto Serif JP at 17px in two tones (ink, then muted), Sono for what the machine prints.
- Square geometry: radius 0 on every button, well, chip and overlay.

### Lineage

> Generation 3 of Kissaten, revised in place from the approved Inspora specimen (.p-kissaten-i, 2026-09-27). It keeps today's cream, ink, muted, the ink button, the faces, the order and the counter horizon, and turns the machine pane into one real object: a thermal receipt with a 休 hanko.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EFE4` |
| surface | `#E8DDCB` |
| text | `#1E1B18` |
| muted | `#6D5444` |
| border | `#BBAE98` |
| accent | `#A3161E` |
| on_accent | `#F7F4EC` |
| success | `#4F6247` |
| warning | `#7A5A2A` |
| error | `#8B3A2E` |
| info | `#4D5C55` |
| receipt | `#FFFDF8` |
| shade | `#4A3220` |

### Derived

- **Paper Light**: color-mix(in srgb, var(--receipt) 70%, transparent), a 104deg falloff from the top-left corner of the receipt
- **Slot Shadow**: color-mix(in srgb, var(--text) 22%, transparent) fading to 7% at 1.1cqi and to nothing at 3.4cqi, where the paper leaves the counter
- **Row Hover**: color-mix(in srgb, var(--surface) 45%, transparent)
- **Receipt Shadow**: drop-shadow(.34cqi .53cqi .47cqi shade 26%) drop-shadow(1.25cqi 2.34cqi 2.8cqi shade 13%) plus a blurred shade 20% blob that widens toward the free end

### Typography

- **Heading Font**: Zen Kurenaido
- **Body Font**: Noto Serif JP
- **Mono Font**: Sono
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 500
- **Mono Weight**: 400, 500 for the receipt rail and the verdict row
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display and body; 0 on Sono and on the wordmark
- **Base Size**: 17px
- **Line Height**: 1.58
- **Scale**: ["13px","14.5px","17px","20px","26px","36px","48px","72px","96px"]
- **Receipt Print**: Sono at 5cqi of the receipt width (15 to 22px), Noto Serif JP at 5.2cqi for the apology line
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Sono:wght@400;500&family=Zen+Kurenaido&display=swap

### Radii

- **None**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 0px

### Shadows

- **Receipt**: two layers tinted from --shade: a tight .34cqi .53cqi .47cqi at 26% and a soft 1.25cqi 2.34cqi 2.8cqi at 13%, only on the receipt
- **Lift**: 0 1px 2px shade 22%, 0 14px 32px -12px shade 30%, only on an open menu or dialog
- **None**: everything else is flat

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","96px","128px"]

### Surfaces

- **Treatment**: one-object-on-warm-paper
- **Material**: The thermal receipt is the only material object: warm thermal paper #FFFDF8 with a faint tooth, a slot shadow where it leaves the counter, a top-left light falloff, a torn serrated foot and a two-layer shadow tinted espresso. Everything else is flat paper and ink.
- **Card Style**: No cards. Lists, menus, hours, ledgers and forms sit straight on the paper, parted by space and the value of the type.
- **Wells**: Tea #E8DDCB wells for inputs, the chosen tab and the checked segment; at most one filled surface per view.
- **Bg Pattern**: none; the paper is flat. The counter horizon is the only rule.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines, corner ticks or card frames. The one line in the language is the counter horizon: a full-bleed ink rule (1 to 2px) between the room and the machine, once per view. Focus is a 2px ink outline at 3px offset; a focused field draws a 2px ink line under its well.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Print**: 1.9s: translateY(-101%) to 0 in steps(22), then a .6cqi dip on cubic-bezier(.3,.7,.4,1) and back
- **Press**: .5s cubic-bezier(.3,1.4,.5,1) at 1.45s: the hanko lands from scale 1.5 to .93 to 1 at -11deg
- **Reveal**: 900ms cubic-bezier(.2,0,.1,1), 16px rise, 80ms stagger, IntersectionObserver
- **Philosophy**: Motion is a physical verb: the receipt prints again and the stamp presses. Settled first, gated by .anim on html, and skipped under prefers-reduced-motion.

### Controls

- **Height**: 48px (40 small, 56 large)
- **Radius**: 0px
- **Well Height**: 52px

## Rules

### Composition

- Build every view on the counter horizon: the room above it, the machine below it.
- Give a view at most one object moment: the receipt hanging from the horizon, the stamp pressed beside a resting machine, or the torn stub on the counter. Show the whole hanging receipt once per page.
- Keep the object whole with paper on every side; the headline, the copy and one action sit on the ground beside it, never on a panel over it.
- Lists, menus, hours, ledgers and forms sit straight on the paper, parted by space; at most one filled surface (tea wells) per view.

### Hierarchy

- One big light line per view in Zen Kurenaido 400 (48px on phones, 72px on desktop, 96px from 1800px); section titles at 36px, 26px on phones.
- Prose in Noto Serif JP 400 at 17px, in two tones: the fact in ink, the reassurance in muted.
- Sono prints what the machine says: readings, times, labels and the receipt.
- State is a word at weight 500; a finished state steps back to muted 400; a resting machine gets the 休 hanko.

### Density

Calm product-page density: 128px between sections on desktop and 96px on phones, 18 to 28px row padding, one button per view, prose held to about 60 characters.

### Signature Patterns

- Counter horizon: one full-bleed ink rule per view, between the room above and the machine below; on the landing it is the drawn counter plank in the hero plate.
- The thermal receipt: warm thermal paper fed out from under the horizon, printed in Sono with the log and a plain apology, lit from the top left, with a torn foot and a two-layer espresso shadow.
- The 休 hanko: a cherry seal, carved thick with ink voids, pressed once as the state of a resting machine.
- Print it again: hover or focus the slot (or the one button) and the receipt drops back under the horizon, feeds out in twenty-two steps, dips and settles, then the hanko presses with a small overshoot.
- Humane notes: a Sono time, one sentence in ink saying what happened, one in muted saying what to do next.

## Layout

### Grid

- **Type**: object-first product page on a counter horizon
- **Max Width**: 1180px content on the landing and 1240px on the embodiment, 1320px from 1800px wide
- **Gutter**: 40px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,6fr); lists use minmax(0,1fr) columns; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 96px phone
- **Card Gap**: no cards; 18 to 28px row padding, 40 to 64px between groups
- **Content Padding**: content sits on the paper aligned to the grid edge; overlays pad 32px
- **Approach**: The paper is the table. Space and the value of the type do the separating; the counter horizon is the only line.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"52px","row_height":"56 to 72px list rows"}

### Responsive

Phones (390px) stack to one column, keep only Hours in the nav, show the plain-paper side of the hero plate with the copy above the counter and the receipt centred below it, and hide non-essential table columns. Tablets (768 to 1100px) keep two-column lists with their own spacing. From 1800px the content caps and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 820 to 1100px
- **Desktop**: 1280px
- **Wide**: 1800px
- **Ultrawide**: 2560px

## Guidance

### Do

- Start from warm paper and ink; let the receipt be the only raised thing in a view.
- Hang the receipt from the counter horizon with paper on every side, whole and once per page.
- Spend cherry only on the 休 hanko of a resting machine.
- Write every machine note as what happened, what is being done, and one next step.
- Separate rows by space and type value; keep at most one filled surface per view.
- Keep one button per view; make a second action a word that inks up.
- Style every control explicitly, square, with a 2px ink focus outline.

### Don't

- Don't frame cards with hairlines, corner ticks or tea panes.
- Don't print decorative codes, episode numbers or tracked uppercase labels as ornament.
- Don't lay a rule field, mullions or texture under copy.
- Don't use red for anything but the resting stamp, and don't add sage or amber squares.
- Don't cover the hero plate with a panel or scrim, and don't show the hanging receipt twice on a page.
- Don't round corners, add glow or glass, or put emoji on buttons.

### Accessibility

AA and better on paper: ink #1E1B18 is 14.9:1 and muted #6D5444 is 6.1:1 on #F4EFE4; receipt print is 16.9:1 on #FFFDF8; the button label #F4EFE4 on ink is 14.9:1; the semantic inks clear 5.5:1 on paper and 4.7:1 on the tea well; the hanko is 6.8:1 on paper and always carries a word beside it. Focus is a 2px ink outline at 3px offset, or a 2px ink line under a well. The receipt's print verb runs only inside prefers-reduced-motion: no-preference, the settled receipt renders with no JavaScript, and the slot is a focusable button with a label.

### Usage Context

Calm developer tools, companion agents, maintenance consoles and service counters, and any product where a machine should feel patient, domestic and honest about when it needs a rest.

## Imagery Direction

### Pairs With

ajiro

### Art Style Id

en-01a03f5b-7475-7dd2-a25e-16c4ae070ae3

### Summary

Pen-and-ink plates in Ajiro's woven hatching and screentone on warm paper, drawn quiet: the counter seen straight on as a flat plank running edge to edge, a rainy shop window on one side, and open paper for type. The plate is graded so its paper meets the page's #F4EFE4 with no seam, and the drawn counter plank becomes the counter horizon the live receipt hangs from.

### Subjects

- the counter plank seen straight on
- a rainy shop window with wooden mullions
- the empty paper wall above the counter
- the underside of the counter lip

### Usage

One full-bleed hero per landing: the Ajiro counter plate painted with var(--hero-image), background-position 50% 60% so the plank's lower edge stays at 60% of the hero height at every size, with the live receipt fed out from under it. Phones show the plate's plain-paper side. Inside pages carry no illustration; the receipt is the object.

### Avoid

Stools, cups, people or clutter in the hero plate; hatching under copy; colour patches; a ruled frame around the plate; photography, 3D renders, glow and gradients.

---
version: "alpha"
name: "Kissaten"
description: "Kissaten is a quiet interface language for machine rooms kept as neighbourhood coffee shops. One ink rule, the counter horizon, divides the view: the room above it in warm paper, a soft hand and a fine serif, and the machine below it. Th..."
colors:
  bg: "#F4EFE4"
  surface: "#E8DDCB"
  text: "#1E1B18"
  muted: "#6D5444"
  border: "#BBAE98"
  accent: "#A3161E"
  on_accent: "#F7F4EC"
  success: "#4F6247"
  warning: "#7A5A2A"
  error: "#8B3A2E"
  info: "#4D5C55"
  receipt: "#FFFDF8"
  shade: "#4A3220"
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"
  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-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}"
  color-reference-receipt:
    backgroundColor: "{colors.receipt}"
  color-reference-shade:
    backgroundColor: "{colors.shade}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    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 the view: the room above it in warm paper, a soft hand and a fine serif, and the machine below it. The machine answers on one real object: a strip of thermal receipt paper fed out from under the counter, lit from the top left, carrying the log and a plain apology, and stamped with a cherry 休 hanko when a machine is resting. Everything else stays flat, small and precise, so the receipt is the only raised thing in a view.

### Values

- One object is the interface: the thermal receipt, fed out from under the counter horizon and shown whole once per page.
- Red is state, not decoration: the 休 hanko appears only on a resting machine, pressed once.
- Human-first diagnostics: every machine note says what happened, what is being done, and one thing you might try.
- Room first: warm paper, a soft hand for the one big light line, a fine 17px serif for prose, and the machine's print only where the machine speaks.
- Flat and precise around the object: separation by space and the value of the type, never by boxes or lines.

### Anti-Values

- Hairline card frames, corner ticks and tea-stained panes around everything.
- Decorative codes (EP.07, SEAT 3, BAY.2) and tracked uppercase mono used as ornament.
- A ruled paper field or window mullions laid under copy.
- Sage and amber status squares; colour that is not a state.
- Hostile error language, neon, glass, gradients on the page, and rounded corners.

### Visual Character

- Warm paper #F4EFE4 ground with espresso ink #1E1B18, flat, with no rule field or texture.
- The counter horizon: one full-bleed ink rule per view, the room above it and the machine below it.
- The thermal receipt #FFFDF8 hanging from under the horizon: a faint paper tooth, a slot shadow, a top-left light falloff, a torn serrated foot and a two-layer espresso shadow that widens toward the free end.
- The 休 hanko in cherry #A3161E, carved thick with ink voids, rotated -11deg, pressed onto the receipt as the grinder's state.
- Type that is small and quiet around one big light line: Zen Kurenaido 400 at 48 to 96px, Noto Serif JP at 17px in two tones (ink, then muted), Sono for what the machine prints.
- Square geometry: radius 0 on every button, well, chip and overlay.

### Lineage

> Generation 3 of Kissaten, revised in place from the approved Inspora specimen (.p-kissaten-i, 2026-09-27). It keeps today's cream, ink, muted, the ink button, the faces, the order and the counter horizon, and turns the machine pane into one real object: a thermal receipt with a 休 hanko.

## 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` |
| text | `#1E1B18` |
| muted | `#6D5444` |
| border | `#BBAE98` |
| accent | `#A3161E` |
| on_accent | `#F7F4EC` |
| success | `#4F6247` |
| warning | `#7A5A2A` |
| error | `#8B3A2E` |
| info | `#4D5C55` |
| receipt | `#FFFDF8` |
| shade | `#4A3220` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&family=Sono:wght@400;500&family=Zen+Kurenaido&display=swap

- **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`
- **Step-9**: `128px`

### Grid

- **Type**: object-first product page on a counter horizon
- **Max Width**: 1180px content on the landing and 1240px on the embodiment, 1320px from 1800px wide
- **Gutter**: 40px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,6fr); lists use minmax(0,1fr) columns; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 96px phone
- **Card Gap**: no cards; 18 to 28px row padding, 40 to 64px between groups
- **Content Padding**: content sits on the paper aligned to the grid edge; overlays pad 32px
- **Approach**: The paper is the table. Space and the value of the type do the separating; the counter horizon is the only line.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"48px","input_height":"52px","row_height":"56 to 72px list rows"}

### Responsive

Phones (390px) stack to one column, keep only Hours in the nav, show the plain-paper side of the hero plate with the copy above the counter and the receipt centred below it, and hide non-essential table columns. Tablets (768 to 1100px) keep two-column lists with their own spacing. From 1800px the content caps and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 820 to 1100px
- **Desktop**: 1280px
- **Wide**: 1800px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Receipt**: two layers tinted from --shade: a tight .34cqi .53cqi .47cqi at 26% and a soft 1.25cqi 2.34cqi 2.8cqi at 13%, only on the receipt
- **Lift**: 0 1px 2px shade 22%, 0 14px 32px -12px shade 30%, only on an open menu or dialog
- **None**: everything else is flat

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`

### Surfaces

- **Treatment**: one-object-on-warm-paper
- **Material**: The thermal receipt is the only material object: warm thermal paper #FFFDF8 with a faint tooth, a slot shadow where it leaves the counter, a top-left light falloff, a torn serrated foot and a two-layer shadow tinted espresso. Everything else is flat paper and ink.
- **Card Style**: No cards. Lists, menus, hours, ledgers and forms sit straight on the paper, parted by space and the value of the type.
- **Wells**: Tea #E8DDCB wells for inputs, the chosen tab and the checked segment; at most one filled surface per view.
- **Bg Pattern**: none; the paper is flat. The counter horizon is the only rule.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines, corner ticks or card frames. The one line in the language is the counter horizon: a full-bleed ink rule (1 to 2px) between the room and the machine, once per view. Focus is a 2px ink outline at 3px offset; a focused field draws a 2px ink line under its well.

## Components

### Composition

- Build every view on the counter horizon: the room above it, the machine below it.
- Give a view at most one object moment: the receipt hanging from the horizon, the stamp pressed beside a resting machine, or the torn stub on the counter. Show the whole hanging receipt once per page.
- Keep the object whole with paper on every side; the headline, the copy and one action sit on the ground beside it, never on a panel over it.
- Lists, menus, hours, ledgers and forms sit straight on the paper, parted by space; at most one filled surface (tea wells) per view.

### Hierarchy

- One big light line per view in Zen Kurenaido 400 (48px on phones, 72px on desktop, 96px from 1800px); section titles at 36px, 26px on phones.
- Prose in Noto Serif JP 400 at 17px, in two tones: the fact in ink, the reassurance in muted.
- Sono prints what the machine says: readings, times, labels and the receipt.
- State is a word at weight 500; a finished state steps back to muted 400; a resting machine gets the 休 hanko.

### Density

Calm product-page density: 128px between sections on desktop and 96px on phones, 18 to 28px row padding, one button per view, prose held to about 60 characters.

### Signature Patterns

- Counter horizon: one full-bleed ink rule per view, between the room above and the machine below; on the landing it is the drawn counter plank in the hero plate.
- The thermal receipt: warm thermal paper fed out from under the horizon, printed in Sono with the log and a plain apology, lit from the top left, with a torn foot and a two-layer espresso shadow.
- The 休 hanko: a cherry seal, carved thick with ink voids, pressed once as the state of a resting machine.
- Print it again: hover or focus the slot (or the one button) and the receipt drops back under the horizon, feeds out in twenty-two steps, dips and settles, then the hanko presses with a small overshoot.
- Humane notes: a Sono time, one sentence in ink saying what happened, one in muted saying what to do next.

## 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-01a0eca4-0d9f-7072-b71e-29c924c659be/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0eca4-0d9f-7072-b71e-29c924c659be/shadcn.json` (registry theme), `/language/en-01a0eca4-0d9f-7072-b71e-29c924c659be/shadcn-components.md` (component recipes) and `/language/en-01a0eca4-0d9f-7072-b71e-29c924c659be/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Start from warm paper and ink; let the receipt be the only raised thing in a view.
- Do Hang the receipt from the counter horizon with paper on every side, whole and once per page.
- Do Spend cherry only on the 休 hanko of a resting machine.
- Do Write every machine note as what happened, what is being done, and one next step.
- Do Separate rows by space and type value; keep at most one filled surface per view.
- Do Keep one button per view; make a second action a word that inks up.
- Do Style every control explicitly, square, with a 2px ink focus outline.
- Don't Don't frame cards with hairlines, corner ticks or tea panes.
- Don't Don't print decorative codes, episode numbers or tracked uppercase labels as ornament.
- Don't Don't lay a rule field, mullions or texture under copy.
- Don't Don't use red for anything but the resting stamp, and don't add sage or amber squares.
- Don't Don't cover the hero plate with a panel or scrim, and don't show the hanging receipt twice on a page.
- Don't Don't round corners, add glow or glass, or put emoji on buttons.

### Accessibility

AA and better on paper: ink #1E1B18 is 14.9:1 and muted #6D5444 is 6.1:1 on #F4EFE4; receipt print is 16.9:1 on #FFFDF8; the button label #F4EFE4 on ink is 14.9:1; the semantic inks clear 5.5:1 on paper and 4.7:1 on the tea well; the hanko is 6.8:1 on paper and always carries a word beside it. Focus is a 2px ink outline at 3px offset, or a 2px ink line under a well. The receipt's print verb runs only inside prefers-reduced-motion: no-preference, the settled receipt renders with no JavaScript, and the slot is a focusable button with a label.

### Usage Context

Calm developer tools, companion agents, maintenance consoles and service counters, and any product where a machine should feel patient, domestic and honest about when it needs a rest.

## Imagery Direction

### Pairs With

ajiro

### Art Style Id

en-01a03f5b-7475-7dd2-a25e-16c4ae070ae3

### Summary

Pen-and-ink plates in Ajiro's woven hatching and screentone on warm paper, drawn quiet: the counter seen straight on as a flat plank running edge to edge, a rainy shop window on one side, and open paper for type. The plate is graded so its paper meets the page's #F4EFE4 with no seam, and the drawn counter plank becomes the counter horizon the live receipt hangs from.

### Subjects

- the counter plank seen straight on
- a rainy shop window with wooden mullions
- the empty paper wall above the counter
- the underside of the counter lip

### Usage

One full-bleed hero per landing: the Ajiro counter plate painted with var(--hero-image), background-position 50% 60% so the plank's lower edge stays at 60% of the hero height at every size, with the live receipt fed out from under it. Phones show the plate's plain-paper side. Inside pages carry no illustration; the receipt is the object.

### Avoid

Stools, cups, people or clutter in the hero plate; hatching under copy; colour patches; a ruled frame around the plate; photography, 3D renders, glow and gradients.

```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": "#A3161E",
      "accent-foreground": "#ffffff",
      "destructive": "#8B3A2E",
      "border": "#BBAE98",
      "input": "#BBAE98",
      "ring": "#A3161E",
      "chart-1": "#1E1B18",
      "chart-2": "#f4f4f5",
      "chart-3": "#A3161E",
      "chart-4": "#4F6247",
      "chart-5": "#7A5A2A",
      "sidebar": "#E8DDCB",
      "sidebar-foreground": "#1E1B18",
      "sidebar-primary": "#1E1B18",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4D5C55",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#BBAE98",
      "sidebar-ring": "#A3161E",
      "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": "#A3161E",
      "accent-foreground": "#ffffff",
      "destructive": "#8B3A2E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#A3161E",
      "chart-1": "#1E1B18",
      "chart-2": "#f4f4f5",
      "chart-3": "#A3161E",
      "chart-4": "#4F6247",
      "chart-5": "#7A5A2A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1E1B18",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#A3161E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#A3161E",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0eca4-0d9f-7072-b71e-29c924c659be",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "receipt",
        "shade",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "paper_light",
        "receipt_shadow",
        "row_hover",
        "slot_shadow"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "mono_weight",
        "receipt_print",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lift",
        "none",
        "receipt"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "press",
        "print",
        "reveal"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```