# Washi Ledger Workspace

## Philosophy

Washi Ledger Workspace is a clean, text-first product language for context-heavy knowledge work. It makes documents, summaries, source notes, decisions, and open questions feel like a refined working ledger on warm matte surfaces: high-legibility prose in the center, metadata and metrics as marginal annotations, and navigation as an outline map rather than a dashboard. Japanese influence appears only as operating principles: washi-like restraint, sumi-grade text contrast, indigo focus, scarce persimmon urgency, ma/negative space, layered translucency, and katagami-inspired masking/alignment rules without literal motifs.

### Values

- Body text is the primary object; every surface, rule, and state exists to improve reading and comprehension.
- Context is woven through cross-references, thread lines, marginal notes, and outline navigation rather than decorative patterns.
- Paper-light hierarchy: warm white surfaces, subtle tonal steps, matte quietness, and hairline separators before boxes or shadows.
- Metrics behave like document annotations: inline counts, margin deltas, tiny sparklines, and status grains instead of dashboard cards.
- Indigo is the single confident interaction accent for links, focus, selection, and active context.
- Persimmon is scarce and semantic, reserved for rare urgency or important highlights that require attention.
- Cultural reference stays atmospheric and structural; avoid waves, temples, fans, koi, blossoms, faux brush type, and tourist iconography.

### Anti-Values

- Dashboard-first screens made of equal metric cards, oversized charts, and colorful KPI panels.
- Literal Japanese ornament, tourist motifs, brush-script display type, faux paper skeuomorphism, or decorative repeating patterns.
- Low-contrast gray text, cramped prose, metadata that competes with body content, or hover effects that disrupt reading.
- Bright accent fills, multicolor status systems, heavy shadows, glassmorphism, and marketing gradients.
- Navigation that behaves like an app launcher instead of a contextual table of contents.

### Visual Character

- The screen reads as a layered document workspace: a warm-white canvas, off-white ledger surfaces, crisp sumi text, and extremely fine warm-gray rules.
- A left rail functions as a context table of contents with current work, related threads, sources, decisions, and open questions; active sections use a pale indigo wash plus a 2px side rule.
- Main reading panes keep 15-16px body copy, controlled measure, generous line height, and visible hierarchy through type weight, spacing, and alignment rather than panels.
- Margins carry source tags, confidence, timestamps, tiny numeric deltas, and micro sparklines so quantitative information supports prose without becoming a dashboard.
- Katagami abstraction appears as masked reveals, inset alignment cuts, offset overlays, and transparent context layers; weaving appears as cross-reference paths and thread-like progress lines.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Fine warm paper hairlines define structure; indigo side rules identify selected context without filled navigation blocks.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#3F4F8F` |
| accent_border | `#9AA6D6` |
| accent_soft | `#EEF0FA` |
| background | `#F8F4EC` |
| border | `#D9D0C2` |
| border_subtle | `#E9E1D5` |
| error | `#9D3E31` |
| info | `#3F4F8F` |
| muted | `#81786C` |
| primary | `#181613` |
| secondary | `#5E574E` |
| success | `#4F7257` |
| surface | `#FFFDF7` |
| surface_layer | `#FBF8F1` |
| surface_subtle | `#F3EEE4` |
| text | `#181613` |
| warning | `#B7642A` |
| warning_soft | `#FAEEE5` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: Motion is a reading aid: hover raises contrast slightly, selected state settles with an indigo side rule, loading uses quiet thread lines and skeleton text blocks. Avoid bounce, parallax, and ornamental animation.

### Radii

- **Full**: 9999px
- **Lg**: 14px
- **Md**: 10px
- **None**: 0
- **Sm**: 6px

### Shadows

- **Lg**: 0 20px 60px rgba(52,43,30,0.08)
- **Md**: 0 10px 28px rgba(52,43,30,0.06)
- **Sm**: 0 1px 0 rgba(24,22,19,0.04)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,20,24,32,40,56,72,96]

### Surfaces

- **Bg Pattern**: Optional barely perceptible washi-like grain below 3% opacity; never use visible motifs, floral marks, waves, or faux handmade edges.
- **Card Style**: Use document sheets and ruled sections rather than cards: off-white surface, hairline border, compact header, optional marginal gutter, no decorative drop shadow by default.
- **Treatment**: Matte warm whites and paper neutrals with subtle tonal layering; texture may be simulated only as extremely low-opacity noise or linear fibers that never reduce text contrast.

### Typography

- **Base Size**: 16px
- **Body Font**: Inter, Source Sans 3, system-ui, sans-serif
- **Display Letter Spacing**: -0.026em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@450;500;600&family=Inter:wght@400;450;520;600;700&display=swap
- **Heading Font**: Inter, Source Sans 3, system-ui, sans-serif
- **Letter Spacing**: -0.011em
- **Line Height**: 1.56
- **Mono Font**: IBM Plex Mono, ui-monospace, monospace
- **Numeric Style**: tabular-nums for timestamps, inline metrics, source IDs, and ledger row counts
- **Scale Ratio**: 1.18

## Rules

### Composition

Start every screen from a document or thread, not from metrics. Place the context table of contents on the left, the readable work surface in the center, and source/status metadata in the margin. Use hairline rules, indentation, and typographic shifts to separate information before adding boxes.

### Density

Support lots of context through ledgers, outlines, margin notes, collapsible thread groups, and source footnotes. Do not turn density into an analytics dashboard.

### Hierarchy

Headings are restrained, sans-serif, and precise; body copy has the strongest presence. Metadata uses smaller type, mono numerals, and muted sumi neutrals. Indigo appears after hierarchy is already clear in monochrome.

### Signature Patterns

- Context table-of-contents rail: current work, related threads, sources, decisions, and open questions render as an outline map with indentation, counts, and a 2px indigo side rule for selection.
- Marginal annotations: timestamps, confidence, source counts, small deltas, and tiny sparklines sit in a right gutter aligned to the paragraph or row they explain.
- Thread lines: progress, loading, and cross-references use thin horizontal or vertical rules that connect related text blocks like woven strands without decorative patterning.
- Masked reveal panels: secondary context slides or fades behind a soft paper layer, echoing stencil cutouts as a reveal/alignment behavior rather than an ornament.
- Inline metric grammar: numbers live in sentences, headers, footnotes, or margin chips with tabular numerals; avoid standalone KPI cards unless they are embedded in a document section.

## Layout

### Breakpoints

Below 900px the margin-note column folds beneath its paragraph as inline annotations; below 720px the left rail becomes a top outline strip and document panes stack.

### Density

Calm high density: body copy at 15-16px with 1.45-1.6 line height, compact 11-13px labels, tight metadata clusters, and generous breaks between conceptual sections.

### Grid

Desktop uses a 240-280px left context rail, a central reading column with 66-78 character measure, and a 220-300px margin-note column. Use 12-column alignment only as an invisible ledger grid; avoid dashboard card rows.

### Responsive

Preserve reading measure and focus visibility before preserving multi-column context. Collapse metrics into inline chips and short note rows rather than miniature dashboard cards.

### Whitespace

Use ma deliberately: dense evidence groups may sit close, but transitions between document sections receive 40-72px breathing room. Margins remain useful but visually subordinate.

## Guidance

### Do

- Make the central document readable before designing surrounding chrome.
- Use warm white, ivory, and quiet paper neutrals as the dominant palette.
- Reserve indigo for links, focus, selected states, and active cross-references.
- Use persimmon only for rare urgency, unresolved conflicts, or high-impact highlights.
- Represent analytics as annotations, margin notes, inline numerals, and tiny supporting graphics.
- Use tabular numerals for counts, timestamps, confidence, and IDs.
- Let katagami and weaving influence alignment, layering, reveal, and cross-reference behavior rather than surface decoration.

### Don't

- Do not use literal Japanese motifs, scenic references, brush fonts, waves, fans, koi, blossoms, temples, seals, or tourist cliches.
- Do not lead with dashboards, equal KPI cards, large chart panels, or colorful analytics grids.
- Do not over-texture surfaces or make them look like scanned paper.
- Do not use multiple bright accents or indigo fills that overpower text.
- Do not allow metadata, badges, or source chips to compete with the reading column.
- Do not communicate urgent or selected states by color alone.

### Accessibility

Maintain WCAG AA contrast for body text on all paper surfaces. Focus rings are crisp indigo, 2px with visible offset. Selected states combine pale indigo fill, side rule, and text weight. Status indicators include text and shape, not color alone. Body copy should generally stay at 15-16px or larger with line-height between 1.45 and 1.6.

### Usage Context

Best for AI research workspaces, document review tools, decision logs, knowledge bases, context-heavy collaboration, source synthesis, editorial operations, and product surfaces where comprehension matters more than quick KPI scanning.

---
version: "alpha"
name: "Washi Ledger Workspace"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#3F4F8F"
  accent_border: "#9AA6D6"
  accent_soft: "#EEF0FA"
  background: "#F8F4EC"
  border: "#D9D0C2"
  border_subtle: "#E9E1D5"
  error: "#9D3E31"
  info: "#3F4F8F"
  muted: "#81786C"
  primary: "#181613"
  secondary: "#5E574E"
  success: "#4F7257"
  surface: "#FFFDF7"
  surface_layer: "#FBF8F1"
  surface_subtle: "#F3EEE4"
  text: "#181613"
  warning: "#B7642A"
  warning_soft: "#FAEEE5"
typography:
  headline-lg:
    fontFamily: "Inter, Source Sans 3, system-ui, sans-serif"
    fontSize: "1.643rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.011em"
  headline-md:
    fontFamily: "Inter, Source Sans 3, system-ui, sans-serif"
    fontSize: "1.392rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.011em"
  body-md:
    fontFamily: "Inter, Source Sans 3, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: "-0.011em"
  label-md:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "14px"
  md: "10px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "40px"
  step-8: "56px"
  step-9: "72px"
  step-10: "96px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_border:
    backgroundColor: "{colors.accent_border}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-border_subtle:
    backgroundColor: "{colors.border_subtle}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_layer:
    backgroundColor: "{colors.surface_layer}"
  color-reference-surface_subtle:
    backgroundColor: "{colors.surface_subtle}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-warning_soft:
    backgroundColor: "{colors.warning_soft}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    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"
---

# Washi Ledger Workspace

## Overview

Washi Ledger Workspace is a clean, text-first product language for context-heavy knowledge work. It makes documents, summaries, source notes, decisions, and open questions feel like a refined working ledger on warm matte surfaces: high-legibility prose in the center, metadata and metrics as marginal annotations, and navigation as an outline map rather than a dashboard. Japanese influence appears only as operating principles: washi-like restraint, sumi-grade text contrast, indigo focus, scarce persimmon urgency, ma/negative space, layered translucency, and katagami-inspired masking/alignment rules without literal motifs.

### Values

- Body text is the primary object; every surface, rule, and state exists to improve reading and comprehension.
- Context is woven through cross-references, thread lines, marginal notes, and outline navigation rather than decorative patterns.
- Paper-light hierarchy: warm white surfaces, subtle tonal steps, matte quietness, and hairline separators before boxes or shadows.
- Metrics behave like document annotations: inline counts, margin deltas, tiny sparklines, and status grains instead of dashboard cards.
- Indigo is the single confident interaction accent for links, focus, selection, and active context.
- Persimmon is scarce and semantic, reserved for rare urgency or important highlights that require attention.
- Cultural reference stays atmospheric and structural; avoid waves, temples, fans, koi, blossoms, faux brush type, and tourist iconography.

### Anti-Values

- Dashboard-first screens made of equal metric cards, oversized charts, and colorful KPI panels.
- Literal Japanese ornament, tourist motifs, brush-script display type, faux paper skeuomorphism, or decorative repeating patterns.
- Low-contrast gray text, cramped prose, metadata that competes with body content, or hover effects that disrupt reading.
- Bright accent fills, multicolor status systems, heavy shadows, glassmorphism, and marketing gradients.
- Navigation that behaves like an app launcher instead of a contextual table of contents.

### Visual Character

- The screen reads as a layered document workspace: a warm-white canvas, off-white ledger surfaces, crisp sumi text, and extremely fine warm-gray rules.
- A left rail functions as a context table of contents with current work, related threads, sources, decisions, and open questions; active sections use a pale indigo wash plus a 2px side rule.
- Main reading panes keep 15-16px body copy, controlled measure, generous line height, and visible hierarchy through type weight, spacing, and alignment rather than panels.
- Margins carry source tags, confidence, timestamps, tiny numeric deltas, and micro sparklines so quantitative information supports prose without becoming a dashboard.
- Katagami abstraction appears as masked reveals, inset alignment cuts, offset overlays, and transparent context layers; weaving appears as cross-reference paths and thread-like progress lines.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#3F4F8F` |
| accent_border | `#9AA6D6` |
| accent_soft | `#EEF0FA` |
| background | `#F8F4EC` |
| border | `#D9D0C2` |
| border_subtle | `#E9E1D5` |
| error | `#9D3E31` |
| info | `#3F4F8F` |
| muted | `#81786C` |
| primary | `#181613` |
| secondary | `#5E574E` |
| success | `#4F7257` |
| surface | `#FFFDF7` |
| surface_layer | `#FBF8F1` |
| surface_subtle | `#F3EEE4` |
| text | `#181613` |
| warning | `#B7642A` |
| warning_soft | `#FAEEE5` |

## Typography

- **Headline-Lg**: Inter, Source Sans 3, system-ui, sans-serif, 1.643rem, weight 700, line-height 1.1.
- **Headline-Md**: Inter, Source Sans 3, system-ui, sans-serif, 1.392rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, Source Sans 3, system-ui, sans-serif, 16px, weight 400, line-height 1.56.
- **Label-Md**: IBM Plex Mono, ui-monospace, monospace, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `20px`
- **2xl**: `24px`
- **3xl**: `32px`
- **4xl**: `40px`
- **Step-8**: `56px`
- **Step-9**: `72px`
- **Step-10**: `96px`

### Breakpoints

Below 900px the margin-note column folds beneath its paragraph as inline annotations; below 720px the left rail becomes a top outline strip and document panes stack.

### Density

Calm high density: body copy at 15-16px with 1.45-1.6 line height, compact 11-13px labels, tight metadata clusters, and generous breaks between conceptual sections.

### Grid

Desktop uses a 240-280px left context rail, a central reading column with 66-78 character measure, and a 220-300px margin-note column. Use 12-column alignment only as an invisible ledger grid; avoid dashboard card rows.

### Responsive

Preserve reading measure and focus visibility before preserving multi-column context. Collapse metrics into inline chips and short note rows rather than miniature dashboard cards.

### Whitespace

Use ma deliberately: dense evidence groups may sit close, but transitions between document sections receive 40-72px breathing room. Margins remain useful but visually subordinate.

## Elevation & Depth

### Shadows

- **Lg**: 0 20px 60px rgba(52,43,30,0.08)
- **Md**: 0 10px 28px rgba(52,43,30,0.06)
- **Sm**: 0 1px 0 rgba(24,22,19,0.04)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `14px`
- **Md**: `10px`
- **None**: `0px`
- **Sm**: `6px`

### Surfaces

- **Bg Pattern**: Optional barely perceptible washi-like grain below 3% opacity; never use visible motifs, floral marks, waves, or faux handmade edges.
- **Card Style**: Use document sheets and ruled sections rather than cards: off-white surface, hairline border, compact header, optional marginal gutter, no decorative drop shadow by default.
- **Treatment**: Matte warm whites and paper neutrals with subtle tonal layering; texture may be simulated only as extremely low-opacity noise or linear fibers that never reduce text contrast.

### Borders

- **Accent Width**: 2px
- **Character**: Fine warm paper hairlines define structure; indigo side rules identify selected context without filled navigation blocks.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Start every screen from a document or thread, not from metrics. Place the context table of contents on the left, the readable work surface in the center, and source/status metadata in the margin. Use hairline rules, indentation, and typographic shifts to separate information before adding boxes.

### Density

Support lots of context through ledgers, outlines, margin notes, collapsible thread groups, and source footnotes. Do not turn density into an analytics dashboard.

### Hierarchy

Headings are restrained, sans-serif, and precise; body copy has the strongest presence. Metadata uses smaller type, mono numerals, and muted sumi neutrals. Indigo appears after hierarchy is already clear in monochrome.

### Signature Patterns

- Context table-of-contents rail: current work, related threads, sources, decisions, and open questions render as an outline map with indentation, counts, and a 2px indigo side rule for selection.
- Marginal annotations: timestamps, confidence, source counts, small deltas, and tiny sparklines sit in a right gutter aligned to the paragraph or row they explain.
- Thread lines: progress, loading, and cross-references use thin horizontal or vertical rules that connect related text blocks like woven strands without decorative patterning.
- Masked reveal panels: secondary context slides or fades behind a soft paper layer, echoing stencil cutouts as a reveal/alignment behavior rather than an ornament.
- Inline metric grammar: numbers live in sentences, headers, footnotes, or margin chips with tabular numerals; avoid standalone KPI cards unless they are embedded in a document section.

## 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/washi-ledger-workspace/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 Make the central document readable before designing surrounding chrome.
- Do Use warm white, ivory, and quiet paper neutrals as the dominant palette.
- Do Reserve indigo for links, focus, selected states, and active cross-references.
- Do Use persimmon only for rare urgency, unresolved conflicts, or high-impact highlights.
- Do Represent analytics as annotations, margin notes, inline numerals, and tiny supporting graphics.
- Do Use tabular numerals for counts, timestamps, confidence, and IDs.
- Do Let katagami and weaving influence alignment, layering, reveal, and cross-reference behavior rather than surface decoration.
- Don't Do not use literal Japanese motifs, scenic references, brush fonts, waves, fans, koi, blossoms, temples, seals, or tourist cliches.
- Don't Do not lead with dashboards, equal KPI cards, large chart panels, or colorful analytics grids.
- Don't Do not over-texture surfaces or make them look like scanned paper.
- Don't Do not use multiple bright accents or indigo fills that overpower text.
- Don't Do not allow metadata, badges, or source chips to compete with the reading column.
- Don't Do not communicate urgent or selected states by color alone.

### Accessibility

Maintain WCAG AA contrast for body text on all paper surfaces. Focus rings are crisp indigo, 2px with visible offset. Selected states combine pale indigo fill, side rule, and text weight. Status indicators include text and shape, not color alone. Body copy should generally stay at 15-16px or larger with line-height between 1.45 and 1.6.

### Usage Context

Best for AI research workspaces, document review tools, decision logs, knowledge bases, context-heavy collaboration, source synthesis, editorial operations, and product surfaces where comprehension matters more than quick KPI scanning.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "washi-ledger-workspace",
  "type": "registry:theme",
  "title": "Washi Ledger Workspace shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8F4EC",
      "foreground": "#181613",
      "card": "#FFFDF7",
      "card-foreground": "#181613",
      "popover": "#FFFDF7",
      "popover-foreground": "#181613",
      "primary": "#181613",
      "primary-foreground": "#ffffff",
      "secondary": "#5E574E",
      "secondary-foreground": "#ffffff",
      "muted": "#81786C",
      "muted-foreground": "#181613",
      "accent": "#3F4F8F",
      "accent-foreground": "#ffffff",
      "destructive": "#9D3E31",
      "border": "#D9D0C2",
      "input": "#D9D0C2",
      "ring": "#3F4F8F",
      "chart-1": "#181613",
      "chart-2": "#5E574E",
      "chart-3": "#3F4F8F",
      "chart-4": "#4F7257",
      "chart-5": "#B7642A",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#181613",
      "sidebar-primary": "#181613",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F4F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D9D0C2",
      "sidebar-ring": "#3F4F8F",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#181613",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3F4F8F",
      "accent-foreground": "#ffffff",
      "destructive": "#9D3E31",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3F4F8F",
      "chart-1": "#181613",
      "chart-2": "#5E574E",
      "chart-3": "#3F4F8F",
      "chart-4": "#4F7257",
      "chart-5": "#B7642A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#181613",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F4F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3F4F8F",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "washi-ledger-workspace",
    "slug": "washi-ledger-workspace",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "accent_border",
        "accent_soft",
        "background",
        "border",
        "border_subtle",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_layer",
        "surface_subtle",
        "text",
        "warning",
        "warning_soft"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "numeric_style",
        "scale_ratio"
      ]
    }
  }
}
```