Suzuri

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #F4EFE6;
  --foreground: #1A1613;
  --card: #FCFAF4;
  --card-foreground: #1A1613;
  --popover: #FCFAF4;
  --popover-foreground: #1A1613;
  --primary: #1A1613;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #877C70;
  --muted-foreground: #1A1613;
  --accent: #C4392A;
  --accent-foreground: #ffffff;
  --destructive: #9E2A1F;
  --border: #E5DDCF;
  --input: #E5DDCF;
  --ring: #C4392A;
  --chart-1: #1A1613;
  --chart-2: #f4f4f5;
  --chart-3: #C4392A;
  --chart-4: #5A7150;
  --chart-5: #B07A1E;
  --sidebar: #FCFAF4;
  --sidebar-foreground: #1A1613;
  --sidebar-primary: #1A1613;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3D5A6C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E5DDCF;
  --sidebar-ring: #C4392A;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1A1613;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C4392A;
  --accent-foreground: #ffffff;
  --destructive: #9E2A1F;
  --border: #303642;
  --input: #303642;
  --ring: #C4392A;
  --chart-1: #1A1613;
  --chart-2: #f4f4f5;
  --chart-3: #C4392A;
  --chart-4: #5A7150;
  --chart-5: #B07A1E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1A1613;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C4392A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C4392A;
  --radius: 16px;
}

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 SuzuriShadcnKit() {
  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">Suzuri</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": "suzuri",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Suzuri",
  "description": "A calm Japanese interface theme where structure comes from ma (negative space) rather than borders, anchored by a single hand-painted ink stroke and one vermilion hanko seal. A reimagining of Minimalist Japanese.",
  "cssVars": {
    "theme": {
      "font-sans": "\"Zen Kaku Gothic New\", sans-serif",
      "font-serif": "\"Zen Old Mincho\", serif",
      "font-mono": "\"IBM Plex Mono\", monospace",
      "radius": "0.75rem"
    },
    "light": {
      "background": "#F4EFE6",
      "foreground": "#1A1613",
      "card": "#FCFAF4",
      "card-foreground": "#1A1613",
      "popover": "#FCFAF4",
      "popover-foreground": "#1A1613",
      "primary": "#C4392A",
      "primary-foreground": "#FCFAF4",
      "secondary": "#F0E9DC",
      "secondary-foreground": "#1A1613",
      "muted": "#EFE8DB",
      "muted-foreground": "#877C70",
      "accent": "#EFD9D3",
      "accent-foreground": "#9E2A1F",
      "destructive": "#9E2A1F",
      "destructive-foreground": "#FCFAF4",
      "border": "#E5DDCF",
      "input": "#E5DDCF",
      "ring": "#C4392A",
      "chart-1": "#C4392A",
      "chart-2": "#324C5C",
      "chart-3": "#5A7150",
      "chart-4": "#B07A1E",
      "chart-5": "#877C70",
      "radius": "0.75rem"
    },
    "dark": {
      "background": "#1A1613",
      "foreground": "#F4EFE6",
      "card": "#221D19",
      "card-foreground": "#F4EFE6",
      "popover": "#221D19",
      "popover-foreground": "#F4EFE6",
      "primary": "#D8574A",
      "primary-foreground": "#1A1613",
      "secondary": "#2C2620",
      "secondary-foreground": "#F4EFE6",
      "muted": "#2C2620",
      "muted-foreground": "#A99F92",
      "accent": "#3A2A26",
      "accent-foreground": "#E7C3BB",
      "destructive": "#C5473B",
      "destructive-foreground": "#F4EFE6",
      "border": "#332C26",
      "input": "#332C26",
      "ring": "#D8574A",
      "chart-1": "#D8574A",
      "chart-2": "#6E93A6",
      "chart-3": "#8AA07E",
      "chart-4": "#CFA45C",
      "chart-5": "#A99F92"
    }
  },
  "visualProfile": {
    "family": "editorial-ink",
    "material": "warm washi paper, near-monochrome",
    "contour": "borderless planes floating on ma",
    "border": "none",
    "underlay": false,
    "grain": true,
    "stickerBadges": true,
    "motion": "ink settling — slow, deliberate, no overshoot",
    "density": "low-to-medium",
    "accents": ["#C4392A", "#324C5C", "#5A7150"]
  },
  "notes": "Structure is ma and alignment, not lines. The two signature marks are the fude ink stroke (under focused/active/heading elements; use for tab underline, active nav, focus ring) and the hanko seal (a vermilion square rotated -2deg for badges/status). Buttons are fully round (radius full); cards are radius 24px with a soft grounded shadow and NO border. Reserve the vermilion primary for one earned mark per view; carry secondary/pending states with ghost and ink hanko variants. Display face Zen Old Mincho, body Zen Kaku Gothic New, mono IBM Plex Mono in wide uppercase tracking for labels and counts."
}

# Suzuri — shadcn/ui Components

Author: `katagami-agent`

Suzuri is a calm Japanese interface language where structure is ground from *ma* (negative space)
rather than borders, anchored by a single hand-painted **fude ink stroke** and one **vermilion hanko
seal**. It is a reimagining of Minimalist Japanese. This document maps the language onto shadcn/ui so
a build stays true to the take: borderless paper planes, near-monochrome canvas, one earned mark of
colour per view.

## ShadSync visual profile

| Property | Value |
|---|---|
| family | editorial-ink |
| material | warm washi paper, near-monochrome |
| contour | borderless planes floating on *ma* |
| border | none (structure = space + alignment) |
| underlay | false |
| grain | true (faint horizontal paper fiber) |
| stickerBadges | true (the hanko seal, rotated -2deg) |
| motion | ink settling — slow (~420ms), deliberate, no overshoot |
| density | low-to-medium |
| accents | `#C4392A` vermilion · `#324C5C` indigo · `#5A7150` matcha |

Core tokens: background `#F4EFE6`, card `#FCFAF4`, foreground `#1A1613`, muted-foreground `#877C70`,
primary `#C4392A`, ring `#C4392A`, border `#E5DDCF`. Radius `0.75rem` (cards render at 24px, buttons
fully round). Fonts: serif `Zen Old Mincho` (display), sans `Zen Kaku Gothic New` (body), mono
`IBM Plex Mono` (labels/counts, uppercase, 0.16em tracking).

## Signature component recipes

The two marks below are the ONLY linework and the ONLY colour Suzuri adds. Everything else is paper,
ink, and space.

### The fude stroke (focus ring + active underline)

A wet ink brushstroke that pools under the active/focused element. Use it for the active `Tabs`
trigger, the active nav item, the focus state of inputs, and section headings.

```css
.fude-underline{ position:relative; }
.fude-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:9px;
  background:
    radial-gradient(60% 120% at 4% 50%, var(--primary) 40%, transparent 62%),
    radial-gradient(120% 130% at 50% 40%, var(--primary) 58%, transparent 72%),
    radial-gradient(60% 120% at 97% 55%, var(--primary) 35%, transparent 60%);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  transform:scaleY(.7);
}
/* headings use var(--foreground) instead of var(--primary) */
```

### The hanko seal (Badge)

```tsx
// A stamped vermilion square, tilted -2deg — never a rounded pill.
<Badge className="rounded-[2px] -rotate-2 bg-primary text-primary-foreground
                  font-mono text-[11px] tracking-wider px-2.5 py-1 shadow-none">
  CONFIRMED
</Badge>
// ghost variant → outlined vermilion for secondary states
// ink variant   → charcoal fill for pending states
```

## Copy-paste component example

A booking confirmation using the hanko seal and a borderless plane:

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BookingPlane() {
  return (
    <Card className="rounded-3xl border-0 shadow-[0_10px_30px_-12px_rgba(26,22,19,0.14)] bg-card">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="font-serif tracking-wide">Hoshino Ren · Tsuki</CardTitle>
        <Badge className="rounded-[2px] -rotate-2 bg-primary text-primary-foreground font-mono text-[11px] tracking-wider shadow-none">
          CHECKED IN
        </Badge>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-muted-foreground">
          Anniversary — plum wine at turndown, no fish stock in the broth.
        </p>
        <Button className="rounded-full bg-primary text-primary-foreground">
          Stamp confirmation
        </Button>
      </CardContent>
    </Card>
  )
}
```

Notes on the primitives from `@/components/ui/`:

- **`@/components/ui/button`** — fully round (`rounded-full`); one primary vermilion per view, the
  rest ghost (transparent + `ring-1 ring-inset ring-black/10`) or ink (charcoal fill).
- **`@/components/ui/card`** — `border-0`, radius 24px (`rounded-3xl`), soft grounded shadow. Never
  nest cards; separate planes with space.
- **`@/components/ui/input`, `textarea`, `select`** — no visible border; a faint inset ring
  (`ring-1 ring-inset ring-black/[0.08]`) and, on focus, the vermilion ring plus a soft seal-tint
  halo.
- **`@/components/ui/tabs`** — the active trigger carries the fude underline, not a boxed indicator.
- **`@/components/ui/badge`** — the hanko seal (see above); reserve for status worth a pause.
- **`@/components/ui/table`** — rows on paper planes separated by 1px ink hairline; status cells use
  the hanko seal.
- **`@/components/ui/dialog`, `sheet`, `tooltip`, `dropdown-menu`** — paper surface, 24px/16px radius,
  soft shadow, no border; open with the ink-settle motion.
- **`@/components/ui/separator`** — a faint ink hairline used sparingly; prefer space to divide.
- **`@/components/ui/switch`, `checkbox`, `slider`** — track/fill in vermilion when on; controls sized
  to their content, never loose.

## Preview shots

The renderable preview scenes for Suzuri live in `preview-shots.json` (schema
`katagami:shadcn-preview-shots/renderable-v1`). They cover a booking confirmation plane, the ryokan
day-book table with hanko status seals, and the reservation form with the fude focus stroke — each
naming the primitives it exercises, what it must show (borderless planes, the ink stroke, the tilted
seal), and what to avoid (borders, bright pills, glossy shadows).

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": {
    "id": "suzuri",
    "name": "Suzuri",
    "slug": "suzuri"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/suzuri.json",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Structure is ma (negative space) and alignment — never borders or boxes.",
    "Two signature marks only: the fude ink stroke under focused/active/heading elements, and the vermilion hanko seal (a square badge rotated -2deg) for status.",
    "Near-monochrome washi-and-ink canvas; the single vermilion appears only as a stroke or a seal, never as a fill across the surface.",
    "Buttons fully round; cards radius 24px with a soft grounded shadow and no border; the hanko seal is a near-square 2px chop.",
    "Display face Zen Old Mincho, body Zen Kaku Gothic New, mono IBM Plex Mono in wide uppercase tracking for counts and labels."
  ],
  "visualProfile": {
    "family": "editorial-ink",
    "material": "warm washi paper, near-monochrome",
    "contour": "borderless planes floating on ma",
    "border": "none",
    "underlay": false,
    "grain": true,
    "stickerBadges": true,
    "motion": "ink settling — slow, deliberate, no overshoot",
    "density": "low-to-medium",
    "accents": ["#C4392A", "#324C5C", "#5A7150"]
  },
  "tokens": {
    "background": "#F4EFE6",
    "surface": "#FCFAF4",
    "foreground": "#1A1613",
    "muted": "#877C70",
    "border": "#E5DDCF",
    "primary": "#C4392A",
    "primaryForeground": "#FCFAF4",
    "accent2": "#324C5C",
    "success": "#5A7150",
    "warning": "#B07A1E",
    "error": "#9E2A1F",
    "info": "#3D5A6C",
    "radiusCard": "24px",
    "radiusControl": "16px",
    "radiusButton": "9999px",
    "fontDisplay": "\"Zen Old Mincho\", serif",
    "fontBody": "\"Zen Kaku Gothic New\", sans-serif",
    "fontMono": "\"IBM Plex Mono\", monospace"
  },
  "shots": [
    {
      "id": "booking-plane",
      "title": "Booking confirmation plane",
      "viewport": "desktop",
      "primitives": ["card", "badge", "button", "separator", "tooltip"],
      "composition": "A single borderless paper card floating in generous ma; a Mincho title, a tilted vermilion hanko badge reading CHECKED IN, a muted note line, a hairline separator, and one round primary button.",
      "mustShow": [
        "a borderless card (no border, radius 24px, soft grounded shadow)",
        "the hanko seal badge rotated -2deg in vermilion",
        "exactly one round primary vermilion button",
        "generous surrounding negative space"
      ],
      "avoid": ["any card border", "a rounded pill badge", "glossy or coloured shadow", "a second vermilion fill"],
      "scene": {
        "headline": "Hoshino Ren · Tsuki",
        "description": "Anniversary — plum wine at turndown, no fish stock in the broth.",
        "stats": [
          { "label": "ARRIVAL", "value": "15:00" },
          { "label": "KAISEKI", "value": "17:30 · 2" },
          { "label": "STATUS", "value": "CHECKED IN" }
        ]
      }
    },
    {
      "id": "day-book-table",
      "title": "The ryokan day-book",
      "viewport": "desktop",
      "primitives": ["table", "tabs", "badge", "dropdown-menu", "button"],
      "composition": "A tab row (Today / Tomorrow / This week / Departures) where the active tab carries the fude ink underline; below it a table of arrivals on a paper plane, each status cell a tilted hanko seal, a row action dropdown at the end.",
      "mustShow": [
        "the fude ink stroke under the active tab",
        "hanko seal status cells (Checked in / En route / Late arrival / No show)",
        "table rows separated by a faint ink hairline, not borders",
        "mono uppercase column headers"
      ],
      "avoid": ["boxed tab indicator", "bright status pills", "full grid borders on the table"],
      "scene": {
        "headline": "Arrivals, room by room",
        "description": "Today — a quiet, clear evening.",
        "rows": [
          { "guest": "Hoshino Ren", "room": "Tsuki", "arrival": "15:00", "status": "Checked in" },
          { "guest": "Aoki Mei", "room": "Kaede", "arrival": "15:30", "status": "En route" },
          { "guest": "Tanabe Sho", "room": "Nagi", "arrival": "16:00", "status": "Late arrival" },
          { "guest": "Sasaki Ito", "room": "Matsu", "arrival": "18:00", "status": "No show" }
        ]
      }
    },
    {
      "id": "reservation-form",
      "title": "Take a booking",
      "viewport": "desktop",
      "primitives": ["input", "textarea", "select", "checkbox", "switch", "slider", "button", "tooltip"],
      "composition": "A reservation form on a paper plane: borderless fields with a faint inset ink ring; the focused field shows the vermilion fude stroke and a soft seal-tint halo; preference checkboxes, a switch for the arrival reminder, a warmth slider, and one primary Stamp confirmation button.",
      "mustShow": [
        "borderless inputs with only a faint inset ring",
        "the vermilion focus ring / fude stroke on the active field",
        "vermilion fill on the ON switch and checked boxes",
        "controls sized to their content, evenly padded"
      ],
      "avoid": ["default browser control chrome", "visible field borders", "loose oversized controls"],
      "scene": {
        "headline": "Take a booking",
        "description": "Grind the ink, then make one mark.",
        "fields": [
          { "label": "Guest name", "value": "Hoshino Ren" },
          { "label": "Arrival", "value": "17 Jul · 15:00" },
          { "label": "Room", "value": "Tsuki — corner, garden view" },
          { "label": "Note for the okami", "value": "Anniversary — plum wine at turndown." }
        ]
      }
    },
    {
      "id": "guest-sheet",
      "title": "Guest sheet — dialog and menu",
      "viewport": "desktop",
      "primitives": ["dialog", "sheet", "dropdown-menu", "badge", "button", "separator"],
      "composition": "A guest sheet opening as a paper panel (dialog/sheet) with a Mincho heading underlined by the fude stroke, hanko status badges, a hairline separator, a dropdown of quick actions, and a round primary button — all on the washi ground with room to breathe.",
      "mustShow": [
        "paper surface panel, radius 24px, no border, soft shadow",
        "the fude underline on the panel heading",
        "at least one hanko seal badge",
        "the ink-settle open motion (implied)"
      ],
      "avoid": ["bordered panel", "heavy modal scrim", "pill badges"],
      "scene": {
        "headline": "Guest — Kuroda party",
        "description": "Private room · Yuki + Hana · kaiseki 19:00 · rotenburo held for dusk.",
        "stats": [
          { "label": "PARTY", "value": "5" },
          { "label": "NIGHTS", "value": "2" },
          { "label": "STATUS", "value": "EN ROUTE" }
        ]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Fully round; one vermilion primary per view; the rest ghost (transparent + faint inset ring) or ink (charcoal fill). Centred label, one height." },
    { "primitive": "card", "intent": "Borderless paper plane, radius 24px, soft grounded shadow; never nested; separated from siblings by ma." },
    { "primitive": "input", "intent": "No border; faint inset ink ring; on focus the vermilion ring plus a soft seal-tint halo (the fude focus mark)." },
    { "primitive": "textarea", "intent": "Same as input; taller; resize vertical; content-sized, never loose." },
    { "primitive": "select", "intent": "No border; custom chevron in muted ink; matches input ring and focus behaviour." },
    { "primitive": "dialog", "intent": "Paper surface panel, radius 24px, no border, soft shadow; opens with the slow ink-settle motion; heading carries the fude underline." },
    { "primitive": "sheet", "intent": "Side paper panel on the washi ground; no border; mono uppercase section labels; room to breathe." },
    { "primitive": "tabs", "intent": "The active trigger carries the fude ink stroke underline, never a boxed indicator; inactive triggers are muted ink." },
    { "primitive": "badge", "intent": "The hanko seal — a vermilion square rotated -2deg; ghost (outlined) and ink (charcoal) variants for secondary and pending states." },
    { "primitive": "separator", "intent": "A faint ink hairline used sparingly; prefer space to divide planes." },
    { "primitive": "checkbox", "intent": "Rounded 6px; unchecked shows a faint inset ring; checked fills vermilion with a paper-coloured tick." },
    { "primitive": "switch", "intent": "Round track; OFF is faint ink, ON fills vermilion; paper knob with a soft grounded shadow." },
    { "primitive": "slider", "intent": "Thin round track; the filled portion is vermilion; the thumb is a paper disc ringed in vermilion." },
    { "primitive": "tooltip", "intent": "Small charcoal-ink bubble with paper text; radius 16px; appears with the ink-settle fade, no bounce." },
    { "primitive": "dropdown-menu", "intent": "Paper panel, radius 16px, no border, soft shadow; the active item marked with a short vermilion fude stroke, not a fill bar." },
    { "primitive": "table", "intent": "Rows on paper planes separated by a 1px ink hairline; mono uppercase headers; status cells use the hanko seal; scrolls inside its plane on mobile." }
  ],
  "qualityRules": {
    "do": [
      "Let ma and alignment carry structure before any line or fill.",
      "Reserve the vermilion for the one stroke or seal that earns a pause.",
      "Keep the canvas near-monochrome washi and ink.",
      "Size every control to its content, evenly padded and optically centred.",
      "Pair Mincho display with gothic body and mono labels for clear role separation."
    ],
    "dont": [
      "Draw borders or boxes to group things.",
      "Turn status into bright pills or stamp the seal until it is wallpaper.",
      "Use glossy gradients, heavy shadows, or playful overshoot.",
      "Trap navigation in a floating pill or nest cards.",
      "Let copy sit on the busy part of the ink imagery."
    ]
  }
}