Katagami

# Katagami

## Philosophy

Katagami is a restrained cut-paper interface language derived from Japanese stencil craft, where identity comes from subtraction: carved apertures, layered washi, indigo depth, and precise registration marks. It treats screens like assembled sheets rather than floating SaaS cards, balancing cultural craft warmth with editorial utility.

### Values

- precision through subtraction
- warm hand-made tactility
- layered depth without visual noise
- ceremonial calm in interaction
- legibility before ornament
- material honesty through visible edges

### Anti-Values

- generic flat cards
- neon gradients without craft context
- unbounded animation
- default browser controls
- decoration that is not a cut, seam, aperture, or registration mark

### Visual Character

- Layered washi panels use #F6F0E3 and #EFE2C4 with subtle paper-fiber gradients, inset shadows, and irregular clipped corners so surfaces feel cut and stacked rather than flat.
- Carved stencil apertures appear as repeating CSS mask patterns, punched border windows, and negative-space motifs that reveal deep indigo #102A43 beneath warm paper layers.
- Hairline registration marks, 1px indigo rules, and dotted perforation borders create craft precision; borders are visible structural elements, not decorative afterthoughts.
- Quiet brush-red accents #B84A39 mark selected states, focus, and primary action sparingly, contrasting with muted sumi text and natural paper neutrals for a disciplined artifact feel.
- Typography pairs a dignified Japanese-influenced serif display voice with a compact modern sans body and monospaced catalog labels to separate ritual headings from functional metadata.

## Tokens

### Borders

- **Focus**: 2px solid #B84A39
- **Hairline**: 1px solid rgba(36,59,83,.72)
- **Heavy Cut**: 3px double #102A43
- **Near Invisible**: 1px solid rgba(16,42,67,.08)
- **Perforated**: 1px dashed rgba(36,59,83,.72)

### Colors

| Name | Value |
|------|-------|
| accent | `#B84A39` |
| accent_foreground | `#FFF8EA` |
| background | `#F6F0E3` |
| border | `#243B53` |
| destructive | `#8F2D2D` |
| foreground | `#1F2A2E` |
| muted | `#EFE2C4` |
| muted_foreground | `#5D675F` |
| primary | `#102A43` |
| primary_foreground | `#F6F0E3` |
| secondary | `#C8A45D` |
| secondary_foreground | `#1F2A2E` |

### Motion

- **Duration Base**: 260ms
- **Duration Fast**: 140ms
- **Duration Slow**: 520ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Pattern**: small translate lift under 4px, aperture masks slide no more than 6px, opacity fades only for reveals

### Opacity

- **Disabled**: .42
- **Overlay**: 0.18
- **Wash**: 0.82

### Radii

- **Full**: 999px
- **Lg**: 14px
- **Md**: 6px
- **None**: 0
- **Sm**: 2px
- **Xl**: 24px

### Shadows

- **Inset Paper**: inset 0 0 0 1px rgba(16,42,67,.12), inset 0 -18px 45px rgba(200,164,93,.10)
- **Lg**: 0 28px 70px rgba(16,42,67,.20)
- **Md**: 0 14px 30px rgba(16,42,67,.14)
- **Sm**: 0 1px 0 rgba(16,42,67,.20)

### Spacing

- **1**: 4px
- **2**: 8px
- **3**: 12px
- **4**: 16px
- **5**: 24px
- **6**: 32px
- **7**: 48px
- **8**: 64px
- **9**: 96px
- **10**: 128px

### Surfaces

- **Cut Overlay**: repeating-linear-gradient(45deg, rgba(16,42,67,.06) 0 1px, transparent 1px 9px)
- **Indigo Depth**: #102A43
- **Paper**: linear-gradient(135deg,#F9F4E8 0%,#EFE2C4 100%)
- **Paper Fiber**: radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 28%), linear-gradient(135deg,#F9F4E8,#EFE2C4)
- **Translucent Washi**: rgba(246,240,227,.82) with backdrop-filter blur(10px)

### Typography

- **Body Font**: Inter
- **Body Letter Spacing**: -0.02em
- **Body Line Height**: 1.56
- **Display Letter Spacing**: -0.035em
- **Display Line Height**: 1.12
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;700&family=Noto+Serif+JP:wght@500;700;900&display=swap
- **Heading Font**: Noto Serif JP
- **Letter Spacing**: -0.02em
- **Line Height**: 1.56
- **Mono Font**: IBM Plex Mono
- **Scale**: {"2xl":"2.35rem","3xl":"3.4rem","base":"1rem","hero":"5.4rem","lg":"1.22rem","sm":"0.9rem","xl":"1.58rem","xs":"0.78rem"}

## Rules

### Component Rules

- **Buttons**: rectangular paper or red seal buttons with double borders, clipped corners, and explicit red focus rings
- **Cards**: stacked washi sheets with perforated edges, offset pseudo-element shadows, and visible indigo cutouts
- **Forms**: custom inputs with paper fill, indigo borders, red focus, and styled checkbox/radio/select controls
- **Navigation**: vertical stencil rail or horizontal strip with aperture motifs and registration ticks

### Composition

- Build around one dominant cut-paper sheet and two subordinate utility regions; never use three equal cards in a row.
- Let indigo negative space appear through apertures at navigation, hero, and data boundaries.
- Use registration marks to align sections and reveal the grid rather than relying on heavy dividers.
- Alternate spacious ceremonial moments with compact catalog metadata clusters.
- Keep accent red to a single primary action or state in each section.
- Prefer clipped paper silhouettes and punched counters over generic rounded containers.

### Density

Moderate editorial density: hero and review moments breathe at 96-128px outer spacing, while artifact metadata compresses into 4-12px clusters inside paper panels.

### Hierarchy

- Display headings use Noto Serif JP at tight -0.035em tracking and line-height near 1.12.
- Body copy uses Inter at 15-16px with -0.02em tracking and 1.56 line-height.
- Monospaced labels use IBM Plex Mono uppercase with tiny red or gold marks.
- Indigo wells and aperture reveals carry emphasis before color variation.
- Primary actions read as red seals while secondary actions remain paper with double indigo borders.

### Interaction Rules

- hover lifts are subtle and preserve paper weight
- focus states use red outline plus indigo underline or clipped-corner change
- loading states reveal a mask pattern instead of spinners
- reduced-motion removes sliding apertures and keeps instant state changes

### Signature Patterns

- Use layered .washi-panel components with linear-gradient paper texture, clipped polygon corners, 1px indigo hairline borders, and a second offset pseudo-element shadow to show stacked stencil sheets.
- Create katagami apertures with repeating-radial-gradient or CSS mask-image bands along headers, cards, and navigation rails, always revealing the dark indigo ground through negative space.
- Pair every primary action with a carved red seal treatment: #B84A39 fill, double indigo outline on hover, and a 4px translate lift using the standard cubic-bezier motion token.
- Use registration marks and ruled grid lines at section edges; align content to a 12-column editorial grid on desktop and collapse to ceremonial stacked cards on mobile.

## Layout

### Breakpoints

- **Desktop**: 1200px and up
- **Mobile**: 375px to 767px
- **Tablet**: 768px to 1199px

### Density

Moderate; generous 96-128px outer spacing around ceremonial hero and review states, compact 4-12px metadata clusters inside panels, and 24px panel padding distinct from 64px section gaps.

### Grid

12-column editorial grid, max width 1180px, 24px gutters, with a dominant 7-column washi sheet offset against a 4-column stencil rail or status well.

### Principles

- Use asymmetry like a stencil sheet laid over an indigo backing.
- Reserve dark indigo for depth wells and high-emphasis panels.
- Keep margins calm and let border craft carry identity.
- Create at least one full-bleed or oversized aperture break in every composition.

### Responsive

Desktop uses asymmetric split composition; tablet collapses to two columns with rail above content at 768px; mobile becomes single-column stacked cards at 560px and preserves aperture borders without horizontal overflow.

### Whitespace

Whitespace behaves like uncut paper: large quiet margins surround aperture moments, while labels and chips gather tightly near registration marks.

## Guidance

### Do

- Use real paper texture through gradients, pseudo-elements, and subtle noise rather than flat beige fills.
- Make cutouts, perforations, registration marks, and double borders visible in core navigation and cards.
- Style every control state, including select, checkbox, radio, focus, disabled, and error states.
- Maintain WCAG contrast by pairing indigo text with warm paper surfaces and limiting gold to accents.
- Use one visually dominant panel and let smaller panels support it asymmetrically.
- Keep red accents scarce so focus and primary actions feel ceremonial.
- Use 4-12px gaps for related metadata and 96px or more for major section separation.

### Don't

- Do not rely on generic rounded SaaS cards without cut-paper structure.
- Do not use bright synthetic gradients or glassmorphism unless filtered through washi translucency.
- Do not animate large panels aggressively; Katagami motion is small, deliberate, and craft-like.
- Do not place gold text on paper at small sizes because contrast becomes weak.
- Do not ship default selects, checkboxes, radios, or focus outlines.
- Do not present the language as a component catalog with sections named Controls, Data, or Feedback.
- Do not use three equal cards in a row or equal-weight sections.

### Accessibility

- Primary text on paper uses #1F2A2E at contrast above 10:1.
- Interactive focus uses a 2px #B84A39 ring plus shape change for non-color identification.
- Motion is transform-only, below 520ms, and disabled under prefers-reduced-motion.
- Form controls expose visible labels and large touch targets of at least 44px.
- Gold is never used for small body text; it appears as large ornament or paired with indigo.

### Usage Context

- museum collection tools
- editorial publishing dashboards
- artisan marketplace curation
- creative project planning
- cultural archive review workflows

## Imagery Direction

### Hero Image Direction

overlapping cut-paper sheets revealing indigo apertures and red seal accents

### Icon Style

1.5px indigo line icons with squared terminals and occasional punched-circle counters

### Illustration Style

monochrome indigo stencil silhouettes with uneven washi edges

### Image Gen Prompts

- Japanese katagami stencil paper layers, indigo dye backing, warm washi texture, editorial UI composition, red seal accent

## Generative Canvas

### Animation Philosophy

slow reveal of cut layers, tiny registration shifts, no looping distraction

### Shader Palette

- #F6F0E3
- #EFE2C4
- #102A43
- #B84A39
- #C8A45D

### Techniques

- CSS gradients
- mask-image aperture strips
- subtle parallax paper layers

---
version: "alpha"
name: "Katagami"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#B84A39"
  accent_foreground: "#FFF8EA"
  background: "#F6F0E3"
  border: "#243B53"
  destructive: "#8F2D2D"
  foreground: "#1F2A2E"
  muted: "#EFE2C4"
  muted_foreground: "#5D675F"
  primary: "#102A43"
  primary_foreground: "#F6F0E3"
  secondary: "#C8A45D"
  secondary_foreground: "#1F2A2E"
typography:
  headline-lg:
    fontFamily: "Noto Serif JP"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Noto Serif JP"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "999px"
  lg: "14px"
  md: "6px"
  none: "0px"
  sm: "2px"
  xl: "24px"
spacing:
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "32px"
  7: "48px"
  8: "64px"
  9: "96px"
  10: "128px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_foreground:
    backgroundColor: "{colors.accent_foreground}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-destructive:
    backgroundColor: "{colors.destructive}"
  color-reference-foreground:
    backgroundColor: "{colors.foreground}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-muted_foreground:
    backgroundColor: "{colors.muted_foreground}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-primary_foreground:
    backgroundColor: "{colors.primary_foreground}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-secondary_foreground:
    backgroundColor: "{colors.secondary_foreground}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "12px"
  card-surface:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "16px"
  input-default:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Katagami

## Overview

Katagami is a restrained cut-paper interface language derived from Japanese stencil craft, where identity comes from subtraction: carved apertures, layered washi, indigo depth, and precise registration marks. It treats screens like assembled sheets rather than floating SaaS cards, balancing cultural craft warmth with editorial utility.

### Values

- precision through subtraction
- warm hand-made tactility
- layered depth without visual noise
- ceremonial calm in interaction
- legibility before ornament
- material honesty through visible edges

### Anti-Values

- generic flat cards
- neon gradients without craft context
- unbounded animation
- default browser controls
- decoration that is not a cut, seam, aperture, or registration mark

### Visual Character

- Layered washi panels use #F6F0E3 and #EFE2C4 with subtle paper-fiber gradients, inset shadows, and irregular clipped corners so surfaces feel cut and stacked rather than flat.
- Carved stencil apertures appear as repeating CSS mask patterns, punched border windows, and negative-space motifs that reveal deep indigo #102A43 beneath warm paper layers.
- Hairline registration marks, 1px indigo rules, and dotted perforation borders create craft precision; borders are visible structural elements, not decorative afterthoughts.
- Quiet brush-red accents #B84A39 mark selected states, focus, and primary action sparingly, contrasting with muted sumi text and natural paper neutrals for a disciplined artifact feel.
- Typography pairs a dignified Japanese-influenced serif display voice with a compact modern sans body and monospaced catalog labels to separate ritual headings from functional metadata.

## 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 | `#B84A39` |
| accent_foreground | `#FFF8EA` |
| background | `#F6F0E3` |
| border | `#243B53` |
| destructive | `#8F2D2D` |
| foreground | `#1F2A2E` |
| muted | `#EFE2C4` |
| muted_foreground | `#5D675F` |
| primary | `#102A43` |
| primary_foreground | `#F6F0E3` |
| secondary | `#C8A45D` |
| secondary_foreground | `#1F2A2E` |

## Typography

- **Headline-Lg**: Noto Serif JP, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Noto Serif JP, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 16px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **1**: `4px`
- **2**: `8px`
- **3**: `12px`
- **4**: `16px`
- **5**: `24px`
- **6**: `32px`
- **7**: `48px`
- **8**: `64px`
- **9**: `96px`
- **10**: `128px`

### Breakpoints

- **Desktop**: 1200px and up
- **Mobile**: 375px to 767px
- **Tablet**: 768px to 1199px

### Density

Moderate; generous 96-128px outer spacing around ceremonial hero and review states, compact 4-12px metadata clusters inside panels, and 24px panel padding distinct from 64px section gaps.

### Grid

12-column editorial grid, max width 1180px, 24px gutters, with a dominant 7-column washi sheet offset against a 4-column stencil rail or status well.

### Principles

- Use asymmetry like a stencil sheet laid over an indigo backing.
- Reserve dark indigo for depth wells and high-emphasis panels.
- Keep margins calm and let border craft carry identity.
- Create at least one full-bleed or oversized aperture break in every composition.

### Responsive

Desktop uses asymmetric split composition; tablet collapses to two columns with rail above content at 768px; mobile becomes single-column stacked cards at 560px and preserves aperture borders without horizontal overflow.

### Whitespace

Whitespace behaves like uncut paper: large quiet margins surround aperture moments, while labels and chips gather tightly near registration marks.

## Elevation & Depth

### Shadows

- **Inset Paper**: inset 0 0 0 1px rgba(16,42,67,.12), inset 0 -18px 45px rgba(200,164,93,.10)
- **Lg**: 0 28px 70px rgba(16,42,67,.20)
- **Md**: 0 14px 30px rgba(16,42,67,.14)
- **Sm**: 0 1px 0 rgba(16,42,67,.20)

## Shapes

### Rounded

- **Full**: `999px`
- **Lg**: `14px`
- **Md**: `6px`
- **None**: `0px`
- **Sm**: `2px`
- **Xl**: `24px`

### Surfaces

- **Cut Overlay**: repeating-linear-gradient(45deg, rgba(16,42,67,.06) 0 1px, transparent 1px 9px)
- **Indigo Depth**: #102A43
- **Paper**: linear-gradient(135deg,#F9F4E8 0%,#EFE2C4 100%)
- **Paper Fiber**: radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 28%), linear-gradient(135deg,#F9F4E8,#EFE2C4)
- **Translucent Washi**: rgba(246,240,227,.82) with backdrop-filter blur(10px)

### Borders

- **Focus**: 2px solid #B84A39
- **Hairline**: 1px solid rgba(36,59,83,.72)
- **Heavy Cut**: 3px double #102A43
- **Near Invisible**: 1px solid rgba(16,42,67,.08)
- **Perforated**: 1px dashed rgba(36,59,83,.72)

## Components

### Component Rules

- **Buttons**: rectangular paper or red seal buttons with double borders, clipped corners, and explicit red focus rings
- **Cards**: stacked washi sheets with perforated edges, offset pseudo-element shadows, and visible indigo cutouts
- **Forms**: custom inputs with paper fill, indigo borders, red focus, and styled checkbox/radio/select controls
- **Navigation**: vertical stencil rail or horizontal strip with aperture motifs and registration ticks

### Composition

- Build around one dominant cut-paper sheet and two subordinate utility regions; never use three equal cards in a row.
- Let indigo negative space appear through apertures at navigation, hero, and data boundaries.
- Use registration marks to align sections and reveal the grid rather than relying on heavy dividers.
- Alternate spacious ceremonial moments with compact catalog metadata clusters.
- Keep accent red to a single primary action or state in each section.
- Prefer clipped paper silhouettes and punched counters over generic rounded containers.

### Density

Moderate editorial density: hero and review moments breathe at 96-128px outer spacing, while artifact metadata compresses into 4-12px clusters inside paper panels.

### Hierarchy

- Display headings use Noto Serif JP at tight -0.035em tracking and line-height near 1.12.
- Body copy uses Inter at 15-16px with -0.02em tracking and 1.56 line-height.
- Monospaced labels use IBM Plex Mono uppercase with tiny red or gold marks.
- Indigo wells and aperture reveals carry emphasis before color variation.
- Primary actions read as red seals while secondary actions remain paper with double indigo borders.

### Interaction Rules

- hover lifts are subtle and preserve paper weight
- focus states use red outline plus indigo underline or clipped-corner change
- loading states reveal a mask pattern instead of spinners
- reduced-motion removes sliding apertures and keeps instant state changes

### Signature Patterns

- Use layered .washi-panel components with linear-gradient paper texture, clipped polygon corners, 1px indigo hairline borders, and a second offset pseudo-element shadow to show stacked stencil sheets.
- Create katagami apertures with repeating-radial-gradient or CSS mask-image bands along headers, cards, and navigation rails, always revealing the dark indigo ground through negative space.
- Pair every primary action with a carved red seal treatment: #B84A39 fill, double indigo outline on hover, and a 4px translate lift using the standard cubic-bezier motion token.
- Use registration marks and ruled grid lines at section edges; align content to a 12-column editorial grid on desktop and collapse to ceremonial stacked cards 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-019e04f7-e3ff-7d30-84d1-d688729f9be5/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 Use real paper texture through gradients, pseudo-elements, and subtle noise rather than flat beige fills.
- Do Make cutouts, perforations, registration marks, and double borders visible in core navigation and cards.
- Do Style every control state, including select, checkbox, radio, focus, disabled, and error states.
- Do Maintain WCAG contrast by pairing indigo text with warm paper surfaces and limiting gold to accents.
- Do Use one visually dominant panel and let smaller panels support it asymmetrically.
- Do Keep red accents scarce so focus and primary actions feel ceremonial.
- Do Use 4-12px gaps for related metadata and 96px or more for major section separation.
- Don't Do not rely on generic rounded SaaS cards without cut-paper structure.
- Don't Do not use bright synthetic gradients or glassmorphism unless filtered through washi translucency.
- Don't Do not animate large panels aggressively; Katagami motion is small, deliberate, and craft-like.
- Don't Do not place gold text on paper at small sizes because contrast becomes weak.
- Don't Do not ship default selects, checkboxes, radios, or focus outlines.
- Don't Do not present the language as a component catalog with sections named Controls, Data, or Feedback.
- Don't Do not use three equal cards in a row or equal-weight sections.

### Accessibility

- Primary text on paper uses #1F2A2E at contrast above 10:1.
- Interactive focus uses a 2px #B84A39 ring plus shape change for non-color identification.
- Motion is transform-only, below 520ms, and disabled under prefers-reduced-motion.
- Form controls expose visible labels and large touch targets of at least 44px.
- Gold is never used for small body text; it appears as large ornament or paired with indigo.

### Usage Context

- museum collection tools
- editorial publishing dashboards
- artisan marketplace curation
- creative project planning
- cultural archive review workflows

## Imagery Direction

### Hero Image Direction

overlapping cut-paper sheets revealing indigo apertures and red seal accents

### Icon Style

1.5px indigo line icons with squared terminals and occasional punched-circle counters

### Illustration Style

monochrome indigo stencil silhouettes with uneven washi edges

### Image Gen Prompts

- Japanese katagami stencil paper layers, indigo dye backing, warm washi texture, editorial UI composition, red seal accent

## Generative Canvas

### Animation Philosophy

slow reveal of cut layers, tiny registration shifts, no looping distraction

### Shader Palette

- #F6F0E3
- #EFE2C4
- #102A43
- #B84A39
- #C8A45D

### Techniques

- CSS gradients
- mask-image aperture strips
- subtle parallax paper layers

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "katagami",
  "type": "registry:theme",
  "title": "Katagami shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F0E3",
      "foreground": "#1F2A2E",
      "card": "#F6F0E3",
      "card-foreground": "#1F2A2E",
      "popover": "#F6F0E3",
      "popover-foreground": "#1F2A2E",
      "primary": "#102A43",
      "primary-foreground": "#ffffff",
      "secondary": "#C8A45D",
      "secondary-foreground": "#ffffff",
      "muted": "#EFE2C4",
      "muted-foreground": "#5D675F",
      "accent": "#B84A39",
      "accent-foreground": "#ffffff",
      "destructive": "#8F2D2D",
      "border": "#243B53",
      "input": "#243B53",
      "ring": "#B84A39",
      "chart-1": "#102A43",
      "chart-2": "#C8A45D",
      "chart-3": "#B84A39",
      "chart-4": "#16a34a",
      "chart-5": "#d97706",
      "sidebar": "#F6F0E3",
      "sidebar-foreground": "#1F2A2E",
      "sidebar-primary": "#102A43",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B84A39",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#243B53",
      "sidebar-ring": "#B84A39",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#102A43",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B84A39",
      "accent-foreground": "#ffffff",
      "destructive": "#8F2D2D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B84A39",
      "chart-1": "#102A43",
      "chart-2": "#C8A45D",
      "chart-3": "#B84A39",
      "chart-4": "#16a34a",
      "chart-5": "#d97706",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#102A43",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B84A39",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B84A39",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e04f7-e3ff-7d30-84d1-d688729f9be5",
    "slug": "katagami",
    "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": [
        "focus",
        "hairline",
        "heavy_cut",
        "near_invisible",
        "perforated"
      ],
      "colors": [
        "accent",
        "accent_foreground",
        "background",
        "border",
        "destructive",
        "foreground",
        "muted",
        "muted_foreground",
        "primary",
        "primary_foreground",
        "secondary",
        "secondary_foreground"
      ],
      "motion": [
        "duration_base",
        "duration_fast",
        "duration_slow",
        "easing",
        "pattern"
      ],
      "opacity": [
        "disabled",
        "overlay",
        "wash"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm",
        "xl"
      ],
      "shadows": [
        "inset_paper",
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "1",
        "10",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9"
      ],
      "surfaces": [
        "cut_overlay",
        "indigo_depth",
        "paper",
        "paper_fiber",
        "translucent_washi"
      ],
      "typography": [
        "body_font",
        "body_letter_spacing",
        "body_line_height",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ]
    }
  }
}
```