Suzuri

# Suzuri

## Philosophy

Suzuri is the inkstone: a calm interface language that grinds structure from ma, the room left around things, instead of borders. One huge Mincho word, one wet fude stroke and a single vermilion hanko are the whole voice; the rest is washi paper, sumi ink and air. The first screen is a sumi-e plate of three stones and a title, and everything under it stays this quiet.

### Values

- intentional emptiness (ma) as structure
- one deliberate mark over many
- paper-and-ink tactility, near-monochrome
- calm operational clarity
- dark inks that read as words

### Anti-Values

- borders and boxes as structure
- status as bright pill wallpaper
- grain, WebGL and gradients
- monospace and tracked uppercase as ornament
- motion for spectacle

### Visual Character

- borderless washi planes #FCFAF4 at radius 16 on a soft grounded shadow, separated by ma
- a huge Zen Old Mincho 900 title over a sumi-e plate of stones, with one fude stroke beneath it
- the fude stroke fading in under the chosen word, the focused field or the heading at hand, the only linework
- a 56px vermilion hanko at a 2 degree tilt in three states, shown once
- Mincho for titles over a quiet gothic for work and labels

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EFE6` |
| surface | `#FCFAF4` |
| text | `#1A1613` |
| muted | `#6A5F54` |
| border | `#E5DDCF` |
| accent | `#C4392A` |
| accent_2 | `#324C5C` |
| on_accent | `#FCFAF4` |
| success | `#4F6745` |
| warning | `#8A5E10` |
| error | `#9E2A1F` |
| info | `#3D5A6C` |

### Typography

- **Heading Font**: "Zen Old Mincho", serif
- **Body Font**: "Zen Kaku Gothic New", sans-serif
- **Heading Weight**: 700
- **Body Weight**: 400
- **Label Weight**: 500
- **Display Weight**: 900
- **Heading Transform**: none
- **Letter Spacing**: 0.01em on body, -0.02em on display and headings, 0.08em on labels
- **Base Size**: 17px
- **Line Height**: 1.75
- **Scale**: ["17px","19px","24px","34px","56px","86px","120px","340px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;700;900&display=swap

### Radii

- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 2px 6px rgba(26,22,19,0.05)
- **Md**: 0 10px 24px -12px rgba(26,22,19,0.3)
- **Lg**: 0 26px 60px -20px rgba(26,22,19,0.18)

### Spacing

- **Base**: 8px
- **Scale**: 8px, 16px, 24px, 40px, 64px, 96px, 160px

### Surfaces

- **Treatment**: flat washi ground with raised paper planes: surface #FCFAF4 at radius 16 on a soft grounded shadow, no grain, no gradients
- **Card Style**: borderless paper planes on a soft shadow, parted by ma, one plane per idea, never nested
- **Bg Pattern**: none; the ground is flat washi #F4EFE6 and the hero is a sumi-e ink wash painted with var(--hero-image)

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: structure comes from ma and alignment; the only linework is the wet fude stroke that pools under the live control, focused field or heading

### Motion

- **Duration**: 400ms
- **Easing**: ease
- **Philosophy**: ink settling into paper: a stroke fades in under the chosen word, nothing bounces; the settled page renders with no JavaScript and prefers-reduced-motion removes every transition

### Controls

- **Height**: 48px
- **Radius**: 16px
- **Well**: bg washi inside a paper plane

## Rules

### Composition

- Compose on one washi ground with at most one paper plane per idea, each floating on ma: the empty room around a plane is what groups and separates.
- Open with a single huge Mincho title and one fude stroke under it, then one sentence and one button; leave the rest of the first screen to the ink wash.
- Two-column heads use 5fr and 6fr: the idea in prose on the left, its demonstration on one plane on the right. Stack to one column below 1200px.
- No top bar, no table of contents, no footer grid, no decorative sidelines. A one-line sign-off is enough.

### Hierarchy

- Zen Old Mincho 900 for the title (96 to 340px), 700 for headings (34 to 76px), both at -0.02em.
- Zen Kaku Gothic New 400 at 17 to 19px, line height 1.75, carries the work; labels and counts are the same gothic at 500, 17px, tracking 0.08em, in sentence case. No monospace and no tracked uppercase.
- Emphasis is position, space and one stroke; muted #6A5F54 is for the second tone of a sentence, never for the only tone.
- Semantic colours are dark inks (pine, bronze, crimson, slate) that read as words, always with a label, never as pills.

### Density

Low. Planes pad 24 to 48px, sections sit 72 to 160px apart, clusters 64px, planes 96px; controls are 48px tall and prose is held to about 46 characters.

### Signature Patterns

- The fude stroke: one wet brush line, drawn as an SVG path, that fades in under the chosen word, the focused field or the heading at hand. It is the only linework on the page.
- The hanko: one 56px vermilion square, rotated 2 degrees, with a single Mincho character, in three states from one square: filled vermilion (confirmed), paper with a vermilion character (pending), ink (archived). One seal set per view.
- Paper planes: #FCFAF4 at radius 16 on a long soft shadow (0 26px 60px -20px at 18%), borderless, floating on the #F4EFE6 ground.
- Ink wash imagery: sumi-e in the Kasumi hand, with the paper graded to #F4EFE6 so the picture melts into the page with no seam.

## Layout

### Grid

- **Type**: editorial planes on a washi ground
- **Max Width**: 1320px content, centred above 1440px
- **Gutter**: clamp(20px, 5vw, 96px)
- **Column Behavior**: Two-column heads use 5fr and 6fr with a clamp(40px, 7vw, 120px) gap; below 1200px they stack to one column; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 72 to 160px, scaling with the viewport
- **Card Gap**: 96px between planes, 64px between clusters inside one
- **Content Padding**: 24 to 48px inside a plane
- **Approach**: Whitespace is structure. Nothing is boxed; the room left around each plane says what belongs together.

### Density

- **Default**: low
- **Low**: {"button_height":"48px","input_height":"52px","row_height":"56 to 64px"}

### Responsive

1200px and up is the full spread: huge title, two-column heads, the ink wash behind. 601 to 1199px is its own band with one column, a wider plane and the wash cropped toward the stones. 390px keeps the title at 96px or more, a single column, the wash scaled to 230% and anchored right, and tables that scroll inside their plane. Above 1440px the content caps and centres; only the hero runs full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Guidance

### Do

- Let ma and alignment carry structure before any line or fill.
- Reserve vermilion for the one hanko or stroke that earns a pause, once per view.
- Pair Zen Old Mincho display with Zen Kaku Gothic New body and labels; a second family is enough.
- Keep planes borderless with the soft grounded shadow and generous padding.
- Grade ink-wash imagery to the page paper so it meets the ground with no seam.
- Style every control explicitly: radius 16 wells, a 2px slate focus outline at 4px offset, a fude stroke for the chosen state.

### Don't

- Don't draw borders, hairlines or boxes to group things.
- Don't repeat the hanko as wallpaper or use it as a bright pill.
- Don't add grain, WebGL grounds, gradients, glow or heavy shadows.
- Don't use monospace, tracked uppercase labels, numeral eyebrows or fixed corner HUDs.
- Don't add a top bar, a footer grid or a colophon; keep the page nearly empty.
- Don't let copy sit on the dark part of the ink wash.

### Accessibility

AA and better on washi: ink #1A1613 is 15.7:1, muted #6A5F54 is 5.4:1 and vermilion #C4392A is 4.6:1 on #F4EFE6; the on-accent label #FCFAF4 on vermilion is 5.0:1. Semantic inks (pine #4F6745, bronze #8A5E10, crimson #9E2A1F, slate #3D5A6C) all clear 4.9:1 on paper and always carry a word. Focus is a 2px slate outline at 4px offset. The settled page renders with no JavaScript and every transition stops under prefers-reduced-motion.

### Usage Context

Calm operational tools, notes, reading and writing apps, studios and any product that should feel quiet, spacious and unhurried.

## Imagery Direction

### Pairs With

kasumi

### Art Style Id

en-019efaad-7849-7591-98d4-f757047baf79

### Summary

Sumi-e ink wash on warm washi in the Kasumi hand: any subject reduced to a few confident strokes with graded bleed and dry-brush kasure, floated in vast negative space, sealed with one small vermilion hanko. The paper is graded to #F4EFE6 so the picture melts into the page. Monochrome ink plus the single seal; copy never sits on the dark part of the ink.

### Subjects

- three smooth river stones with one hanko
- an inkstone with a pool of wet ink and a short ink stick laid across it
- the empty washi ground

### Usage

One full-bleed hero per landing painted with var(--hero-image): three stones entering from the lower right, the upper left left open for the title. One quiet plate (the inkstone) may sit inside a section. Inside pages carry no illustration.

### Avoid

Copy over the dark ink, a visible paper seam, colour other than the single vermilion seal, photography, 3D renders, grain and gradients.

---
version: "alpha"
name: "Suzuri"
description: "Suzuri is the inkstone: a calm interface language that grinds structure from ma, the room left around things, instead of borders. One huge Mincho word, one wet fude stroke and a single vermilion hanko are the whole voice; the rest is was..."
colors:
  bg: "#F4EFE6"
  surface: "#FCFAF4"
  text: "#1A1613"
  muted: "#6A5F54"
  border: "#E5DDCF"
  accent: "#C4392A"
  accent_2: "#324C5C"
  on_accent: "#FCFAF4"
  success: "#4F6745"
  warning: "#8A5E10"
  error: "#9E2A1F"
  info: "#3D5A6C"
typography:
  headline-lg:
    fontFamily: "\"Zen Old Mincho\", serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "\"Zen Old Mincho\", serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "\"Zen Kaku Gothic New\", sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "\"Zen Kaku Gothic New\", sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
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-accent_2:
    backgroundColor: "{colors.accent_2}"
  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: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Suzuri

## Overview

Suzuri is the inkstone: a calm interface language that grinds structure from ma, the room left around things, instead of borders. One huge Mincho word, one wet fude stroke and a single vermilion hanko are the whole voice; the rest is washi paper, sumi ink and air. The first screen is a sumi-e plate of three stones and a title, and everything under it stays this quiet.

### Values

- intentional emptiness (ma) as structure
- one deliberate mark over many
- paper-and-ink tactility, near-monochrome
- calm operational clarity
- dark inks that read as words

### Anti-Values

- borders and boxes as structure
- status as bright pill wallpaper
- grain, WebGL and gradients
- monospace and tracked uppercase as ornament
- motion for spectacle

### Visual Character

- borderless washi planes #FCFAF4 at radius 16 on a soft grounded shadow, separated by ma
- a huge Zen Old Mincho 900 title over a sumi-e plate of stones, with one fude stroke beneath it
- the fude stroke fading in under the chosen word, the focused field or the heading at hand, the only linework
- a 56px vermilion hanko at a 2 degree tilt in three states, shown once
- Mincho for titles over a quiet gothic for work and labels

## 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 | `#F4EFE6` |
| surface | `#FCFAF4` |
| text | `#1A1613` |
| muted | `#6A5F54` |
| border | `#E5DDCF` |
| accent | `#C4392A` |
| accent_2 | `#324C5C` |
| on_accent | `#FCFAF4` |
| success | `#4F6745` |
| warning | `#8A5E10` |
| error | `#9E2A1F` |
| info | `#3D5A6C` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;700;900&display=swap

- **Headline-Lg**: "Zen Old Mincho", serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: "Zen Old Mincho", serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: "Zen Kaku Gothic New", sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: "Zen Kaku Gothic New", sans-serif, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`

### Grid

- **Type**: editorial planes on a washi ground
- **Max Width**: 1320px content, centred above 1440px
- **Gutter**: clamp(20px, 5vw, 96px)
- **Column Behavior**: Two-column heads use 5fr and 6fr with a clamp(40px, 7vw, 120px) gap; below 1200px they stack to one column; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 72 to 160px, scaling with the viewport
- **Card Gap**: 96px between planes, 64px between clusters inside one
- **Content Padding**: 24 to 48px inside a plane
- **Approach**: Whitespace is structure. Nothing is boxed; the room left around each plane says what belongs together.

### Density

- **Default**: low
- **Low**: {"button_height":"48px","input_height":"52px","row_height":"56 to 64px"}

### Responsive

1200px and up is the full spread: huge title, two-column heads, the ink wash behind. 601 to 1199px is its own band with one column, a wider plane and the wash cropped toward the stones. 390px keeps the title at 96px or more, a single column, the wash scaled to 230% and anchored right, and tables that scroll inside their plane. Above 1440px the content caps and centres; only the hero runs full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 6px rgba(26,22,19,0.05)
- **Md**: 0 10px 24px -12px rgba(26,22,19,0.3)
- **Lg**: 0 26px 60px -20px rgba(26,22,19,0.18)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: flat washi ground with raised paper planes: surface #FCFAF4 at radius 16 on a soft grounded shadow, no grain, no gradients
- **Card Style**: borderless paper planes on a soft shadow, parted by ma, one plane per idea, never nested
- **Bg Pattern**: none; the ground is flat washi #F4EFE6 and the hero is a sumi-e ink wash painted with var(--hero-image)

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: structure comes from ma and alignment; the only linework is the wet fude stroke that pools under the live control, focused field or heading

## Components

### Composition

- Compose on one washi ground with at most one paper plane per idea, each floating on ma: the empty room around a plane is what groups and separates.
- Open with a single huge Mincho title and one fude stroke under it, then one sentence and one button; leave the rest of the first screen to the ink wash.
- Two-column heads use 5fr and 6fr: the idea in prose on the left, its demonstration on one plane on the right. Stack to one column below 1200px.
- No top bar, no table of contents, no footer grid, no decorative sidelines. A one-line sign-off is enough.

### Hierarchy

- Zen Old Mincho 900 for the title (96 to 340px), 700 for headings (34 to 76px), both at -0.02em.
- Zen Kaku Gothic New 400 at 17 to 19px, line height 1.75, carries the work; labels and counts are the same gothic at 500, 17px, tracking 0.08em, in sentence case. No monospace and no tracked uppercase.
- Emphasis is position, space and one stroke; muted #6A5F54 is for the second tone of a sentence, never for the only tone.
- Semantic colours are dark inks (pine, bronze, crimson, slate) that read as words, always with a label, never as pills.

### Density

Low. Planes pad 24 to 48px, sections sit 72 to 160px apart, clusters 64px, planes 96px; controls are 48px tall and prose is held to about 46 characters.

### Signature Patterns

- The fude stroke: one wet brush line, drawn as an SVG path, that fades in under the chosen word, the focused field or the heading at hand. It is the only linework on the page.
- The hanko: one 56px vermilion square, rotated 2 degrees, with a single Mincho character, in three states from one square: filled vermilion (confirmed), paper with a vermilion character (pending), ink (archived). One seal set per view.
- Paper planes: #FCFAF4 at radius 16 on a long soft shadow (0 26px 60px -20px at 18%), borderless, floating on the #F4EFE6 ground.
- Ink wash imagery: sumi-e in the Kasumi hand, with the paper graded to #F4EFE6 so the picture melts into the page with no seam.

## 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-01a101b2-de67-7422-83c4-202530dfda14/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a101b2-de67-7422-83c4-202530dfda14/shadcn.json` (registry theme), `/language/en-01a101b2-de67-7422-83c4-202530dfda14/shadcn-components.md` (component recipes) and `/language/en-01a101b2-de67-7422-83c4-202530dfda14/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 Let ma and alignment carry structure before any line or fill.
- Do Reserve vermilion for the one hanko or stroke that earns a pause, once per view.
- Do Pair Zen Old Mincho display with Zen Kaku Gothic New body and labels; a second family is enough.
- Do Keep planes borderless with the soft grounded shadow and generous padding.
- Do Grade ink-wash imagery to the page paper so it meets the ground with no seam.
- Do Style every control explicitly: radius 16 wells, a 2px slate focus outline at 4px offset, a fude stroke for the chosen state.
- Don't Don't draw borders, hairlines or boxes to group things.
- Don't Don't repeat the hanko as wallpaper or use it as a bright pill.
- Don't Don't add grain, WebGL grounds, gradients, glow or heavy shadows.
- Don't Don't use monospace, tracked uppercase labels, numeral eyebrows or fixed corner HUDs.
- Don't Don't add a top bar, a footer grid or a colophon; keep the page nearly empty.
- Don't Don't let copy sit on the dark part of the ink wash.

### Accessibility

AA and better on washi: ink #1A1613 is 15.7:1, muted #6A5F54 is 5.4:1 and vermilion #C4392A is 4.6:1 on #F4EFE6; the on-accent label #FCFAF4 on vermilion is 5.0:1. Semantic inks (pine #4F6745, bronze #8A5E10, crimson #9E2A1F, slate #3D5A6C) all clear 4.9:1 on paper and always carry a word. Focus is a 2px slate outline at 4px offset. The settled page renders with no JavaScript and every transition stops under prefers-reduced-motion.

### Usage Context

Calm operational tools, notes, reading and writing apps, studios and any product that should feel quiet, spacious and unhurried.

## Imagery Direction

### Pairs With

kasumi

### Art Style Id

en-019efaad-7849-7591-98d4-f757047baf79

### Summary

Sumi-e ink wash on warm washi in the Kasumi hand: any subject reduced to a few confident strokes with graded bleed and dry-brush kasure, floated in vast negative space, sealed with one small vermilion hanko. The paper is graded to #F4EFE6 so the picture melts into the page. Monochrome ink plus the single seal; copy never sits on the dark part of the ink.

### Subjects

- three smooth river stones with one hanko
- an inkstone with a pool of wet ink and a short ink stick laid across it
- the empty washi ground

### Usage

One full-bleed hero per landing painted with var(--hero-image): three stones entering from the lower right, the upper left left open for the title. One quiet plate (the inkstone) may sit inside a section. Inside pages carry no illustration.

### Avoid

Copy over the dark ink, a visible paper seam, colour other than the single vermilion seal, photography, 3D renders, grain and gradients.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suzuri",
  "type": "registry:theme",
  "title": "Suzuri shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "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": "#6A5F54",
      "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": "#4F6745",
      "chart-5": "#8A5E10",
      "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": "#4F6745",
      "chart-5": "#8A5E10",
      "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"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a101b2-de67-7422-83c4-202530dfda14",
    "slug": "suzuri",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "display_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "label_weight",
        "letter_spacing",
        "line_height",
        "scale"
      ],
      "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"
      ],
      "controls": [
        "height",
        "radius",
        "well"
      ]
    }
  }
}
```