Celadon

# Celadon

## Philosophy

Celadon is a contemplative interface language for gardens, archives and other places kept slowly. The glaze itself is the ground: a hand-drawn network of craze lines spreads under the first screen, and every crack is a real, logged event. The x axis is the year, the y axis the hour of the day, and one crack is one visit set on its date at the hour it happened. The smooth glaze is the part of the year still to come, a day nobody came is left smooth, and today's cracks are drawn in white. Content sits inside the field on a cool jade-grey ground in Shippori Mincho and Zen Kaku Gothic New, with deep jade for the one action and a single persimmon bar for the season in fruit.

### Values

- The ground is the data: every crack is a logged visit, every staple a dated repair, and a day nobody came is left smooth.
- Content sits inside the field. The glaze is the first screen, not a backdrop behind a card.
- One season-mark: a single persimmon bar for what is in fruit now, and nothing else warm.
- Square and quiet: radius 0 on every rectangle, no borders, no shadows except an open menu or dialog.
- Say what happened. Copy states facts (2,003 visits since April), never describes the design.

### Anti-Values

- Decoration: a crack that is not a record, a bloom, a gradient pool or a blurred wash.
- Boxing the glaze into tiles, season cards or pill tags.
- Persimmon on more than one thing at a time.
- Default fonts, drop shadows and rounded cards.
- Copy about the design system instead of the garden.

### Visual Character

- A cool jade-grey #D3DDD2 glaze with a fine network of iron-dark craze lines.
- Today's cracks in pure white, the future as smooth open glaze.
- Iron staples (a small bracket glyph) for dated repairs, as on the Bakohan bowl.
- Deep jade #335C4A for the one filled button and links; persimmon #C9582B as a 5px season bar.
- Shippori Mincho for the one large line and titles; Zen Kaku Gothic New for everything read.
- Square wells, rows without rules, and generous air around every group.

### Lineage

> Celadon began as a warm bisque garden of glaze pools and stepping stones. This revision is the approved texture-field take: it keeps the celadon glaze world, the jade and persimmon palette and the Stoneworks Garden keepers' pass, and replaces tiles and pools with a crazed glaze whose cracks are real visits.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#D3DDD2` |
| surface | `#C3D1C1` |
| text | `#28251F` |
| muted | `#48523F` |
| border | `#B3C2B1` |
| accent | `#335C4A` |
| on_accent | `#FFFFFF` |
| success | `#2E5E2D` |
| warning | `#6B4812` |
| error | `#8A3020` |
| info | `#245866` |
| season | `#C9582B` |

### Derived

- **Stain**: a crack darkens with age: stroke-opacity .92 for April down to .30 for today's weight, ink #28251F on the glaze; today's cracks are #FFFFFF
- **Row Hover**: color-mix(in srgb, var(--surface) 55%, transparent)
- **Lift**: 0 1px 2px rgb(40 37 31 / .25), 0 16px 32px -14px rgb(40 37 31 / .4), only on an open menu or dialog

### Typography

- **Heading Font**: Shippori Mincho
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: none
- **Heading Weight**: 600
- **Body Weight**: 400
- **Button Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display; 0 on body
- **Base Size**: 17px
- **Line Height**: 1.6
- **Scale**: ["14.5px","17px","20px","26px to 30px","40px to 64px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Radii

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

### Shadows

- **Lift**: 0 1px 2px rgb(40 37 31 / .25), 0 16px 32px -14px rgb(40 37 31 / .4), only on an open menu or dialog
- **None**: everything else is flat

### Spacing

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

### Surfaces

- **Treatment**: glaze-field
- **Material**: The crazed glaze is the only texture and it is data: a raster ground fired for the page with the year's cracks drawn over it as a vector layer. Everything else is flat jade-grey with surface wells.
- **Card Style**: No cards. Rows, forms and the ledger sit straight on the glaze, parted by space; the keeper's pass is one surface well.
- **Wells**: Surface #C3D1C1 for inputs, the chosen tab, meter tracks and the pass.
- **Bg Pattern**: the glaze ground, only in the field; text sections are flat

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Cracks are the only lines and each one is a record; the 1px front line marks today. Focus is a 2px jade 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)
- **Crack**: 650ms ease-out quartic: a new white crack grows along its own path and stops at the older cracks
- **Philosophy**: One motion: a crack forms when a visit is logged. Everything settled renders with no JavaScript, and prefers-reduced-motion draws the crack at once.

### Controls

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

## Rules

### Composition

- Make the first screen the glaze: the craze ground spans it edge to edge, with the copy set on open glaze beside it.
- Place every crack by data: x is the date, y is the hour; never draw a crack that is not a record.
- Keep one persimmon bar per view, under the season in fruit.
- Below the field, show the same glaze closer (by week, by month) before any other content.
- Put the pass and other actions on a single surface well; one filled jade button per view.

### Hierarchy

- One large line per view in Shippori Mincho 600 (40 to 64px) that states a fact.
- Titles in Shippori Mincho 26 to 30px; reading in Zen Kaku Gothic New 17px, labels 14.5px in muted.
- Numbers sit in tabular figures, right aligned, with a small muted unit beneath.
- Ink is for what happened, muted is for what it means.

### Density

Comfortable: 9px day rows, 72 to 120px between sections, 17px reading text, 14.5px table rows.

### Signature Patterns

- The crazed ground: a year-long strip of cracks, hours on the right edge, months along the foot.
- Log a visit: a white crack grows along its own path and the totals step up by one.
- Point to read: hovering the glaze names the day, the hour and the visit count.
- Iron staples: a small bracket glyph on every dated repair.
- The stain table: a month's cracks drawn at their age, darker with time.

## Layout

### Grid

- **Type**: texture field then ledger
- **Max Width**: 1240px, centred above 1440px
- **Gutter**: clamp(16px, 4.4vw, 56px)
- **Column Behavior**: Two-column heads and reads use minmax(0,1fr) pairs; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 72 to 120px
- **Card Gap**: no cards; 9 to 12px between day rows
- **Content Padding**: content sits on the glaze at the grid edge; the pass pads 26 to 40px
- **Approach**: The glaze is the field and space does the separating.

### Density

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

### Responsive

Desktop shows the year across with hours on the right edge. Tablet shortens the labels and keeps both columns. Phone turns the field upright: the future sits on top as open glaze and the crazed half-year runs down the page from today.

### Breakpoints

- **Mobile**: 390px, one column, upright field
- **Phone Max**: 600px
- **Tablet**: 601px to 1199px, shorter labels
- **Desktop**: 1200px and up
- **Wide**: 1440px, content capped and centred
- **Ultrawide**: 2560px, same cap, field still full bleed

## Guidance

### Do

- Let every mark be a record and say what it records.
- Keep the glaze smooth where nothing happened.
- Use one persimmon bar for the season in fruit.
- Set copy as facts with numbers and dates.
- Style every control explicitly: square, borderless, 2px jade focus.
- Draw today's marks in white and age the rest toward iron.
- Keep text on open glaze, never on cracks.

### Don't

- Don't add decorative cracks, blooms or gradient pools.
- Don't box content into cards, tiles or pills.
- Don't use persimmon on more than one thing in a view.
- Don't round rectangles or add drop shadows.
- Don't use default fonts or tracked mono eyebrows.
- Don't describe the design system in the copy.

### Accessibility

Text colours clear AA on the glaze and on surface wells (ink 10.9:1, muted 5.9:1, jade 5.4:1, semantic inks 5.5 to 6.0:1). The field is aria-hidden with the same facts in text; hover readouts are an addition, never the only source. Reduced motion draws new cracks at once.

### Usage Context

Places kept slowly with a record that grows over time: gardens, archives, reading rooms, sanctuaries, membership schemes.

## Imagery Direction

### Pairs With

celadon-glaze

### Art Style Id

en-019efdd9-1129-76b2-9677-bd3f1bc46341

### Summary

A glaze ground fired for the page in the Celadon Glaze technique: cool jade-grey crazed ceramic, open and calm at the left for copy, with no subject and no persimmon. The year's cracks are drawn over it as a vector layer so the raster stays quiet.

### Subjects

- an empty crazed celadon glaze plate
- a glaze ground with an open pale zone at left
- a close detail of crackle with iron staining
- a plain glazed tile edge to edge

### Usage

One full-bleed glaze ground per landing, driven by --hero-image, beneath the data layer; elsewhere only flat jade-grey and wells.

### Avoid

Subjects, scenes, pooled colour and persimmon in the ground; the data layer carries the story.

---
version: "alpha"
name: "Celadon"
description: "Celadon is a contemplative interface language for gardens, archives and other places kept slowly. The glaze itself is the ground: a hand-drawn network of craze lines spreads under the first screen, and every crack is a real, logged event..."
colors:
  bg: "#D3DDD2"
  surface: "#C3D1C1"
  text: "#28251F"
  muted: "#48523F"
  border: "#B3C2B1"
  accent: "#335C4A"
  on_accent: "#FFFFFF"
  success: "#2E5E2D"
  warning: "#6B4812"
  error: "#8A3020"
  info: "#245866"
  season: "#C9582B"
typography:
  headline-lg:
    fontFamily: "Shippori Mincho"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Shippori Mincho"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "none"
    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: "72px"
  step-8: "96px"
  step-9: "120px"
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-season:
    backgroundColor: "{colors.season}"
  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"
---

# Celadon

## Overview

Celadon is a contemplative interface language for gardens, archives and other places kept slowly. The glaze itself is the ground: a hand-drawn network of craze lines spreads under the first screen, and every crack is a real, logged event. The x axis is the year, the y axis the hour of the day, and one crack is one visit set on its date at the hour it happened. The smooth glaze is the part of the year still to come, a day nobody came is left smooth, and today's cracks are drawn in white. Content sits inside the field on a cool jade-grey ground in Shippori Mincho and Zen Kaku Gothic New, with deep jade for the one action and a single persimmon bar for the season in fruit.

### Values

- The ground is the data: every crack is a logged visit, every staple a dated repair, and a day nobody came is left smooth.
- Content sits inside the field. The glaze is the first screen, not a backdrop behind a card.
- One season-mark: a single persimmon bar for what is in fruit now, and nothing else warm.
- Square and quiet: radius 0 on every rectangle, no borders, no shadows except an open menu or dialog.
- Say what happened. Copy states facts (2,003 visits since April), never describes the design.

### Anti-Values

- Decoration: a crack that is not a record, a bloom, a gradient pool or a blurred wash.
- Boxing the glaze into tiles, season cards or pill tags.
- Persimmon on more than one thing at a time.
- Default fonts, drop shadows and rounded cards.
- Copy about the design system instead of the garden.

### Visual Character

- A cool jade-grey #D3DDD2 glaze with a fine network of iron-dark craze lines.
- Today's cracks in pure white, the future as smooth open glaze.
- Iron staples (a small bracket glyph) for dated repairs, as on the Bakohan bowl.
- Deep jade #335C4A for the one filled button and links; persimmon #C9582B as a 5px season bar.
- Shippori Mincho for the one large line and titles; Zen Kaku Gothic New for everything read.
- Square wells, rows without rules, and generous air around every group.

### Lineage

> Celadon began as a warm bisque garden of glaze pools and stepping stones. This revision is the approved texture-field take: it keeps the celadon glaze world, the jade and persimmon palette and the Stoneworks Garden keepers' pass, and replaces tiles and pools with a crazed glaze whose cracks are real visits.

## 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 | `#D3DDD2` |
| surface | `#C3D1C1` |
| text | `#28251F` |
| muted | `#48523F` |
| border | `#B3C2B1` |
| accent | `#335C4A` |
| on_accent | `#FFFFFF` |
| success | `#2E5E2D` |
| warning | `#6B4812` |
| error | `#8A3020` |
| info | `#245866` |
| season | `#C9582B` |

## Typography

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

- **Headline-Lg**: Shippori Mincho, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Shippori Mincho, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.5.
- **Label-Md**: none, 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`
- **Step-9**: `120px`

### Grid

- **Type**: texture field then ledger
- **Max Width**: 1240px, centred above 1440px
- **Gutter**: clamp(16px, 4.4vw, 56px)
- **Column Behavior**: Two-column heads and reads use minmax(0,1fr) pairs; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 72 to 120px
- **Card Gap**: no cards; 9 to 12px between day rows
- **Content Padding**: content sits on the glaze at the grid edge; the pass pads 26 to 40px
- **Approach**: The glaze is the field and space does the separating.

### Density

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

### Responsive

Desktop shows the year across with hours on the right edge. Tablet shortens the labels and keeps both columns. Phone turns the field upright: the future sits on top as open glaze and the crazed half-year runs down the page from today.

### Breakpoints

- **Mobile**: 390px, one column, upright field
- **Phone Max**: 600px
- **Tablet**: 601px to 1199px, shorter labels
- **Desktop**: 1200px and up
- **Wide**: 1440px, content capped and centred
- **Ultrawide**: 2560px, same cap, field still full bleed

## Elevation & Depth

### Shadows

- **Lift**: 0 1px 2px rgb(40 37 31 / .25), 0 16px 32px -14px rgb(40 37 31 / .4), only on an open menu or dialog
- **None**: everything else is flat

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: glaze-field
- **Material**: The crazed glaze is the only texture and it is data: a raster ground fired for the page with the year's cracks drawn over it as a vector layer. Everything else is flat jade-grey with surface wells.
- **Card Style**: No cards. Rows, forms and the ledger sit straight on the glaze, parted by space; the keeper's pass is one surface well.
- **Wells**: Surface #C3D1C1 for inputs, the chosen tab, meter tracks and the pass.
- **Bg Pattern**: the glaze ground, only in the field; text sections are flat

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Cracks are the only lines and each one is a record; the 1px front line marks today. Focus is a 2px jade outline at 3px offset; a focused field draws a 2px ink line under its well.

## Components

### Composition

- Make the first screen the glaze: the craze ground spans it edge to edge, with the copy set on open glaze beside it.
- Place every crack by data: x is the date, y is the hour; never draw a crack that is not a record.
- Keep one persimmon bar per view, under the season in fruit.
- Below the field, show the same glaze closer (by week, by month) before any other content.
- Put the pass and other actions on a single surface well; one filled jade button per view.

### Hierarchy

- One large line per view in Shippori Mincho 600 (40 to 64px) that states a fact.
- Titles in Shippori Mincho 26 to 30px; reading in Zen Kaku Gothic New 17px, labels 14.5px in muted.
- Numbers sit in tabular figures, right aligned, with a small muted unit beneath.
- Ink is for what happened, muted is for what it means.

### Density

Comfortable: 9px day rows, 72 to 120px between sections, 17px reading text, 14.5px table rows.

### Signature Patterns

- The crazed ground: a year-long strip of cracks, hours on the right edge, months along the foot.
- Log a visit: a white crack grows along its own path and the totals step up by one.
- Point to read: hovering the glaze names the day, the hour and the visit count.
- Iron staples: a small bracket glyph on every dated repair.
- The stain table: a month's cracks drawn at their age, darker with time.

## 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-01a0fe73-eb91-7e50-9805-c020b2f9004e/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0fe73-eb91-7e50-9805-c020b2f9004e/shadcn.json` (registry theme), `/language/en-01a0fe73-eb91-7e50-9805-c020b2f9004e/shadcn-components.md` (component recipes) and `/language/en-01a0fe73-eb91-7e50-9805-c020b2f9004e/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 every mark be a record and say what it records.
- Do Keep the glaze smooth where nothing happened.
- Do Use one persimmon bar for the season in fruit.
- Do Set copy as facts with numbers and dates.
- Do Style every control explicitly: square, borderless, 2px jade focus.
- Do Draw today's marks in white and age the rest toward iron.
- Do Keep text on open glaze, never on cracks.
- Don't Don't add decorative cracks, blooms or gradient pools.
- Don't Don't box content into cards, tiles or pills.
- Don't Don't use persimmon on more than one thing in a view.
- Don't Don't round rectangles or add drop shadows.
- Don't Don't use default fonts or tracked mono eyebrows.
- Don't Don't describe the design system in the copy.

### Accessibility

Text colours clear AA on the glaze and on surface wells (ink 10.9:1, muted 5.9:1, jade 5.4:1, semantic inks 5.5 to 6.0:1). The field is aria-hidden with the same facts in text; hover readouts are an addition, never the only source. Reduced motion draws new cracks at once.

### Usage Context

Places kept slowly with a record that grows over time: gardens, archives, reading rooms, sanctuaries, membership schemes.

## Imagery Direction

### Pairs With

celadon-glaze

### Art Style Id

en-019efdd9-1129-76b2-9677-bd3f1bc46341

### Summary

A glaze ground fired for the page in the Celadon Glaze technique: cool jade-grey crazed ceramic, open and calm at the left for copy, with no subject and no persimmon. The year's cracks are drawn over it as a vector layer so the raster stays quiet.

### Subjects

- an empty crazed celadon glaze plate
- a glaze ground with an open pale zone at left
- a close detail of crackle with iron staining
- a plain glazed tile edge to edge

### Usage

One full-bleed glaze ground per landing, driven by --hero-image, beneath the data layer; elsewhere only flat jade-grey and wells.

### Avoid

Subjects, scenes, pooled colour and persimmon in the ground; the data layer carries the story.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "celadon",
  "type": "registry:theme",
  "title": "Celadon shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#D3DDD2",
      "foreground": "#28251F",
      "card": "#C3D1C1",
      "card-foreground": "#28251F",
      "popover": "#C3D1C1",
      "popover-foreground": "#28251F",
      "primary": "#28251F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#48523F",
      "muted-foreground": "#28251F",
      "accent": "#335C4A",
      "accent-foreground": "#ffffff",
      "destructive": "#8A3020",
      "border": "#B3C2B1",
      "input": "#B3C2B1",
      "ring": "#335C4A",
      "chart-1": "#28251F",
      "chart-2": "#f4f4f5",
      "chart-3": "#335C4A",
      "chart-4": "#2E5E2D",
      "chart-5": "#6B4812",
      "sidebar": "#C3D1C1",
      "sidebar-foreground": "#28251F",
      "sidebar-primary": "#28251F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#245866",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#B3C2B1",
      "sidebar-ring": "#335C4A",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#28251F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#335C4A",
      "accent-foreground": "#ffffff",
      "destructive": "#8A3020",
      "border": "#303642",
      "input": "#303642",
      "ring": "#335C4A",
      "chart-1": "#28251F",
      "chart-2": "#f4f4f5",
      "chart-3": "#335C4A",
      "chart-4": "#2E5E2D",
      "chart-5": "#6B4812",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#28251F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#335C4A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#335C4A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0fe73-eb91-7e50-9805-c020b2f9004e",
    "slug": "celadon",
    "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",
        "season",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "lift",
        "row_hover",
        "stain"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lift",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "crack",
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```