Inkstone

# Inkstone

## Philosophy

Inkstone treats software the way a brush treats paper: the mark commits in one breath and cannot be revised. The screen is a wet black slab — warm near-black inkstone — and the interface is luminous bone ink loaded onto it; light is the ink, the ground is the stone. The one ownable idea is the single stroke, drawn whole and never corrected, emblemised by the ensō — a brush-circle drawn in one breath and left deliberately open. That open breath-gap is the signature: the unfinished is finished on purpose, and quiet slab speaks as loudly as the mark.

### Values

- {"name":"Ink as authority","description":"Decisions are committed in dense bone ink on a black slab, not merely tinted; confidence carries the line, never correction."}
- {"name":"One breath, one mark","description":"Every stroke is set whole in a single gesture; there is no undo on the slab, so what looks effortless was decided before the brush landed."}
- {"name":"The open ensō","description":"The breath-gap is the idea — the unfinished is left unfinished on purpose; large quiet dark zones are composition, not absence."}
- {"name":"Two marks pressed like a chop","description":"Vermilion names the one active or sealed item; celadon names the one reference — colour is pressed last and never spread as decoration."}
- {"name":"Stroke before colour","description":"Reading order is set by the brush-spine, line weight, and typographic scale before any mark of colour is used."}
- {"name":"Fine-art tactility","description":"Generated stone-and-fiber grain and squared offset ink-shadows give material presence while every control stays precise and production-ready."}

### Anti-Values

- Defaulting to a white or paper-light ground; this language is a dark wet slab and the ink is the light.
- Generic SaaS cards with soft shadows, large pastel fills, glass, or a single decorative accent edge.
- A third or fourth accent crowding the two ink marks, or colour standing in for hierarchy.
- Decorative doodles, fake hand-drawn scribbles, or symbol glyphs in copy and markup.
- Reading as a recoloured editorial broadsheet — Inkstone is the brush gesture, not the ruled folio grid.

### Visual Character

- A wet near-black inkstone ground with subtle generated stone/fiber grain, carrying luminous bone-ink marks.
- A living brush-spine runs the spine of every layout; panels and sections hang off it, thicker and vermilion-tipped at the load point.
- The ensō watermark — a continuous bone ring with one open breath-gap — marks feature surfaces, the brand seal, and avatars.
- States are ensō arcs that sweep to their completeness and leave the gap open; the arc turns vermilion for the active or sealed item.
- Bold grotesque display set against a warm humanist serif body and mono captions; one vermilion seal and one celadon reference, never more.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0E0D0B` |
| surface | `#16140F` |
| surface_2 | `#201D16` |
| slab | `#0A0908` |
| text | `#F1E8D3` |
| muted | `#A89C82` |
| faint | `#6E6450` |
| border | `#3A352A` |
| rule | `#EFE6D0` |
| accent | `#D8442B` |
| accent_strong | `#B83419` |
| on_accent | `#0E0D0B` |
| celadon | `#6FA793` |
| success | `#6FA793` |
| warning | `#C99A3A` |
| error | `#D8442B` |
| info | `#7FA0C7` |

### Typography

- **Base Size**: 18px
- **Body Font**: Spectral, Georgia, serif
- **Heading Font**: Bricolage Grotesque, -apple-system, system-ui, sans-serif
- **Mono Font**: Spline Sans Mono, ui-monospace, SFMono-Regular, Menlo, monospace
- **Caption Font**: Spline Sans Mono, ui-monospace, monospace
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.005em
- **Heading Letter Spacing**: -0.03em
- **Caption Letter Spacing**: 0.2em
- **Line Height**: 1.62
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 2px 2px 0 rgba(10,9,8,0.9)
- **Md**: 4px 4px 0 rgba(10,9,8,0.95)

### Spacing

- **Base**: 8px
- **Scale**: ["6px","10px","16px","24px","36px","56px","88px","128px"]

### Surfaces

- **Bg Pattern**: generated wet-inkstone grain (layered radial + linear gradients, no image)
- **Card Style**: Flat warm slab panels with visible stone grain, 24px corners, no border; feature panels carry the ensō watermark bleeding off a corner and emphasis adds an offset ink-shadow.
- **Treatment**: wet-inkstone

### Borders

- **Default Width**: 1px
- **Frame Width**: 1.5px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: No structural borders on chrome. A 1px ink hairline divides table rows; a 1.5px inset hairline edges quiet controls; the only outline accent is a 2px celadon focus ring. Never a single decorative accent edge on a card.

### Motion

- **Duration**: 150ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Philosophy**: Deliberate, near print-static. The settled page is the default and shows with no JavaScript; JS adds a one-shot rise gated behind a class on <html> that always finishes on its own. Respects prefers-reduced-motion.

## Rules

### Composition

Hang the layout off a single luminous brush-spine rather than a ruled column grid; sections and panels attach to the stroke, thicker and vermilion-tipped at the load point. Keep at least one quadrant dark and empty. Navigation breathes as part of the page — never a pill bar or floating card; cards never nest.

### Hierarchy

Order is set by the brush-spine, type scale, and surface before colour. Display in Bricolage Grotesque (800, tight), body in Spectral, captions and data in Spline Sans Mono uppercase. Vermilion marks one active or sealed item and celadon one reference — never decorate multiple unrelated elements.

### Density

Compact inside a surface (8–16px internal rhythm), spacious between surfaces (large quiet slab gutters). A screen reads like a single committed gesture on a wet stone, with precise marks surrounded by quiet dark.

### Signature

The single stroke: a luminous brush-spine that containers hang off; the ensō watermark (a continuous bone ring with one open breath-gap) on feature surfaces, the brand seal and avatars; ensō state arcs that sweep to completeness and stay open; one vermilion seal for the active mark and one celadon for the reference. The spine narrows and panels stack to one column on mobile.

## Layout

### Grid

No fixed multi-column folio grid. Content hangs off a single brush-spine on a max-width ~1240px contained measure; panels use auto-fit minmax(280px,1fr) so children shrink rather than overflow. The hero spans 100vw.

### Whitespace

Quiet dark slab is composition, not emptiness. Generous outer padding (24px mobile, 36px desktop) and at least one deliberately empty quadrant beside dense marks.

### Density

Compact marks inside surfaces, spacious quiet slab between them; high information per panel without crowding.

### Responsive

At ~390px: single column, narrowed spine, 24px gutters, 44px controls, ensō marks preserved. At ~768px: two-column splits collapse gracefully. At 1440px+: contained content caps and centres; only the hero is full-bleed.

### Breakpoints

- **Mobile**: <=640px single column, spine narrows, non-essential nav and table columns hidden
- **Tablet**: 641-1024px two-column splits
- **Desktop**: >=1025px full brush-spine layout with side-by-side panels

## Guidance

### Do

- Start from a wet inkstone ground and luminous bone ink as the visual contract before any colour.
- Hang every layout off the brush-spine and give feature surfaces the ensō watermark with its open breath-gap.
- Show progress and state as ensō arcs that sweep to value and leave the gap open.
- Press exactly one vermilion seal per view for the decisive action and one celadon for the reference.
- Use Bricolage Grotesque for confident display, Spectral for warm reading, Spline Sans Mono for captions and data.
- Keep one coherent radius set {0,16,24,full}; capsules for controls, 24px for panels.
- Explicitly ink every form control — focus is a 2px celadon ring, the chosen state presses in vermilion.
- Leave deliberate quiet dark space; let the slab speak as loudly as the mark.

### Don't

- Do not default to a white or paper-light ground, or wash the slab with pastel fills.
- Do not put a single decorative accent edge on a card, nest cards, or trap navigation in a pill bar.
- Do not introduce a third decorative accent beyond the two ink marks; extra colour is reserved semantic roles only.
- Do not use color alone for hierarchy — the brush-spine, type, and surface set order first.
- Do not add fake hand-drawn doodles, random scribbles, or symbol glyphs in copy or markup.
- Do not let the ensō become wallpaper — it is one considered system, used with intent.
- Do not rebuild this as a recoloured editorial broadsheet; it is the brush gesture, not the ruled folio.

### Accessibility

Maintain high contrast between bone ink and the dark slab (bone #F1E8D3 on #0E0D0B exceeds WCAG AA for body and large text). Pair every colour state with a mark, label, or arc so colour is never the only signal. Body text 17px+, controls at least 44px tall on touch, focus a visible 2px celadon outline. Respect prefers-reduced-motion; the settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

lampblack

### Summary

Dense fine-art ink drawing in the lampblack technique, inverted onto a wet near-black inkstone ground: luminous bone-ink masses from a loaded sumi-e brush, pen-and-nib hairline structure, dry-brush texture and restrained spatter, with one small vermilion accent mark and generous quiet dark space.

### Subjects

- a single ensō brush circle with an open breath-gap
- one bough of pine
- a heron over a reed bank
- an empty bowl at dawn
- a carp with a single fin

### Usage

One luminous full-bleed hero subject per landing; smaller ensō marks as panel watermarks and avatars. Always end image prompts with NO text, NO letters, NO logos.

---
version: "alpha"
name: "Inkstone"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0E0D0B"
  surface: "#16140F"
  surface_2: "#201D16"
  slab: "#0A0908"
  text: "#F1E8D3"
  muted: "#A89C82"
  faint: "#6E6450"
  border: "#3A352A"
  rule: "#EFE6D0"
  accent: "#D8442B"
  accent_strong: "#B83419"
  on_accent: "#0E0D0B"
  celadon: "#6FA793"
  success: "#6FA793"
  warning: "#C99A3A"
  error: "#D8442B"
  info: "#7FA0C7"
typography:
  headline-lg:
    fontFamily: "Bricolage Grotesque, -apple-system, system-ui, sans-serif"
    fontSize: "2.197rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.005em"
  headline-md:
    fontFamily: "Bricolage Grotesque, -apple-system, system-ui, sans-serif"
    fontSize: "1.758rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.005em"
  body-md:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "-0.005em"
  label-md:
    fontFamily: "Spline Sans Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "6px"
  sm: "10px"
  md: "16px"
  lg: "24px"
  xl: "36px"
  2xl: "56px"
  3xl: "88px"
  4xl: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-slab:
    backgroundColor: "{colors.slab}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-rule:
    backgroundColor: "{colors.rule}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_strong:
    backgroundColor: "{colors.accent_strong}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-celadon:
    backgroundColor: "{colors.celadon}"
  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: "#000000"
    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"
---

# Inkstone

## Overview

Inkstone treats software the way a brush treats paper: the mark commits in one breath and cannot be revised. The screen is a wet black slab — warm near-black inkstone — and the interface is luminous bone ink loaded onto it; light is the ink, the ground is the stone. The one ownable idea is the single stroke, drawn whole and never corrected, emblemised by the ensō — a brush-circle drawn in one breath and left deliberately open. That open breath-gap is the signature: the unfinished is finished on purpose, and quiet slab speaks as loudly as the mark.

### Values

- {"name":"Ink as authority","description":"Decisions are committed in dense bone ink on a black slab, not merely tinted; confidence carries the line, never correction."}
- {"name":"One breath, one mark","description":"Every stroke is set whole in a single gesture; there is no undo on the slab, so what looks effortless was decided before the brush landed."}
- {"name":"The open ensō","description":"The breath-gap is the idea — the unfinished is left unfinished on purpose; large quiet dark zones are composition, not absence."}
- {"name":"Two marks pressed like a chop","description":"Vermilion names the one active or sealed item; celadon names the one reference — colour is pressed last and never spread as decoration."}
- {"name":"Stroke before colour","description":"Reading order is set by the brush-spine, line weight, and typographic scale before any mark of colour is used."}
- {"name":"Fine-art tactility","description":"Generated stone-and-fiber grain and squared offset ink-shadows give material presence while every control stays precise and production-ready."}

### Anti-Values

- Defaulting to a white or paper-light ground; this language is a dark wet slab and the ink is the light.
- Generic SaaS cards with soft shadows, large pastel fills, glass, or a single decorative accent edge.
- A third or fourth accent crowding the two ink marks, or colour standing in for hierarchy.
- Decorative doodles, fake hand-drawn scribbles, or symbol glyphs in copy and markup.
- Reading as a recoloured editorial broadsheet — Inkstone is the brush gesture, not the ruled folio grid.

### Visual Character

- A wet near-black inkstone ground with subtle generated stone/fiber grain, carrying luminous bone-ink marks.
- A living brush-spine runs the spine of every layout; panels and sections hang off it, thicker and vermilion-tipped at the load point.
- The ensō watermark — a continuous bone ring with one open breath-gap — marks feature surfaces, the brand seal, and avatars.
- States are ensō arcs that sweep to their completeness and leave the gap open; the arc turns vermilion for the active or sealed item.
- Bold grotesque display set against a warm humanist serif body and mono captions; one vermilion seal and one celadon reference, never more.

## 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 | `#0E0D0B` |
| surface | `#16140F` |
| surface_2 | `#201D16` |
| slab | `#0A0908` |
| text | `#F1E8D3` |
| muted | `#A89C82` |
| faint | `#6E6450` |
| border | `#3A352A` |
| rule | `#EFE6D0` |
| accent | `#D8442B` |
| accent_strong | `#B83419` |
| on_accent | `#0E0D0B` |
| celadon | `#6FA793` |
| success | `#6FA793` |
| warning | `#C99A3A` |
| error | `#D8442B` |
| info | `#7FA0C7` |

## Typography

- **Headline-Lg**: Bricolage Grotesque, -apple-system, system-ui, sans-serif, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: Bricolage Grotesque, -apple-system, system-ui, sans-serif, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: Spectral, Georgia, serif, 18px, weight 400, line-height 1.62.
- **Label-Md**: Spline Sans Mono, ui-monospace, SFMono-Regular, Menlo, monospace, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `6px`
- **Sm**: `10px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `36px`
- **2xl**: `56px`
- **3xl**: `88px`
- **4xl**: `128px`

### Grid

No fixed multi-column folio grid. Content hangs off a single brush-spine on a max-width ~1240px contained measure; panels use auto-fit minmax(280px,1fr) so children shrink rather than overflow. The hero spans 100vw.

### Whitespace

Quiet dark slab is composition, not emptiness. Generous outer padding (24px mobile, 36px desktop) and at least one deliberately empty quadrant beside dense marks.

### Density

Compact marks inside surfaces, spacious quiet slab between them; high information per panel without crowding.

### Responsive

At ~390px: single column, narrowed spine, 24px gutters, 44px controls, ensō marks preserved. At ~768px: two-column splits collapse gracefully. At 1440px+: contained content caps and centres; only the hero is full-bleed.

### Breakpoints

- **Mobile**: <=640px single column, spine narrows, non-essential nav and table columns hidden
- **Tablet**: 641-1024px two-column splits
- **Desktop**: >=1025px full brush-spine layout with side-by-side panels

## Elevation & Depth

### Shadows

- **Sm**: 2px 2px 0 rgba(10,9,8,0.9)
- **Md**: 4px 4px 0 rgba(10,9,8,0.95)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: generated wet-inkstone grain (layered radial + linear gradients, no image)
- **Card Style**: Flat warm slab panels with visible stone grain, 24px corners, no border; feature panels carry the ensō watermark bleeding off a corner and emphasis adds an offset ink-shadow.
- **Treatment**: wet-inkstone

### Borders

- **Default Width**: 1px
- **Frame Width**: 1.5px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: No structural borders on chrome. A 1px ink hairline divides table rows; a 1.5px inset hairline edges quiet controls; the only outline accent is a 2px celadon focus ring. Never a single decorative accent edge on a card.

## Components

### Composition

Hang the layout off a single luminous brush-spine rather than a ruled column grid; sections and panels attach to the stroke, thicker and vermilion-tipped at the load point. Keep at least one quadrant dark and empty. Navigation breathes as part of the page — never a pill bar or floating card; cards never nest.

### Hierarchy

Order is set by the brush-spine, type scale, and surface before colour. Display in Bricolage Grotesque (800, tight), body in Spectral, captions and data in Spline Sans Mono uppercase. Vermilion marks one active or sealed item and celadon one reference — never decorate multiple unrelated elements.

### Density

Compact inside a surface (8–16px internal rhythm), spacious between surfaces (large quiet slab gutters). A screen reads like a single committed gesture on a wet stone, with precise marks surrounded by quiet dark.

### Signature

The single stroke: a luminous brush-spine that containers hang off; the ensō watermark (a continuous bone ring with one open breath-gap) on feature surfaces, the brand seal and avatars; ensō state arcs that sweep to completeness and stay open; one vermilion seal for the active mark and one celadon for the reference. The spine narrows and panels stack to one column on mobile.

## 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-019efad9-6a5a-7570-96fb-7a4a0bea354d/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Start from a wet inkstone ground and luminous bone ink as the visual contract before any colour.
- Do Hang every layout off the brush-spine and give feature surfaces the ensō watermark with its open breath-gap.
- Do Show progress and state as ensō arcs that sweep to value and leave the gap open.
- Do Press exactly one vermilion seal per view for the decisive action and one celadon for the reference.
- Do Use Bricolage Grotesque for confident display, Spectral for warm reading, Spline Sans Mono for captions and data.
- Do Keep one coherent radius set {0,16,24,full}; capsules for controls, 24px for panels.
- Do Explicitly ink every form control — focus is a 2px celadon ring, the chosen state presses in vermilion.
- Do Leave deliberate quiet dark space; let the slab speak as loudly as the mark.
- Don't Do not default to a white or paper-light ground, or wash the slab with pastel fills.
- Don't Do not put a single decorative accent edge on a card, nest cards, or trap navigation in a pill bar.
- Don't Do not introduce a third decorative accent beyond the two ink marks; extra colour is reserved semantic roles only.
- Don't Do not use color alone for hierarchy — the brush-spine, type, and surface set order first.
- Don't Do not add fake hand-drawn doodles, random scribbles, or symbol glyphs in copy or markup.
- Don't Do not let the ensō become wallpaper — it is one considered system, used with intent.
- Don't Do not rebuild this as a recoloured editorial broadsheet; it is the brush gesture, not the ruled folio.

### Accessibility

Maintain high contrast between bone ink and the dark slab (bone #F1E8D3 on #0E0D0B exceeds WCAG AA for body and large text). Pair every colour state with a mark, label, or arc so colour is never the only signal. Body text 17px+, controls at least 44px tall on touch, focus a visible 2px celadon outline. Respect prefers-reduced-motion; the settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

lampblack

### Summary

Dense fine-art ink drawing in the lampblack technique, inverted onto a wet near-black inkstone ground: luminous bone-ink masses from a loaded sumi-e brush, pen-and-nib hairline structure, dry-brush texture and restrained spatter, with one small vermilion accent mark and generous quiet dark space.

### Subjects

- a single ensō brush circle with an open breath-gap
- one bough of pine
- a heron over a reed bank
- an empty bowl at dawn
- a carp with a single fin

### Usage

One luminous full-bleed hero subject per landing; smaller ensō marks as panel watermarks and avatars. Always end image prompts with NO text, NO letters, NO logos.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inkstone",
  "type": "registry:theme",
  "title": "Inkstone shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0E0D0B",
      "foreground": "#F1E8D3",
      "card": "#16140F",
      "card-foreground": "#F1E8D3",
      "popover": "#16140F",
      "popover-foreground": "#F1E8D3",
      "primary": "#F1E8D3",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#A89C82",
      "muted-foreground": "#F1E8D3",
      "accent": "#D8442B",
      "accent-foreground": "#ffffff",
      "destructive": "#D8442B",
      "border": "#3A352A",
      "input": "#3A352A",
      "ring": "#D8442B",
      "chart-1": "#F1E8D3",
      "chart-2": "#f4f4f5",
      "chart-3": "#D8442B",
      "chart-4": "#6FA793",
      "chart-5": "#C99A3A",
      "sidebar": "#16140F",
      "sidebar-foreground": "#F1E8D3",
      "sidebar-primary": "#F1E8D3",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7FA0C7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3A352A",
      "sidebar-ring": "#D8442B",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F1E8D3",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D8442B",
      "accent-foreground": "#ffffff",
      "destructive": "#D8442B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D8442B",
      "chart-1": "#F1E8D3",
      "chart-2": "#f4f4f5",
      "chart-3": "#D8442B",
      "chart-4": "#6FA793",
      "chart-5": "#C99A3A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F1E8D3",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#D8442B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D8442B",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efad9-6a5a-7570-96fb-7a4a0bea354d",
    "slug": "inkstone",
    "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_strong",
        "bg",
        "border",
        "celadon",
        "error",
        "faint",
        "info",
        "muted",
        "on_accent",
        "rule",
        "slab",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "caption_font",
        "caption_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_letter_spacing",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "frame_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```