# Threaded Marginalia System

## Philosophy

Threaded Marginalia System is a calm, product-grade design language for AYA Katagami: a text-first workspace that gathers many strands of context without making the user leave the document. Its Japanese craft references are translated into interface behavior rather than decoration: katagami precision becomes crisp apertures and cut lines; washi restraint becomes warm ivory surfaces with visible breathing room; weaving becomes a layered information architecture of source threads, margin notes, sidecars, and analytical ticks that sit beside text instead of replacing it. The result is quiet, modern, readable software for synthesis, research, and decision work: primary prose stays central, context is laced into margins, and dashboards become document-adjacent instrumentation rather than a separate spectacle.

### Values

- text remains the primary surface; metrics, status, citations, and model confidence live as adjacent signals
- weaving as information architecture: strands of context are traceable, braided, and separable rather than collapsed into one opaque summary
- Japanese inspiration through restraint, rhythm, negative space, indigo/sumi/persimmon calibration, and precise cut-paper structure without literal motifs
- low visual noise for long reading sessions: ivory surfaces, sumi text, pale gray-blue side surfaces, and narrow accents only where they clarify state
- marginalia as a first-class interaction layer for comments, provenance, analytics, and side-channel workflow status
- dashboard information remains quiet and proximal: inline counters, tiny trend bars, confidence ticks, and compact summaries orbit the document
- every colored mark has a job: focus, link, semantic state, provenance, or warning; never ornament

### Anti-Values

- literal Japanese motifs such as fans, waves, torii gates, sakura, faux brush textures, or tourist-pattern decoration
- full-bleed dashboards that replace reading with charts and KPI blocks
- dense enterprise chrome, heavy card shadows, low-contrast gray text, or decorative gradients
- using indigo, green, or persimmon as large brand fields instead of precise marginal signals
- hiding important source relationships behind a single generated summary
- making the workspace feel like a mood board rather than a durable productivity tool

### Visual Character

- A warm ivory document plane sits at the center, flanked by porcelain and soft gray-blue sidecars that feel like quiet folded paper layers.
- Margins carry slim vertical thread rails, source beads, confidence ticks, and short notes aligned to the text line they qualify.
- Indigo marks links, focus, selected threads, and active apertures; subdued green-gray and persimmon appear as tiny semantic ticks or micro-labels only.
- Panels use crisp 1px graphite/sumi borders, very shallow elevation, and carefully cut inner dividers inspired by katagami apertures rather than pattern fills.
- Analytics are compact and document-adjacent: sparkline slivers, inline ratios, small stacked thread counts, and provenance bands, never loud hero charts.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Fine graphite and warm-gray hairlines define paper-like layers; indigo appears as a narrow focus ring, thread rail, or selected-margin rule.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#D36C3D` |
| background | `#F6F1E8` |
| border | `#D8D1C5` |
| error | `#B94A3D` |
| info | `#244E86` |
| muted | `#697178` |
| primary | `#244E86` |
| secondary | `#6F8794` |
| success | `#74897C` |
| surface | `#FFFCF5` |
| surface_alt | `#F3F6F7` |
| surface_sidecar | `#E9F0F3` |
| text | `#252525` |
| warning | `#D36C3D` |

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: Motion feels like revealing a folded side note: short opacity and 2-4px slide transitions, no bounce, no theatrical paper effects.

### Radii

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

### Shadows

- **Lg**: 0 18px 48px rgba(37, 37, 37, 0.10)
- **Md**: 0 8px 24px rgba(37, 37, 37, 0.07)
- **Sm**: 0 1px 2px rgba(37, 37, 37, 0.04)

### Spacing

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

### Surfaces

- **Bg Pattern**: No motif pattern. If texture is needed, use an almost imperceptible warm paper grain or 1px ruled baseline at very low opacity.
- **Card Style**: Porcelain panel with 18px radius, 1px warm-gray border, no decorative image, and optional 2px indigo or semantic marginal rule clipped inside the left edge.
- **Treatment**: Ivory reading plane, porcelain cards, soft gray-blue sidecars, and graphite cut lines. Structure comes from layering, spacing, and margins before fills or shadows.

### 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 three-layer text workspace: central document/prose column, inner margin for line-linked annotations, and outer sidecar for thread summaries, source bundles, and quiet analytics. On wide screens, keep the reading column dominant and let sidecars behave like marginal instruments. Place context next to the paragraph it qualifies, not in a detached dashboard. Use vertical thread rails, small beads, and short labels to indicate provenance and relationships. Avoid decorative pattern blocks; katagami influence should appear as precise cutouts, alignment apertures, and restrained negative space.

### Density

Medium-high information density with low visual noise. The document column breathes with 24-32px gutters, while margin and sidecar elements are compact: 12-16px rows, 6-8px gaps, and concise summaries. Collapse long context into threaded bundles that can expand in place. Never let analytics tiles crowd the reading rhythm.

### Hierarchy

Start hierarchy with typography and placement: sumi headlines, readable graphite body text, muted labels, then indigo only for active links/focus/selected context. Marginal signals should be smaller than the prose they annotate. Use IBM Plex Mono only for IDs, timestamps, source counts, confidence percentages, or tiny analytics labels. Persimmon and green-gray never compete with text; they appear as 2-6px ticks, dots, or slim rules paired with labels.

### Signature Patterns

- Thread rail: a 2px indigo vertical line in the margin connecting related notes, sources, and decisions across the document.
- Marginal tick: 4px by 14px green-gray, persimmon, or indigo mark aligned to a line of text with a short label for status or warning.
- Context bead stack: tiny bordered circles or squares on the rail representing source types; hover/focus reveals provenance without moving the document.
- Sidecar digest: soft gray-blue panel containing a three-line summary, source count, confidence sliver, and next action, all subordinate to the document.
- Cut-line divider: crisp graphite hairline with small stepped offsets to separate folded layers, echoing katagami precision without motif illustration.
- Inline metric sliver: 40-72px micro-bar or sparkline embedded beside a paragraph label, used for trend or confidence only when it clarifies the text.

## Layout

### Breakpoints

Mobile <= 640px stacks document, margin notes, and sidecar digests into collapsible inline blocks; tablet 641-1024px preserves document plus one side rail; desktop >= 1025px shows full threaded marginalia.

### Density

Text column remains comfortable for sustained reading; margins and sidecars carry compact operational density without overtaking the document.

### Grid

Desktop uses a 12-column shell with a 680-760px central reading measure, 72-120px inner annotation margin, and 300-360px outer sidecar. Spacing follows an 8px scale with deliberate 24/32px quiet zones around prose.

### Responsive

On small screens, margin notes become inline disclosure chips anchored after the relevant paragraph. Sidecar analytics move below the active section rather than becoming a separate dashboard page.

### Whitespace

Whitespace behaves like washi restraint: warm, functional, and rhythmic. Use negative space to separate strands of context before using colored fills.

## Guidance

### Do

- Keep the main document readable before adding context instrumentation.
- Use margins for provenance, status, annotations, and compact analytics aligned to the relevant text line or paragraph.
- Treat indigo as the interactive thread color for links, focus, selected notes, and active rails.
- Use green-gray for calm success/verified states and persimmon for caution or needs-attention states as tiny marks with labels.
- Create hierarchy through type weight, line length, spacing, and hairline separators before relying on color.
- Represent weaving through traceable context strands, source bundles, and braided relationships, not literal textile imagery.
- Style every input, chip, checkbox, and focus state; never leave browser-default controls in an otherwise precise interface.

### Don't

- Do not use sakura, waves, fans, kimono patterns, faux calligraphy, or tourist-Japan iconography.
- Do not replace the text workspace with large dashboard cards or colorful charts.
- Do not use indigo, persimmon, or green-gray as broad decorative backgrounds.
- Do not let source threads become mystery icons without labels or accessible descriptions.
- Do not hide warnings or model uncertainty behind color alone.
- Do not over-round the system into generic SaaS softness; keep cut-line precision and quiet geometry.

### Accessibility

Maintain WCAG AA for all prose and controls against ivory and porcelain surfaces. Pair every colored marginal tick with a text label, icon, shape, or position. Indigo focus rings must be visible at 2px with offset on both ivory and gray-blue sidecars. Do not use pale gray body text below contrast requirements.

### Usage Context

Best for AI research workspaces, synthesis tools, legal or policy review, editorial analysis, knowledge management, and any product where users read, compare sources, and need side-channel analytics without losing the thread of prose.

---
version: "alpha"
name: "Threaded Marginalia System"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#D36C3D"
  background: "#F6F1E8"
  border: "#D8D1C5"
  error: "#B94A3D"
  info: "#244E86"
  muted: "#697178"
  primary: "#244E86"
  secondary: "#6F8794"
  success: "#74897C"
  surface: "#FFFCF5"
  surface_alt: "#F3F6F7"
  surface_sidecar: "#E9F0F3"
  text: "#252525"
  warning: "#D36C3D"
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: "18px"
  md: "10px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "40px"
  4xl: "48px"
  step-8: "64px"
  step-9: "80px"
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-surface_sidecar:
    backgroundColor: "{colors.surface_sidecar}"
  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"
---

# Threaded Marginalia System

## Overview

Threaded Marginalia System is a calm, product-grade design language for AYA Katagami: a text-first workspace that gathers many strands of context without making the user leave the document. Its Japanese craft references are translated into interface behavior rather than decoration: katagami precision becomes crisp apertures and cut lines; washi restraint becomes warm ivory surfaces with visible breathing room; weaving becomes a layered information architecture of source threads, margin notes, sidecars, and analytical ticks that sit beside text instead of replacing it. The result is quiet, modern, readable software for synthesis, research, and decision work: primary prose stays central, context is laced into margins, and dashboards become document-adjacent instrumentation rather than a separate spectacle.

### Values

- text remains the primary surface; metrics, status, citations, and model confidence live as adjacent signals
- weaving as information architecture: strands of context are traceable, braided, and separable rather than collapsed into one opaque summary
- Japanese inspiration through restraint, rhythm, negative space, indigo/sumi/persimmon calibration, and precise cut-paper structure without literal motifs
- low visual noise for long reading sessions: ivory surfaces, sumi text, pale gray-blue side surfaces, and narrow accents only where they clarify state
- marginalia as a first-class interaction layer for comments, provenance, analytics, and side-channel workflow status
- dashboard information remains quiet and proximal: inline counters, tiny trend bars, confidence ticks, and compact summaries orbit the document
- every colored mark has a job: focus, link, semantic state, provenance, or warning; never ornament

### Anti-Values

- literal Japanese motifs such as fans, waves, torii gates, sakura, faux brush textures, or tourist-pattern decoration
- full-bleed dashboards that replace reading with charts and KPI blocks
- dense enterprise chrome, heavy card shadows, low-contrast gray text, or decorative gradients
- using indigo, green, or persimmon as large brand fields instead of precise marginal signals
- hiding important source relationships behind a single generated summary
- making the workspace feel like a mood board rather than a durable productivity tool

### Visual Character

- A warm ivory document plane sits at the center, flanked by porcelain and soft gray-blue sidecars that feel like quiet folded paper layers.
- Margins carry slim vertical thread rails, source beads, confidence ticks, and short notes aligned to the text line they qualify.
- Indigo marks links, focus, selected threads, and active apertures; subdued green-gray and persimmon appear as tiny semantic ticks or micro-labels only.
- Panels use crisp 1px graphite/sumi borders, very shallow elevation, and carefully cut inner dividers inspired by katagami apertures rather than pattern fills.
- Analytics are compact and document-adjacent: sparkline slivers, inline ratios, small stacked thread counts, and provenance bands, never loud hero charts.

## 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 | `#D36C3D` |
| background | `#F6F1E8` |
| border | `#D8D1C5` |
| error | `#B94A3D` |
| info | `#244E86` |
| muted | `#697178` |
| primary | `#244E86` |
| secondary | `#6F8794` |
| success | `#74897C` |
| surface | `#FFFCF5` |
| surface_alt | `#F3F6F7` |
| surface_sidecar | `#E9F0F3` |
| text | `#252525` |
| warning | `#D36C3D` |

## 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**: `24px`
- **2xl**: `32px`
- **3xl**: `40px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Step-9**: `80px`

### Breakpoints

Mobile <= 640px stacks document, margin notes, and sidecar digests into collapsible inline blocks; tablet 641-1024px preserves document plus one side rail; desktop >= 1025px shows full threaded marginalia.

### Density

Text column remains comfortable for sustained reading; margins and sidecars carry compact operational density without overtaking the document.

### Grid

Desktop uses a 12-column shell with a 680-760px central reading measure, 72-120px inner annotation margin, and 300-360px outer sidecar. Spacing follows an 8px scale with deliberate 24/32px quiet zones around prose.

### Responsive

On small screens, margin notes become inline disclosure chips anchored after the relevant paragraph. Sidecar analytics move below the active section rather than becoming a separate dashboard page.

### Whitespace

Whitespace behaves like washi restraint: warm, functional, and rhythmic. Use negative space to separate strands of context before using colored fills.

## Elevation & Depth

### Shadows

- **Lg**: 0 18px 48px rgba(37, 37, 37, 0.10)
- **Md**: 0 8px 24px rgba(37, 37, 37, 0.07)
- **Sm**: 0 1px 2px rgba(37, 37, 37, 0.04)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: No motif pattern. If texture is needed, use an almost imperceptible warm paper grain or 1px ruled baseline at very low opacity.
- **Card Style**: Porcelain panel with 18px radius, 1px warm-gray border, no decorative image, and optional 2px indigo or semantic marginal rule clipped inside the left edge.
- **Treatment**: Ivory reading plane, porcelain cards, soft gray-blue sidecars, and graphite cut lines. Structure comes from layering, spacing, and margins before fills or shadows.

### Borders

- **Accent Width**: 2px
- **Character**: Fine graphite and warm-gray hairlines define paper-like layers; indigo appears as a narrow focus ring, thread rail, or selected-margin rule.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Use a three-layer text workspace: central document/prose column, inner margin for line-linked annotations, and outer sidecar for thread summaries, source bundles, and quiet analytics. On wide screens, keep the reading column dominant and let sidecars behave like marginal instruments. Place context next to the paragraph it qualifies, not in a detached dashboard. Use vertical thread rails, small beads, and short labels to indicate provenance and relationships. Avoid decorative pattern blocks; katagami influence should appear as precise cutouts, alignment apertures, and restrained negative space.

### Density

Medium-high information density with low visual noise. The document column breathes with 24-32px gutters, while margin and sidecar elements are compact: 12-16px rows, 6-8px gaps, and concise summaries. Collapse long context into threaded bundles that can expand in place. Never let analytics tiles crowd the reading rhythm.

### Hierarchy

Start hierarchy with typography and placement: sumi headlines, readable graphite body text, muted labels, then indigo only for active links/focus/selected context. Marginal signals should be smaller than the prose they annotate. Use IBM Plex Mono only for IDs, timestamps, source counts, confidence percentages, or tiny analytics labels. Persimmon and green-gray never compete with text; they appear as 2-6px ticks, dots, or slim rules paired with labels.

### Signature Patterns

- Thread rail: a 2px indigo vertical line in the margin connecting related notes, sources, and decisions across the document.
- Marginal tick: 4px by 14px green-gray, persimmon, or indigo mark aligned to a line of text with a short label for status or warning.
- Context bead stack: tiny bordered circles or squares on the rail representing source types; hover/focus reveals provenance without moving the document.
- Sidecar digest: soft gray-blue panel containing a three-line summary, source count, confidence sliver, and next action, all subordinate to the document.
- Cut-line divider: crisp graphite hairline with small stepped offsets to separate folded layers, echoing katagami precision without motif illustration.
- Inline metric sliver: 40-72px micro-bar or sparkline embedded beside a paragraph label, used for trend or confidence only when it clarifies the text.

## 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/threaded-marginalia-system/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 Keep the main document readable before adding context instrumentation.
- Do Use margins for provenance, status, annotations, and compact analytics aligned to the relevant text line or paragraph.
- Do Treat indigo as the interactive thread color for links, focus, selected notes, and active rails.
- Do Use green-gray for calm success/verified states and persimmon for caution or needs-attention states as tiny marks with labels.
- Do Create hierarchy through type weight, line length, spacing, and hairline separators before relying on color.
- Do Represent weaving through traceable context strands, source bundles, and braided relationships, not literal textile imagery.
- Do Style every input, chip, checkbox, and focus state; never leave browser-default controls in an otherwise precise interface.
- Don't Do not use sakura, waves, fans, kimono patterns, faux calligraphy, or tourist-Japan iconography.
- Don't Do not replace the text workspace with large dashboard cards or colorful charts.
- Don't Do not use indigo, persimmon, or green-gray as broad decorative backgrounds.
- Don't Do not let source threads become mystery icons without labels or accessible descriptions.
- Don't Do not hide warnings or model uncertainty behind color alone.
- Don't Do not over-round the system into generic SaaS softness; keep cut-line precision and quiet geometry.

### Accessibility

Maintain WCAG AA for all prose and controls against ivory and porcelain surfaces. Pair every colored marginal tick with a text label, icon, shape, or position. Indigo focus rings must be visible at 2px with offset on both ivory and gray-blue sidecars. Do not use pale gray body text below contrast requirements.

### Usage Context

Best for AI research workspaces, synthesis tools, legal or policy review, editorial analysis, knowledge management, and any product where users read, compare sources, and need side-channel analytics without losing the thread of prose.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "threaded-marginalia-system",
  "type": "registry:theme",
  "title": "Threaded Marginalia System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F1E8",
      "foreground": "#252525",
      "card": "#FFFCF5",
      "card-foreground": "#252525",
      "popover": "#FFFCF5",
      "popover-foreground": "#252525",
      "primary": "#244E86",
      "primary-foreground": "#ffffff",
      "secondary": "#6F8794",
      "secondary-foreground": "#ffffff",
      "muted": "#697178",
      "muted-foreground": "#252525",
      "accent": "#D36C3D",
      "accent-foreground": "#ffffff",
      "destructive": "#B94A3D",
      "border": "#D8D1C5",
      "input": "#D8D1C5",
      "ring": "#D36C3D",
      "chart-1": "#244E86",
      "chart-2": "#6F8794",
      "chart-3": "#D36C3D",
      "chart-4": "#74897C",
      "chart-5": "#D36C3D",
      "sidebar": "#FFFCF5",
      "sidebar-foreground": "#252525",
      "sidebar-primary": "#244E86",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#244E86",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D1C5",
      "sidebar-ring": "#D36C3D",
      "radius": "10px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#244E86",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D36C3D",
      "accent-foreground": "#ffffff",
      "destructive": "#B94A3D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D36C3D",
      "chart-1": "#244E86",
      "chart-2": "#6F8794",
      "chart-3": "#D36C3D",
      "chart-4": "#74897C",
      "chart-5": "#D36C3D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#244E86",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D36C3D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D36C3D",
      "radius": "10px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "threaded-marginalia-system",
    "slug": "threaded-marginalia-system",
    "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",
        "surface_sidecar",
        "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"
      ]
    }
  }
}
```