Katagami

# Katagami

## Philosophy

Katagami translates Japanese stencil-cut paper craft into an application language of layered washi panels, carved indigo apertures, vermilion registration marks, and precise editorial grids for cultural archives and making tools. The system treats the screen as a cutting table: each surface is a sheet with evidence of fiber, cuts, registration, and catalog work. Its restraint comes from a narrow material vocabulary rather than decorative excess.

### Values

- Craft evidence over seamless gloss: every panel should reveal cut edges, fibers, registration ticks, and human layout decisions.
- Calm archival clarity: dense information is organized with asymmetric balance, generous reading space, and restrained indigo contrast.
- Functional ornament: pattern, seals, and apertures carry navigation state, hierarchy, selection, or data grouping rather than acting as decoration.
- Material honesty: surfaces remain matte, fibrous, inked, and slightly imperfect; shadows suggest stacked paper, not floating glass.
- Precise registration: offsets, crop marks, and metadata rails are systematic so the interface feels carefully printed and aligned.
- Specific cultural reference with respect: borrow from stencil structure, paper craft, and archive practice, not caricatured motifs or novelty decoration.

### Anti-Values

- Generic glassmorphism, neon gradients, or plastic rounded SaaS surfaces that erase the stencil-paper origin.
- Symmetric dashboard grids, default controls, and icon-only ambiguity that flatten the craft archive character.
- Decoration without job: motifs, seals, or texture that do not clarify hierarchy, grouping, status, or interaction.
- Over-saturated festival palettes or synthetic triads that overwhelm the quiet washi and indigo foundation.

### Visual Character

- Layered off-white washi paper surfaces use subtle fiber gradients, inset shadows, and deckled clip-path corners so cards feel physically stacked.
- Deep indigo stencil apertures are cut through panels with polygon clip-paths and negative-space masks to frame key metrics and controls.
- Vermilion seal accents and crop registration marks appear as small ruled stamps, corner ticks, and active-state notches in CSS pseudo-elements.
- Asymmetric editorial grids combine narrow vertical metadata rails with broad content panels and intentional offsets at desktop, tablet, and mobile breakpoints.

## Tokens

### Borders

- **Accent Width**: 3px
- **Character**: visible inked hairlines, double rules on important panels, and vermilion active edge stamps
- **Default Width**: 1px
- **Style**: solid with crop-mark pseudo-elements

### Colors

| Name | Value |
|------|-------|
| accent | `#C2472D` |
| background | `#F6F0E4` |
| border | `#8B7A5A` |
| error | `#A4332A` |
| info | `#2D6F91` |
| muted | `#6F756D` |
| primary | `#123A5A` |
| secondary | `#E9DFC9` |
| success | `#2F6B4F` |
| surface | `#FFF9EA` |
| text | `#1E2A2F` |
| warning | `#B87922` |

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: quiet mechanical registration: short offset slides and opacity reveals, never bouncy or liquid

### Radii

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

### Shadows

- **Lg**: 0 28px 60px rgba(18,58,90,.22), inset 0 0 40px rgba(139,122,90,.08)
- **Md**: 0 14px 28px rgba(18,58,90,.14), 0 2px 0 rgba(139,122,90,.22)
- **Sm**: 0 1px 0 rgba(30,42,47,.18), inset 0 0 0 1px rgba(139,122,90,.28)

### Spacing

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

### Surfaces

- **Bg Pattern**: low-contrast repeating paper fibers plus sparse indigo stencil motifs at page edges
- **Card Style**: stacked rectangular panels with clipped stencil corners, inset hairlines, and offset under-sheets
- **Treatment**: matte washi layers with radial fiber speckles, torn edge masks, and warm paper-on-paper contrast

### Typography

- **Base Size**: 16px
- **Body Font**: Noto Sans
- **Body Letter Spacing**: -0.02em
- **Body Line Height**: 1.56
- **Display Letter Spacing**: -0.035em
- **Display Line Height**: 1.1
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Noto+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@500;600&display=swap
- **Heading Font**: Shippori Mincho
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.25

## Rules

### Composition

- Build screens as craft archive workspaces: a slim metadata rail, a dominant paper work surface, and offset tool trays overlapping like stencil sheets on a cutting table.
- Use one clearly dominant module per screen; avoid equal-card dashboard rows and let smaller trays orbit the main specimen or task.
- Introduce at least one grid break through an oversized heading, inset indigo aperture, or offset under-sheet that interrupts the column rhythm.
- Let dense catalog records sit close together while preserving wider paper margins around unrelated groups.
- Treat background texture as quiet material evidence; it must never compete with labels, controls, or specimens.

### Density

Medium-high information density is acceptable when grouped into clear paper layers with strong vertical rhythm and small stamped labels. Tight record gaps may be 8-12px while outer page gutters expand to 72-96px, producing the required 8:1 spacing rhythm.

### Hierarchy

- Use Shippori Mincho for specimen names and section titles, IBM Plex Mono for catalog identifiers, and Noto Sans for body reading.
- Reserve deep indigo apertures for the highest-priority operational states, search results, or specimen previews.
- Use vermilion only for registration, focus, active selection, and stamped approval or warning states.
- Create hierarchy with paper stacking, clipped shape, border weight, and type contrast before adding color.

### Signature Patterns

- Clip-path chamfered paper corners combine with ::before under-sheets to make every major card read as a stacked stencil sheet.
- Indigo aperture panels use inset box-shadows, polygon masks, and cream text to create the sensation of content revealed through cut paper.
- Vermilion registration marks are drawn with pseudo-elements at card corners, active tabs, buttons, and form focus states.
- Repeating linear and radial gradients create washi fiber, faint ink pooling, and edge wear without external images.

## Layout

### Density

Medium-high archival density: specimen records, accession metadata, and tool controls can coexist when separated by material layers and type roles.

### Grid

Desktop uses a 72px page margin, 12-column asymmetric grid, a 220px metadata rail, 18px gutters, and overlapping content modules inside a 1440px working canvas.

### Responsive

At 768px the rail becomes a two-column header and content reflows to six columns; at 375px all sheets stack, forms become full-width, and tool chips remain horizontally scannable.

### Whitespace

Whitespace behaves like margins around cut paper: generous at the outside, tighter inside grouped annotations, with deliberate offsets instead of centered symmetry.

## Guidance

### Do

- Use visible crop ticks, seal dots, and inked borders to clarify active states and selected records.
- Pair warm paper backgrounds with deep indigo focus areas for hierarchy and accessible contrast.
- Let panels overlap slightly and expose under-sheets so the interface feels assembled by hand.
- Style every form control as a paper or ink object with focus marks, not browser defaults.
- Use labels beside icons and status text beside color so meaning remains clear without hue.
- Keep ornament sparse and tied to a job: selection, approval, grouping, registration, or specimen framing.
- Use clipped corners and offset layers consistently enough that the language survives a palette swap.

### Don't

- Do not use glossy gradients, floating glass cards, or neon effects that contradict matte washi craft.
- Do not center every section or force a uniform dashboard grid; asymmetry is part of the language.
- Do not hide labels behind icons or rely on color alone for status.
- Do not use large rounded pill components as the dominant shape; corners should feel cut, folded, or stamped.
- Do not add generic analytics charts, CRM cards, or project-management placeholders.
- Do not cover the interface with decorative motifs; one nameable stencil signature is stronger than many ornaments.
- Do not use low-contrast paper-on-paper text or focus indicators that disappear into texture.

### Accessibility

Maintain WCAG AA contrast for all text; use text labels and shape changes for status; keep focus rings at least 3px vermilion plus outline offset; avoid motion longer than 180ms and respect reduced-motion preferences.

### Usage Context

Best for museum collection tools, textile archives, craft inventory systems, restoration logs, and educational making workspaces where material provenance matters.

## Imagery Direction

### Hero Image Direction

overhead archive table with layered katagami stencil sheets, indigo apertures, and vermilion seals

### Icon Style

thin indigo line icons with squared terminals and small red registration dot accents

### Illustration Style

flat stencil silhouettes, paper grain, single-ink botanical and tool motifs

### Image Gen Prompts

- Japanese katagami stencil paper archive interface, indigo cutouts, washi fibers, vermilion seal marks, overhead craft table

## Generative Canvas

### Animation Philosophy

short registration slides and ink fade-ins; no looping decorative movement

### Shader Palette

warm washi cream, sumi indigo, oxidized vermilion, muted bamboo green

### Techniques

CSS gradients, clip-path polygons, pseudo-element crop marks, masked aperture panels

---
version: "alpha"
name: "Katagami"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#C2472D"
  background: "#F6F0E4"
  border: "#8B7A5A"
  error: "#A4332A"
  info: "#2D6F91"
  muted: "#6F756D"
  primary: "#123A5A"
  secondary: "#E9DFC9"
  success: "#2F6B4F"
  surface: "#FFF9EA"
  text: "#1E2A2F"
  warning: "#B87922"
typography:
  headline-lg:
    fontFamily: "Shippori Mincho"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Shippori Mincho"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Noto Sans"
    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: "9999px"
  lg: "14px"
  md: "6px"
  none: "0px"
  sm: "2px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "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-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"
---

# Katagami

## Overview

Katagami translates Japanese stencil-cut paper craft into an application language of layered washi panels, carved indigo apertures, vermilion registration marks, and precise editorial grids for cultural archives and making tools. The system treats the screen as a cutting table: each surface is a sheet with evidence of fiber, cuts, registration, and catalog work. Its restraint comes from a narrow material vocabulary rather than decorative excess.

### Values

- Craft evidence over seamless gloss: every panel should reveal cut edges, fibers, registration ticks, and human layout decisions.
- Calm archival clarity: dense information is organized with asymmetric balance, generous reading space, and restrained indigo contrast.
- Functional ornament: pattern, seals, and apertures carry navigation state, hierarchy, selection, or data grouping rather than acting as decoration.
- Material honesty: surfaces remain matte, fibrous, inked, and slightly imperfect; shadows suggest stacked paper, not floating glass.
- Precise registration: offsets, crop marks, and metadata rails are systematic so the interface feels carefully printed and aligned.
- Specific cultural reference with respect: borrow from stencil structure, paper craft, and archive practice, not caricatured motifs or novelty decoration.

### Anti-Values

- Generic glassmorphism, neon gradients, or plastic rounded SaaS surfaces that erase the stencil-paper origin.
- Symmetric dashboard grids, default controls, and icon-only ambiguity that flatten the craft archive character.
- Decoration without job: motifs, seals, or texture that do not clarify hierarchy, grouping, status, or interaction.
- Over-saturated festival palettes or synthetic triads that overwhelm the quiet washi and indigo foundation.

### Visual Character

- Layered off-white washi paper surfaces use subtle fiber gradients, inset shadows, and deckled clip-path corners so cards feel physically stacked.
- Deep indigo stencil apertures are cut through panels with polygon clip-paths and negative-space masks to frame key metrics and controls.
- Vermilion seal accents and crop registration marks appear as small ruled stamps, corner ticks, and active-state notches in CSS pseudo-elements.
- Asymmetric editorial grids combine narrow vertical metadata rails with broad content panels and intentional offsets at desktop, tablet, and mobile breakpoints.

## 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 | `#C2472D` |
| background | `#F6F0E4` |
| border | `#8B7A5A` |
| error | `#A4332A` |
| info | `#2D6F91` |
| muted | `#6F756D` |
| primary | `#123A5A` |
| secondary | `#E9DFC9` |
| success | `#2F6B4F` |
| surface | `#FFF9EA` |
| text | `#1E2A2F` |
| warning | `#B87922` |

## Typography

- **Headline-Lg**: Shippori Mincho, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Shippori Mincho, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Sans, 16px, weight 400, line-height 1.5.
- **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**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Density

Medium-high archival density: specimen records, accession metadata, and tool controls can coexist when separated by material layers and type roles.

### Grid

Desktop uses a 72px page margin, 12-column asymmetric grid, a 220px metadata rail, 18px gutters, and overlapping content modules inside a 1440px working canvas.

### Responsive

At 768px the rail becomes a two-column header and content reflows to six columns; at 375px all sheets stack, forms become full-width, and tool chips remain horizontally scannable.

### Whitespace

Whitespace behaves like margins around cut paper: generous at the outside, tighter inside grouped annotations, with deliberate offsets instead of centered symmetry.

## Elevation & Depth

### Shadows

- **Lg**: 0 28px 60px rgba(18,58,90,.22), inset 0 0 40px rgba(139,122,90,.08)
- **Md**: 0 14px 28px rgba(18,58,90,.14), 0 2px 0 rgba(139,122,90,.22)
- **Sm**: 0 1px 0 rgba(30,42,47,.18), inset 0 0 0 1px rgba(139,122,90,.28)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: low-contrast repeating paper fibers plus sparse indigo stencil motifs at page edges
- **Card Style**: stacked rectangular panels with clipped stencil corners, inset hairlines, and offset under-sheets
- **Treatment**: matte washi layers with radial fiber speckles, torn edge masks, and warm paper-on-paper contrast

### Borders

- **Accent Width**: 3px
- **Character**: visible inked hairlines, double rules on important panels, and vermilion active edge stamps
- **Default Width**: 1px
- **Style**: solid with crop-mark pseudo-elements

## Components

### Composition

- Build screens as craft archive workspaces: a slim metadata rail, a dominant paper work surface, and offset tool trays overlapping like stencil sheets on a cutting table.
- Use one clearly dominant module per screen; avoid equal-card dashboard rows and let smaller trays orbit the main specimen or task.
- Introduce at least one grid break through an oversized heading, inset indigo aperture, or offset under-sheet that interrupts the column rhythm.
- Let dense catalog records sit close together while preserving wider paper margins around unrelated groups.
- Treat background texture as quiet material evidence; it must never compete with labels, controls, or specimens.

### Density

Medium-high information density is acceptable when grouped into clear paper layers with strong vertical rhythm and small stamped labels. Tight record gaps may be 8-12px while outer page gutters expand to 72-96px, producing the required 8:1 spacing rhythm.

### Hierarchy

- Use Shippori Mincho for specimen names and section titles, IBM Plex Mono for catalog identifiers, and Noto Sans for body reading.
- Reserve deep indigo apertures for the highest-priority operational states, search results, or specimen previews.
- Use vermilion only for registration, focus, active selection, and stamped approval or warning states.
- Create hierarchy with paper stacking, clipped shape, border weight, and type contrast before adding color.

### Signature Patterns

- Clip-path chamfered paper corners combine with ::before under-sheets to make every major card read as a stacked stencil sheet.
- Indigo aperture panels use inset box-shadows, polygon masks, and cream text to create the sensation of content revealed through cut paper.
- Vermilion registration marks are drawn with pseudo-elements at card corners, active tabs, buttons, and form focus states.
- Repeating linear and radial gradients create washi fiber, faint ink pooling, and edge wear without external images.

## 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-d1bb-7a63-8e37-212da5e72eba/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 visible crop ticks, seal dots, and inked borders to clarify active states and selected records.
- Do Pair warm paper backgrounds with deep indigo focus areas for hierarchy and accessible contrast.
- Do Let panels overlap slightly and expose under-sheets so the interface feels assembled by hand.
- Do Style every form control as a paper or ink object with focus marks, not browser defaults.
- Do Use labels beside icons and status text beside color so meaning remains clear without hue.
- Do Keep ornament sparse and tied to a job: selection, approval, grouping, registration, or specimen framing.
- Do Use clipped corners and offset layers consistently enough that the language survives a palette swap.
- Don't Do not use glossy gradients, floating glass cards, or neon effects that contradict matte washi craft.
- Don't Do not center every section or force a uniform dashboard grid; asymmetry is part of the language.
- Don't Do not hide labels behind icons or rely on color alone for status.
- Don't Do not use large rounded pill components as the dominant shape; corners should feel cut, folded, or stamped.
- Don't Do not add generic analytics charts, CRM cards, or project-management placeholders.
- Don't Do not cover the interface with decorative motifs; one nameable stencil signature is stronger than many ornaments.
- Don't Do not use low-contrast paper-on-paper text or focus indicators that disappear into texture.

### Accessibility

Maintain WCAG AA contrast for all text; use text labels and shape changes for status; keep focus rings at least 3px vermilion plus outline offset; avoid motion longer than 180ms and respect reduced-motion preferences.

### Usage Context

Best for museum collection tools, textile archives, craft inventory systems, restoration logs, and educational making workspaces where material provenance matters.

## Imagery Direction

### Hero Image Direction

overhead archive table with layered katagami stencil sheets, indigo apertures, and vermilion seals

### Icon Style

thin indigo line icons with squared terminals and small red registration dot accents

### Illustration Style

flat stencil silhouettes, paper grain, single-ink botanical and tool motifs

### Image Gen Prompts

- Japanese katagami stencil paper archive interface, indigo cutouts, washi fibers, vermilion seal marks, overhead craft table

## Generative Canvas

### Animation Philosophy

short registration slides and ink fade-ins; no looping decorative movement

### Shader Palette

warm washi cream, sumi indigo, oxidized vermilion, muted bamboo green

### Techniques

CSS gradients, clip-path polygons, pseudo-element crop marks, masked aperture panels

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "katagami",
  "type": "registry:theme",
  "title": "Katagami shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F0E4",
      "foreground": "#1E2A2F",
      "card": "#FFF9EA",
      "card-foreground": "#1E2A2F",
      "popover": "#FFF9EA",
      "popover-foreground": "#1E2A2F",
      "primary": "#123A5A",
      "primary-foreground": "#ffffff",
      "secondary": "#E9DFC9",
      "secondary-foreground": "#111111",
      "muted": "#6F756D",
      "muted-foreground": "#1E2A2F",
      "accent": "#C2472D",
      "accent-foreground": "#ffffff",
      "destructive": "#A4332A",
      "border": "#8B7A5A",
      "input": "#8B7A5A",
      "ring": "#C2472D",
      "chart-1": "#123A5A",
      "chart-2": "#E9DFC9",
      "chart-3": "#C2472D",
      "chart-4": "#2F6B4F",
      "chart-5": "#B87922",
      "sidebar": "#FFF9EA",
      "sidebar-foreground": "#1E2A2F",
      "sidebar-primary": "#123A5A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D6F91",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#8B7A5A",
      "sidebar-ring": "#C2472D",
      "radius": "6px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#123A5A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C2472D",
      "accent-foreground": "#ffffff",
      "destructive": "#A4332A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C2472D",
      "chart-1": "#123A5A",
      "chart-2": "#E9DFC9",
      "chart-3": "#C2472D",
      "chart-4": "#2F6B4F",
      "chart-5": "#B87922",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#123A5A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C2472D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C2472D",
      "radius": "6px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e04f7-d1bb-7a63-8e37-212da5e72eba",
    "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": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "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",
        "body_letter_spacing",
        "body_line_height",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```