# Washi Quiet Workspace

## Philosophy

A calm, precise, text-first product language for AYA Katagami: a workspace that can weave many documents, metrics, and contextual signals without becoming a dashboard collage. The language translates Japanese craft references into interface behavior rather than motifs. Washi becomes warm off-white surfaces with tactile restraint; sumi becomes decisive text hierarchy; katagami becomes repeatable structural rhythm and clipped layers; indigo becomes the disciplined accent for focus and AI assistance; persimmon appears only when the system must mark a change, exception, or human annotation. The result is a modern product-grade workspace where paper-like negative space, marginal signals, document adjacency, and quiet analytics help people read, compare, and act for long sessions.

### Values

- text-first clarity where typography, spacing, and document adjacency carry the experience before color or ornament
- Japanese craft inspiration translated into restraint, rhythm, layering, and precision rather than literal patterns, fans, waves, seals, or tourist imagery
- warm paper-like surfaces that feel inhabited and low-glare while remaining clean enough for dense product work
- sumi ink hierarchy: near-black primary text, measured weights, crisp labels, and quiet mono details for evidence and metrics
- indigo accent discipline reserved for focus, selection, AI affordance, and the one next action that matters
- marginalia as interface: comments, source confidence, deltas, and tiny metrics live beside the document instead of becoming separate dashboard blocks
- layered context that reveals provenance and state through rails, dividers, shadows, and inset paper planes
- long-session calm with high contrast, soft boundaries, and no decorative noise

### Anti-Values

- literal Japanese motifs such as sakura, torii gates, brushstroke logos, faux calligraphy, fans, waves, paper lanterns, or patterned tourist decoration
- dashboard maximalism with saturated charts, oversized KPI tiles, and competing color-coded panels
- generic SaaS minimalism that uses white cards and blue buttons without a distinctive spacing or information philosophy
- low-contrast beige-on-cream text that sacrifices readability for softness
- AI-purple glow, glassmorphism, gradients, or magical effects that make the workspace feel promotional instead of dependable
- status color scatter where every metric, tag, or source receives a different hue

### Visual Character

- Warm washi canvas (#F7F3EA) supports off-white document planes (#FFFDF7) separated by pale stone hairlines and soft inset shadows.
- Typography is the primary ornament: dark sumi headings, quiet body copy, compact kana-like rhythm in labels, and mono numerals for metrics.
- Wide negative space surrounds dense text groups, with narrow marginal columns for source notes, confidence, changes, and inline analytics.
- Indigo appears as slim rails, focus rings, selected tabs, AI citations, and small filled primary controls rather than broad backgrounds.
- Persimmon appears as a tiny dot, underline, change chip, or annotation badge only when something changed, needs review, or was added by a person.
- Dividers are pale stone and slightly warm; shadows are shallow paper-lift shadows, never glossy floating cards.
- Charts and metrics are document-adjacent: small inline sparklines, deltas, evidence counts, and confidence marks live near relevant text.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Pale stone hairlines and indigo focus rings; dividers feel like folded paper edges rather than chrome.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#D26A3E` |
| background | `#F7F3EA` |
| border | `#DCD3C3` |
| error | `#A33A2E` |
| info | `#2F4F8F` |
| muted | `#6F675D` |
| primary | `#2F4F8F` |
| secondary | `#7F8FA6` |
| success | `#4F7A5D` |
| surface | `#FFFDF7` |
| surface_alt | `#FAF7EF` |
| text | `#1E1B18` |
| warning | `#B7791F` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: Quiet, confirmatory motion: paper planes settle, marginal notes slide in 8px, focus rings appear crisply. No bounce, glow, or theatrical AI reveal.

### Radii

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

### Shadows

- **Lg**: 0 24px 56px rgba(49, 43, 34, 0.10)
- **Md**: 0 10px 24px rgba(49, 43, 34, 0.08)
- **Sm**: 0 1px 2px rgba(49, 43, 34, 0.06)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,20,24,32,40,48,64,80,96]

### Surfaces

- **Bg Pattern**: No literal pattern. If texture is needed, use a nearly invisible warm noise or fiber wash below 3% opacity; never use decorative Japanese motifs.
- **Card Style**: 16px radius off-white paper panels with 1px warm stone border, low paper-lift shadow, and optional indigo left rail for active context.
- **Treatment**: Warm washi-like app canvas with slightly lifted document sheets, pale stone dividers, and inset marginal zones.

### Typography

- **Base Size**: 16px
- **Body Font**: Inter
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap
- **Heading Font**: IBM Plex Sans JP
- **Letter Spacing**: -0.01em
- **Line Height**: 1.58
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.18

## Rules

### Composition

Use a document-first workspace rather than a dashboard-first page. The central reading or synthesis plane owns the layout, with a slim left context rail for sources/threads and a right marginal rail for inline metrics, citations, deltas, and next actions. Panels align to an 8px grid but should feel like carefully stacked paper sheets. Keep analytics attached to the paragraph, claim, or object they explain; avoid detached KPI islands unless the user is explicitly in an overview mode.

### Density

Medium-high information density with generous reading space. Body text and document content breathe at 1.55-1.65 line height; tables and source lists can be compact but must use clear row rhythm, stable dividers, and marginal summaries so the surface never becomes a spreadsheet wall.

### Hierarchy

Build hierarchy from sumi text contrast, weight, line length, and paper-plane elevation before using color. Primary text is near-black; secondary labels are warm gray; mono details handle IDs, percentages, timestamps, source counts, and confidence. Indigo marks active focus, AI assistance, selected evidence, and the primary action. Persimmon marks rare annotations, deltas, unsaved changes, or review-required state.

### Signature Patterns

- Document plane plus marginalia: primary content sits on a warm off-white sheet; comments, confidence, metrics, and citations live in a 240-320px side margin aligned to relevant content.
- Indigo thread rail: selected source groups or active AI reasoning are shown by a 2px indigo vertical rail and pale indigo inset, not by filling large panels blue.
- Persimmon change pin: human annotation, changed state, or exception appears as a 6-8px persimmon dot, thin underline, or compact badge beside the affected line.
- Stone fold dividers: sections separate with warm stone 1px lines, extra vertical whitespace, and occasional inset header bands instead of heavy cards.
- Inline metric chips: evidence count, confidence, freshness, and delta appear as small mono chips beside headings or paragraphs, using neutral surfaces and only one accent mark.
- Layered source stack: overlapping or nested paper planes indicate provenance depth; each layer stays readable and avoids decorative transparency.

## Layout

### Breakpoints

mobile <= 640px stacks source rail, document, and marginal notes into a single reading flow; tablet 641px-1024px keeps document plus collapsible note rail; desktop >= 1025px uses full three-zone context/document/marginal layout.

### Density

Designed for long-form synthesis and dense context: compact rails, restrained cards, readable line lengths around 68-82 characters, and marginal analytics aligned to content anchors.

### Grid

Desktop uses a three-zone 12-column workspace: 220-260px context/source rail, flexible 7-8 column document canvas, and 280-340px marginal intelligence rail. Gutters are 24px, page padding 32-40px, all spacing on an 8px base.

### Responsive

On small screens, marginal signals become anchored inline chips and expandable note blocks after the relevant paragraph. Primary actions remain sticky but understated, using indigo text or outline before filled treatment.

### Whitespace

Negative space is active and paper-like. Use 24-40px between major sheets, 16-24px inside panels, and deliberate blank margins to make dense information feel composed rather than empty.

## Guidance

### Do

- Start every screen from the reading surface and place metrics in the margin or inline with the content they qualify.
- Use warm off-white, stone borders, and near-black sumi text as the default hierarchy before introducing accent color.
- Reserve indigo for focus, selection, AI assistance, links, and the one primary action in a region.
- Use persimmon only for rare human annotations, deltas, review-required states, and meaningful changes.
- Keep charts small, quiet, and embedded: sparklines, counts, confidence bars, and deltas should support reading rather than dominate it.
- Prefer slim rails, notches, folded dividers, and margin notes over decorative backgrounds.
- Use real product components: custom buttons, inputs, tabs, tables, comments, source cards, and focus states; avoid browser defaults.
- Translate katagami into modular rhythm and repeatable cut-out spacing, never into literal stencil decoration.

### Don't

- Do not use literal Japanese icons, faux brush lettering, sakura, wave patterns, lanterns, seals, or ornamental borders.
- Do not turn the workspace into a KPI dashboard with large colored cards detached from documents.
- Do not use indigo-purple gradients, AI glows, glass panels, or magical shimmer effects.
- Do not make persimmon a general secondary brand color; it is an annotation/change signal only.
- Do not reduce contrast with beige text or pale controls in the name of softness.
- Do not over-round every component; paper planes should feel precise, not bubbly.
- Do not scatter semantic colors across every tag or source category; use labels and structure first.
- Do not rely on shadows for hierarchy when spacing, dividers, and elevation can do the work quietly.

### Accessibility

Maintain WCAG AA contrast for all body text on warm off-white surfaces. Do not let washi warmth reduce legibility. Indigo focus rings should be at least 2px with visible offset; persimmon annotations must include labels, icons, or text so color is never the only cue.

### Usage Context

Best for AI workspaces, research synthesis tools, document analysis, editorial operations, knowledge management, policy/legal review, and any product where many sources must be woven into a calm readable surface.

---
version: "alpha"
name: "Washi Quiet Workspace"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#D26A3E"
  background: "#F7F3EA"
  border: "#DCD3C3"
  error: "#A33A2E"
  info: "#2F4F8F"
  muted: "#6F675D"
  primary: "#2F4F8F"
  secondary: "#7F8FA6"
  success: "#4F7A5D"
  surface: "#FFFDF7"
  surface_alt: "#FAF7EF"
  text: "#1E1B18"
  warning: "#B7791F"
typography:
  headline-lg:
    fontFamily: "IBM Plex Sans JP"
    fontSize: "1.643rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "IBM Plex Sans JP"
    fontSize: "1.392rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "16px"
  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: "48px"
  step-9: "64px"
  step-10: "80px"
  step-11: "96px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  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_alt:
    backgroundColor: "{colors.surface_alt}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  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 Quiet Workspace

## Overview

A calm, precise, text-first product language for AYA Katagami: a workspace that can weave many documents, metrics, and contextual signals without becoming a dashboard collage. The language translates Japanese craft references into interface behavior rather than motifs. Washi becomes warm off-white surfaces with tactile restraint; sumi becomes decisive text hierarchy; katagami becomes repeatable structural rhythm and clipped layers; indigo becomes the disciplined accent for focus and AI assistance; persimmon appears only when the system must mark a change, exception, or human annotation. The result is a modern product-grade workspace where paper-like negative space, marginal signals, document adjacency, and quiet analytics help people read, compare, and act for long sessions.

### Values

- text-first clarity where typography, spacing, and document adjacency carry the experience before color or ornament
- Japanese craft inspiration translated into restraint, rhythm, layering, and precision rather than literal patterns, fans, waves, seals, or tourist imagery
- warm paper-like surfaces that feel inhabited and low-glare while remaining clean enough for dense product work
- sumi ink hierarchy: near-black primary text, measured weights, crisp labels, and quiet mono details for evidence and metrics
- indigo accent discipline reserved for focus, selection, AI affordance, and the one next action that matters
- marginalia as interface: comments, source confidence, deltas, and tiny metrics live beside the document instead of becoming separate dashboard blocks
- layered context that reveals provenance and state through rails, dividers, shadows, and inset paper planes
- long-session calm with high contrast, soft boundaries, and no decorative noise

### Anti-Values

- literal Japanese motifs such as sakura, torii gates, brushstroke logos, faux calligraphy, fans, waves, paper lanterns, or patterned tourist decoration
- dashboard maximalism with saturated charts, oversized KPI tiles, and competing color-coded panels
- generic SaaS minimalism that uses white cards and blue buttons without a distinctive spacing or information philosophy
- low-contrast beige-on-cream text that sacrifices readability for softness
- AI-purple glow, glassmorphism, gradients, or magical effects that make the workspace feel promotional instead of dependable
- status color scatter where every metric, tag, or source receives a different hue

### Visual Character

- Warm washi canvas (#F7F3EA) supports off-white document planes (#FFFDF7) separated by pale stone hairlines and soft inset shadows.
- Typography is the primary ornament: dark sumi headings, quiet body copy, compact kana-like rhythm in labels, and mono numerals for metrics.
- Wide negative space surrounds dense text groups, with narrow marginal columns for source notes, confidence, changes, and inline analytics.
- Indigo appears as slim rails, focus rings, selected tabs, AI citations, and small filled primary controls rather than broad backgrounds.
- Persimmon appears as a tiny dot, underline, change chip, or annotation badge only when something changed, needs review, or was added by a person.
- Dividers are pale stone and slightly warm; shadows are shallow paper-lift shadows, never glossy floating cards.
- Charts and metrics are document-adjacent: small inline sparklines, deltas, evidence counts, and confidence marks live near relevant text.

## 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 | `#D26A3E` |
| background | `#F7F3EA` |
| border | `#DCD3C3` |
| error | `#A33A2E` |
| info | `#2F4F8F` |
| muted | `#6F675D` |
| primary | `#2F4F8F` |
| secondary | `#7F8FA6` |
| success | `#4F7A5D` |
| surface | `#FFFDF7` |
| surface_alt | `#FAF7EF` |
| text | `#1E1B18` |
| warning | `#B7791F` |

## Typography

- **Headline-Lg**: IBM Plex Sans JP, 1.643rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Sans JP, 1.392rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.58.
- **Label-Md**: IBM Plex Mono, 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**: `48px`
- **Step-9**: `64px`
- **Step-10**: `80px`
- **Step-11**: `96px`

### Breakpoints

mobile <= 640px stacks source rail, document, and marginal notes into a single reading flow; tablet 641px-1024px keeps document plus collapsible note rail; desktop >= 1025px uses full three-zone context/document/marginal layout.

### Density

Designed for long-form synthesis and dense context: compact rails, restrained cards, readable line lengths around 68-82 characters, and marginal analytics aligned to content anchors.

### Grid

Desktop uses a three-zone 12-column workspace: 220-260px context/source rail, flexible 7-8 column document canvas, and 280-340px marginal intelligence rail. Gutters are 24px, page padding 32-40px, all spacing on an 8px base.

### Responsive

On small screens, marginal signals become anchored inline chips and expandable note blocks after the relevant paragraph. Primary actions remain sticky but understated, using indigo text or outline before filled treatment.

### Whitespace

Negative space is active and paper-like. Use 24-40px between major sheets, 16-24px inside panels, and deliberate blank margins to make dense information feel composed rather than empty.

## Elevation & Depth

### Shadows

- **Lg**: 0 24px 56px rgba(49, 43, 34, 0.10)
- **Md**: 0 10px 24px rgba(49, 43, 34, 0.08)
- **Sm**: 0 1px 2px rgba(49, 43, 34, 0.06)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: No literal pattern. If texture is needed, use a nearly invisible warm noise or fiber wash below 3% opacity; never use decorative Japanese motifs.
- **Card Style**: 16px radius off-white paper panels with 1px warm stone border, low paper-lift shadow, and optional indigo left rail for active context.
- **Treatment**: Warm washi-like app canvas with slightly lifted document sheets, pale stone dividers, and inset marginal zones.

### Borders

- **Accent Width**: 2px
- **Character**: Pale stone hairlines and indigo focus rings; dividers feel like folded paper edges rather than chrome.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Use a document-first workspace rather than a dashboard-first page. The central reading or synthesis plane owns the layout, with a slim left context rail for sources/threads and a right marginal rail for inline metrics, citations, deltas, and next actions. Panels align to an 8px grid but should feel like carefully stacked paper sheets. Keep analytics attached to the paragraph, claim, or object they explain; avoid detached KPI islands unless the user is explicitly in an overview mode.

### Density

Medium-high information density with generous reading space. Body text and document content breathe at 1.55-1.65 line height; tables and source lists can be compact but must use clear row rhythm, stable dividers, and marginal summaries so the surface never becomes a spreadsheet wall.

### Hierarchy

Build hierarchy from sumi text contrast, weight, line length, and paper-plane elevation before using color. Primary text is near-black; secondary labels are warm gray; mono details handle IDs, percentages, timestamps, source counts, and confidence. Indigo marks active focus, AI assistance, selected evidence, and the primary action. Persimmon marks rare annotations, deltas, unsaved changes, or review-required state.

### Signature Patterns

- Document plane plus marginalia: primary content sits on a warm off-white sheet; comments, confidence, metrics, and citations live in a 240-320px side margin aligned to relevant content.
- Indigo thread rail: selected source groups or active AI reasoning are shown by a 2px indigo vertical rail and pale indigo inset, not by filling large panels blue.
- Persimmon change pin: human annotation, changed state, or exception appears as a 6-8px persimmon dot, thin underline, or compact badge beside the affected line.
- Stone fold dividers: sections separate with warm stone 1px lines, extra vertical whitespace, and occasional inset header bands instead of heavy cards.
- Inline metric chips: evidence count, confidence, freshness, and delta appear as small mono chips beside headings or paragraphs, using neutral surfaces and only one accent mark.
- Layered source stack: overlapping or nested paper planes indicate provenance depth; each layer stays readable and avoids decorative transparency.

## 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-quiet-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 Start every screen from the reading surface and place metrics in the margin or inline with the content they qualify.
- Do Use warm off-white, stone borders, and near-black sumi text as the default hierarchy before introducing accent color.
- Do Reserve indigo for focus, selection, AI assistance, links, and the one primary action in a region.
- Do Use persimmon only for rare human annotations, deltas, review-required states, and meaningful changes.
- Do Keep charts small, quiet, and embedded: sparklines, counts, confidence bars, and deltas should support reading rather than dominate it.
- Do Prefer slim rails, notches, folded dividers, and margin notes over decorative backgrounds.
- Do Use real product components: custom buttons, inputs, tabs, tables, comments, source cards, and focus states; avoid browser defaults.
- Do Translate katagami into modular rhythm and repeatable cut-out spacing, never into literal stencil decoration.
- Don't Do not use literal Japanese icons, faux brush lettering, sakura, wave patterns, lanterns, seals, or ornamental borders.
- Don't Do not turn the workspace into a KPI dashboard with large colored cards detached from documents.
- Don't Do not use indigo-purple gradients, AI glows, glass panels, or magical shimmer effects.
- Don't Do not make persimmon a general secondary brand color; it is an annotation/change signal only.
- Don't Do not reduce contrast with beige text or pale controls in the name of softness.
- Don't Do not over-round every component; paper planes should feel precise, not bubbly.
- Don't Do not scatter semantic colors across every tag or source category; use labels and structure first.
- Don't Do not rely on shadows for hierarchy when spacing, dividers, and elevation can do the work quietly.

### Accessibility

Maintain WCAG AA contrast for all body text on warm off-white surfaces. Do not let washi warmth reduce legibility. Indigo focus rings should be at least 2px with visible offset; persimmon annotations must include labels, icons, or text so color is never the only cue.

### Usage Context

Best for AI workspaces, research synthesis tools, document analysis, editorial operations, knowledge management, policy/legal review, and any product where many sources must be woven into a calm readable surface.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "washi-quiet-workspace",
  "type": "registry:theme",
  "title": "Washi Quiet Workspace shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F3EA",
      "foreground": "#1E1B18",
      "card": "#FFFDF7",
      "card-foreground": "#1E1B18",
      "popover": "#FFFDF7",
      "popover-foreground": "#1E1B18",
      "primary": "#2F4F8F",
      "primary-foreground": "#ffffff",
      "secondary": "#7F8FA6",
      "secondary-foreground": "#ffffff",
      "muted": "#6F675D",
      "muted-foreground": "#1E1B18",
      "accent": "#D26A3E",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A2E",
      "border": "#DCD3C3",
      "input": "#DCD3C3",
      "ring": "#D26A3E",
      "chart-1": "#2F4F8F",
      "chart-2": "#7F8FA6",
      "chart-3": "#D26A3E",
      "chart-4": "#4F7A5D",
      "chart-5": "#B7791F",
      "sidebar": "#FFFDF7",
      "sidebar-foreground": "#1E1B18",
      "sidebar-primary": "#2F4F8F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F4F8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#DCD3C3",
      "sidebar-ring": "#D26A3E",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2F4F8F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D26A3E",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A2E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D26A3E",
      "chart-1": "#2F4F8F",
      "chart-2": "#7F8FA6",
      "chart-3": "#D26A3E",
      "chart-4": "#4F7A5D",
      "chart-5": "#B7791F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2F4F8F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D26A3E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D26A3E",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "washi-quiet-workspace",
    "slug": "washi-quiet-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",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_alt",
        "text",
        "warning"
      ],
      "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",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```