Shizuku

# Shizuku

## Philosophy

Shizuku is a language for the interactive essay: a narrow reading column in a soft Mincho on white paper, where the numbers in the prose are live. Drag the room temperature or the humidity and everything that depends on them recomputes in the browser: the sentence, the dew point, two charts, the minutes a glass sweats and the price list, while a photograph of the same glass crossfades from wet to dry. Soda blue is the hairline and the highlight, one rose bead marks the point that matters, and nothing is boxed.

### Values

- The numbers are live: every figure in the prose that depends on a reading is worked out in the browser and can be dragged.
- One plate, two states: the photograph of the glass is wet or dry because the arithmetic says so.
- Say where each constant comes from: what the counter measured is labelled as ours, the rest is a formula in the margin.
- A narrow column and a clear page: 640px of reading measure, notes beside it, figures beneath.
- One rose action per page, and soda blue for everything quiet.

### Anti-Values

- Pastel washes, gradients and wall-to-wall equal cards.
- Eyebrow numbering and bead glyphs stamped over every section.
- Design-system talk in the copy, and build notes in the footer.
- Invented statistics that do not add up.
- Heavy shadows, thick borders and a second accent.

### Visual Character

- White ground #FFFFFF with warm ink #3A3833 and muted #6F6257, flat.
- A full-width gouache plate of one glass, wet and dry, in the paired Aplat style, with the bead highlights of condensation.
- Zen Old Mincho 600 for the large title and section titles, Zen Old Mincho 400 for prose, Sarabun for notes, tables, controls and chart labels.
- Soda-tint pills #E4F0F6 on every live number, the rose bead #A4505F on the chart point and the one button.
- Charts drawn in the page: a soda dew-point line, a rose glass line, a pale field where the glass sweats.
- Radius from the set 0, 16, 24 and 9999: pills, 16px wells, 24px panels.

### Lineage

> Revised in place from the approved deslop take shizuku-d (Range round 2, 2026-09-29). It keeps the rose accent, soda blue, the lychee-soda counter and its 24 C, 68% morning, and replaces the editorial rail, dewline cards and pastel washes with one interactive essay on white.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F7F5F2` |
| text | `#3A3833` |
| muted | `#6F6257` |
| border | `#D9E8F0` |
| accent | `#A4505F` |
| on_accent | `#FFFFFF` |
| success | `#3C7A5E` |
| warning | `#8E6A1F` |
| error | `#B4524E` |
| info | `#356F8A` |
| soda | `#BFDCEB` |
| soda_tint | `#E4F0F6` |

### Derived

- **Accent Hover**: #8F4453, the rose button on hover
- **Accent Pressed**: #7A3846, the rose button pressed
- **Wet Field**: soda_tint under the sweating stretch of a curve

### Typography

- **Heading Font**: Zen Old Mincho
- **Body Font**: Zen Old Mincho
- **Ui Font**: Sarabun
- **Heading Weight**: 600
- **Body Weight**: 400
- **Button Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display and titles; 0 on Sarabun
- **Base Size**: 17px, fluid to 19px
- **Line Height**: 1.65
- **Scale**: ["14.5px","16px","17px","19px","22px","26px","34px","44px","80px"]
- **Display**: Zen Old Mincho 600 at 44px on phones to 80px on desktop
- **Ui**: Sarabun 400 and 500 for captions, notes, tables, controls and chart labels, never below 14px
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;600&family=Sarabun:wght@400;500&display=swap

### Radii

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

### Shadows

- **None**: the page is flat
- **Lift**: 0 1px 2px rgba(58,56,51,.10), 0 14px 32px -12px rgba(58,56,51,.25), only on an open menu or dialog

### Spacing

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

### Surfaces

- **Treatment**: white paper, one pale warm well
- **Material**: A white page with warm-ink text. #F7F5F2 is the only filled surface: figure panels, input wells and the plate's mat. Soda tint #E4F0F6 marks a live number and the sweating field of a chart.
- **Card Style**: No cards. A figure panel is the one filled block, radius 24, no border and no shadow. Everything else sits straight on the paper.
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: One soda-blue hairline #D9E8F0, only between table rows and above the footer. Controls and panels carry no border.

### Motion

- **Duration**: 150 to 450ms
- **Easing**: ease
- **Philosophy**: The plate crossfades between the wet and dry drawing in 450ms; a live figure tints on hover and drag. The settled 24 C, 68% morning renders with no script, and prefers-reduced-motion removes every transition.

### Controls

- **Height**: 50px button, 52px input, 40px quiet choice
- **Radius**: 9999px buttons and choices, 16px inputs and selects, 24px panels

## Rules

### Composition

- Build a page as one narrow reading column with live figures in the prose; notes sit beside the paragraph on desktop and under it on phones.
- Put one photograph of the subject full width under the opening, and let it change state with the figures.
- Draw each chart inside a single #F7F5F2 panel with its controls beside it and a caption beneath that says how to read it.
- Give the page one rose action, near the end.

### Hierarchy

- The title is Zen Old Mincho 600 at 44 to 80px; section titles 26 to 34px; prose 17 to 19px; notes and captions in Sarabun 16px muted.
- A worked figure is info blue; this-morning's reading is a soda-tint pill; the point that matters is the rose bead.
- State is a word with a dot in a semantic ink; colour is never the only signal.

### Density

Calm reading density: 48 to 80px between sections, 640px measure, table rows 12px padded over a single hairline, one button.

### Signature Patterns

- Live figures: a soda-tint pill inside a sentence that drags (and answers arrow keys); the sentence, charts, table and plate all recompute from it.
- Wet plate, dry plate: the same drawing twice, crossfaded by how far the glass sits under the dew point.
- The bead: a 12 to 16px rose circle with one white highlight, placed on the single point of a chart or the one action.
- Notes in the margin: numbered formulas in Sarabun 16px muted beside the paragraph they justify.
- Source line: the page states which numbers it works out and which are the counter's own.

## Layout

### Grid

- **Type**: interactive essay in a narrow column
- **Max Width**: 1120px frame, 640px reading measure, centred above 1440px
- **Gutter**: clamp(20px,4vw,48px)
- **Column Behavior**: Paragraph and note sit as minmax(0,640px) minmax(0,1fr); figures are a chart beside a 260px control stack; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 48 to 80px
- **Card Gap**: no cards; 12px table rows, 22 to 28px between controls
- **Content Padding**: the figure panel pads 20 to 36px
- **Approach**: The white page is the table; the one pale panel holds the charts.

### Density

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

### Responsive

At 1100px and below the frame is 760px and notes fall under their paragraph; figure controls become a two-column grid. At 600px everything is one column, the nav keeps only the last link and the table drops two columns. Text never falls below 17px for prose or 14px for chart labels, and above 1440px the content centres at 1120px.

### Breakpoints

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

## Guidance

### Do

- Work out every number that depends on a reading in the browser, and say which constants are yours.
- Let one photograph change state with the figures.
- Keep the settled morning (24 C, 68%) as the no-script page.
- Use the soda-tint pill for live figures and the rose bead for the one point that matters.
- Set prose in Zen Old Mincho at 17px or more and notes in Sarabun at 16px.
- Keep one rose button per page and write what it does.
- Make every control explicit: pills, 16px wells, a 2px info-blue focus ring.

### Don't

- Don't add pastel washes, gradients or shadows to the page.
- Don't tile equal cards or stamp numbered eyebrows over sections.
- Don't borrow a rail, a stat band or a slogan pull quote.
- Don't put a figure in the copy that the page does not compute or source.
- Don't put build or design-system notes in the footer.
- Don't use rose for anything but the action and the bead.

### Accessibility

AA throughout: ink #3A3833 on white is 11.5:1 and muted #6F6257 is 5.9:1; the rose button label #FFFFFF on #A4505F is 5.6:1; info #356F8A is 5.5:1 and success #3C7A5E 5.1:1 on white. Live figures are role=slider with arrow-key control and aria-valuenow, ranges are real inputs, the readout is aria-live, charts are decorative with the figures repeated in the text. Focus is a 2px info-blue outline at 4px. The page renders finished with no script, and prefers-reduced-motion removes every transition.

### Usage Context

Explainers, product notes and journals where a few numbers drive the story: food and drink counters, small shops, science of everyday things, pricing and planning pages that should be read and played with.

## Imagery Direction

### Pairs With

sirop

### Art Style Id

en-019ef5c5-181b-7143-ab05-8789694d61f2

### Summary

Flat opaque gouache prints in Aplat's risograph register: one tall glass of pale pink lychee soda on a white coaster against a soda-blue wall, drawn twice (beaded with condensation, then dry) so the page can crossfade between them.

### Subjects

- the glass of soda, wet
- the same glass, dry
- two lychees beside the glass
- a paper coaster on pale wood

### Usage

One plate under the opening, full width, painted with var(--hero-image) at 53% 50% and a dry twin layered over it; fluid height from 300px up. Inner pages carry no further illustration.

### Avoid

Text or letters in the picture, gradients, photoreal glass, glossy 3D, a second subject, a scrim or panel over the plate.

---
version: "alpha"
name: "Shizuku"
description: "Shizuku is a language for the interactive essay: a narrow reading column in a soft Mincho on white paper, where the numbers in the prose are live. Drag the room temperature or the humidity and everything that depends on them recomputes i..."
colors:
  bg: "#FFFFFF"
  surface: "#F7F5F2"
  text: "#3A3833"
  muted: "#6F6257"
  border: "#D9E8F0"
  accent: "#A4505F"
  on_accent: "#FFFFFF"
  success: "#3C7A5E"
  warning: "#8E6A1F"
  error: "#B4524E"
  info: "#356F8A"
  soda: "#BFDCEB"
  soda_tint: "#E4F0F6"
typography:
  headline-lg:
    fontFamily: "Zen Old Mincho"
    fontSize: "2.5rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Zen Old Mincho"
    fontSize: "1.75rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Old Mincho"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Zen Old Mincho"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "72px"
  step-8: "96px"
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-soda:
    backgroundColor: "{colors.soda}"
  color-reference-soda_tint:
    backgroundColor: "{colors.soda_tint}"
  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"
---

# Shizuku

## Overview

Shizuku is a language for the interactive essay: a narrow reading column in a soft Mincho on white paper, where the numbers in the prose are live. Drag the room temperature or the humidity and everything that depends on them recomputes in the browser: the sentence, the dew point, two charts, the minutes a glass sweats and the price list, while a photograph of the same glass crossfades from wet to dry. Soda blue is the hairline and the highlight, one rose bead marks the point that matters, and nothing is boxed.

### Values

- The numbers are live: every figure in the prose that depends on a reading is worked out in the browser and can be dragged.
- One plate, two states: the photograph of the glass is wet or dry because the arithmetic says so.
- Say where each constant comes from: what the counter measured is labelled as ours, the rest is a formula in the margin.
- A narrow column and a clear page: 640px of reading measure, notes beside it, figures beneath.
- One rose action per page, and soda blue for everything quiet.

### Anti-Values

- Pastel washes, gradients and wall-to-wall equal cards.
- Eyebrow numbering and bead glyphs stamped over every section.
- Design-system talk in the copy, and build notes in the footer.
- Invented statistics that do not add up.
- Heavy shadows, thick borders and a second accent.

### Visual Character

- White ground #FFFFFF with warm ink #3A3833 and muted #6F6257, flat.
- A full-width gouache plate of one glass, wet and dry, in the paired Aplat style, with the bead highlights of condensation.
- Zen Old Mincho 600 for the large title and section titles, Zen Old Mincho 400 for prose, Sarabun for notes, tables, controls and chart labels.
- Soda-tint pills #E4F0F6 on every live number, the rose bead #A4505F on the chart point and the one button.
- Charts drawn in the page: a soda dew-point line, a rose glass line, a pale field where the glass sweats.
- Radius from the set 0, 16, 24 and 9999: pills, 16px wells, 24px panels.

### Lineage

> Revised in place from the approved deslop take shizuku-d (Range round 2, 2026-09-29). It keeps the rose accent, soda blue, the lychee-soda counter and its 24 C, 68% morning, and replaces the editorial rail, dewline cards and pastel washes with one interactive essay on white.

## 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 | `#FFFFFF` |
| surface | `#F7F5F2` |
| text | `#3A3833` |
| muted | `#6F6257` |
| border | `#D9E8F0` |
| accent | `#A4505F` |
| on_accent | `#FFFFFF` |
| success | `#3C7A5E` |
| warning | `#8E6A1F` |
| error | `#B4524E` |
| info | `#356F8A` |
| soda | `#BFDCEB` |
| soda_tint | `#E4F0F6` |

## Typography

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

- **Headline-Lg**: Zen Old Mincho, 2.5rem, weight 700, line-height 1.1.
- **Headline-Md**: Zen Old Mincho, 1.75rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Old Mincho, 16px, weight 400, line-height 1.5.
- **Label-Md**: Zen Old Mincho, 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**: `72px`
- **Step-8**: `96px`

### Grid

- **Type**: interactive essay in a narrow column
- **Max Width**: 1120px frame, 640px reading measure, centred above 1440px
- **Gutter**: clamp(20px,4vw,48px)
- **Column Behavior**: Paragraph and note sit as minmax(0,640px) minmax(0,1fr); figures are a chart beside a 260px control stack; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 48 to 80px
- **Card Gap**: no cards; 12px table rows, 22 to 28px between controls
- **Content Padding**: the figure panel pads 20 to 36px
- **Approach**: The white page is the table; the one pale panel holds the charts.

### Density

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

### Responsive

At 1100px and below the frame is 760px and notes fall under their paragraph; figure controls become a two-column grid. At 600px everything is one column, the nav keeps only the last link and the table drops two columns. Text never falls below 17px for prose or 14px for chart labels, and above 1440px the content centres at 1120px.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **None**: the page is flat
- **Lift**: 0 1px 2px rgba(58,56,51,.10), 0 14px 32px -12px rgba(58,56,51,.25), only on an open menu or dialog

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: white paper, one pale warm well
- **Material**: A white page with warm-ink text. #F7F5F2 is the only filled surface: figure panels, input wells and the plate's mat. Soda tint #E4F0F6 marks a live number and the sweating field of a chart.
- **Card Style**: No cards. A figure panel is the one filled block, radius 24, no border and no shadow. Everything else sits straight on the paper.
- **Bg Pattern**: none

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: One soda-blue hairline #D9E8F0, only between table rows and above the footer. Controls and panels carry no border.

## Components

### Composition

- Build a page as one narrow reading column with live figures in the prose; notes sit beside the paragraph on desktop and under it on phones.
- Put one photograph of the subject full width under the opening, and let it change state with the figures.
- Draw each chart inside a single #F7F5F2 panel with its controls beside it and a caption beneath that says how to read it.
- Give the page one rose action, near the end.

### Hierarchy

- The title is Zen Old Mincho 600 at 44 to 80px; section titles 26 to 34px; prose 17 to 19px; notes and captions in Sarabun 16px muted.
- A worked figure is info blue; this-morning's reading is a soda-tint pill; the point that matters is the rose bead.
- State is a word with a dot in a semantic ink; colour is never the only signal.

### Density

Calm reading density: 48 to 80px between sections, 640px measure, table rows 12px padded over a single hairline, one button.

### Signature Patterns

- Live figures: a soda-tint pill inside a sentence that drags (and answers arrow keys); the sentence, charts, table and plate all recompute from it.
- Wet plate, dry plate: the same drawing twice, crossfaded by how far the glass sits under the dew point.
- The bead: a 12 to 16px rose circle with one white highlight, placed on the single point of a chart or the one action.
- Notes in the margin: numbered formulas in Sarabun 16px muted beside the paragraph they justify.
- Source line: the page states which numbers it works out and which are the counter's own.

## 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-01a0fe74-5718-7400-8fe2-718962eeea8e/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0fe74-5718-7400-8fe2-718962eeea8e/shadcn.json` (registry theme), `/language/en-01a0fe74-5718-7400-8fe2-718962eeea8e/shadcn-components.md` (component recipes) and `/language/en-01a0fe74-5718-7400-8fe2-718962eeea8e/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 Work out every number that depends on a reading in the browser, and say which constants are yours.
- Do Let one photograph change state with the figures.
- Do Keep the settled morning (24 C, 68%) as the no-script page.
- Do Use the soda-tint pill for live figures and the rose bead for the one point that matters.
- Do Set prose in Zen Old Mincho at 17px or more and notes in Sarabun at 16px.
- Do Keep one rose button per page and write what it does.
- Do Make every control explicit: pills, 16px wells, a 2px info-blue focus ring.
- Don't Don't add pastel washes, gradients or shadows to the page.
- Don't Don't tile equal cards or stamp numbered eyebrows over sections.
- Don't Don't borrow a rail, a stat band or a slogan pull quote.
- Don't Don't put a figure in the copy that the page does not compute or source.
- Don't Don't put build or design-system notes in the footer.
- Don't Don't use rose for anything but the action and the bead.

### Accessibility

AA throughout: ink #3A3833 on white is 11.5:1 and muted #6F6257 is 5.9:1; the rose button label #FFFFFF on #A4505F is 5.6:1; info #356F8A is 5.5:1 and success #3C7A5E 5.1:1 on white. Live figures are role=slider with arrow-key control and aria-valuenow, ranges are real inputs, the readout is aria-live, charts are decorative with the figures repeated in the text. Focus is a 2px info-blue outline at 4px. The page renders finished with no script, and prefers-reduced-motion removes every transition.

### Usage Context

Explainers, product notes and journals where a few numbers drive the story: food and drink counters, small shops, science of everyday things, pricing and planning pages that should be read and played with.

## Imagery Direction

### Pairs With

sirop

### Art Style Id

en-019ef5c5-181b-7143-ab05-8789694d61f2

### Summary

Flat opaque gouache prints in Aplat's risograph register: one tall glass of pale pink lychee soda on a white coaster against a soda-blue wall, drawn twice (beaded with condensation, then dry) so the page can crossfade between them.

### Subjects

- the glass of soda, wet
- the same glass, dry
- two lychees beside the glass
- a paper coaster on pale wood

### Usage

One plate under the opening, full width, painted with var(--hero-image) at 53% 50% and a dry twin layered over it; fluid height from 300px up. Inner pages carry no further illustration.

### Avoid

Text or letters in the picture, gradients, photoreal glass, glossy 3D, a second subject, a scrim or panel over the plate.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shizuku",
  "type": "registry:theme",
  "title": "Shizuku shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#3A3833",
      "card": "#F7F5F2",
      "card-foreground": "#3A3833",
      "popover": "#F7F5F2",
      "popover-foreground": "#3A3833",
      "primary": "#3A3833",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6F6257",
      "muted-foreground": "#3A3833",
      "accent": "#A4505F",
      "accent-foreground": "#ffffff",
      "destructive": "#B4524E",
      "border": "#D9E8F0",
      "input": "#D9E8F0",
      "ring": "#A4505F",
      "chart-1": "#3A3833",
      "chart-2": "#f4f4f5",
      "chart-3": "#A4505F",
      "chart-4": "#3C7A5E",
      "chart-5": "#8E6A1F",
      "sidebar": "#F7F5F2",
      "sidebar-foreground": "#3A3833",
      "sidebar-primary": "#3A3833",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#356F8A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D9E8F0",
      "sidebar-ring": "#A4505F",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#3A3833",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#A4505F",
      "accent-foreground": "#ffffff",
      "destructive": "#B4524E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#A4505F",
      "chart-1": "#3A3833",
      "chart-2": "#f4f4f5",
      "chart-3": "#A4505F",
      "chart-4": "#3C7A5E",
      "chart-5": "#8E6A1F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3A3833",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#A4505F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#A4505F",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0fe74-5718-7400-8fe2-718962eeea8e",
    "slug": "shizuku",
    "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",
        "soda",
        "soda_tint",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "accent_hover",
        "accent_pressed",
        "wet_field"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "display",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "scale",
        "ui",
        "ui_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lift",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius"
      ]
    }
  }
}
```