Doma

# Doma

## Philosophy

Doma (the bare threshold floor of a traditional house) is spatial editing for interfaces. It treats interval, emptiness, and light as structural material rather than leftover space. It draws from ma (the active pause), wabi-sabi, MUJI no-brand restraint, Kenya Hara's emptiness-as-open-vessel, Naoto Fukasawa's without-thought affordances, and Tadao Ando's disciplined planes of concrete, light, and shadow. Every element earns its place by the silence around it; hierarchy comes from illumination, shadow, and exposed space rather than badges, gradients, or saturated colour.

### Values

- {"name":"Active emptiness","explanation":"White and warm paper fields behave as structural intervals; isolated controls and quiet planes make the pause legible."}
- {"name":"Material restraint","explanation":"Surfaces suggest paper, stone, concrete, and weathered wood through slight texture and edge discipline rather than illustration."}
- {"name":"Quiet affordance","explanation":"Controls read through proportion, placement, weight, and one tactile measure line, avoiding loud colour or decorative state."}
- {"name":"Light as hierarchy","explanation":"A plane that sits deeper in the light reads as more important; priority comes from illumination and space, not a badge or an accent edge."}
- {"name":"Weathered precision","explanation":"The layout is measured and rigorous while micro-texture and one muted earth tone keep it human."}
- {"name":"No-brand neutrality","explanation":"The interface recedes behind the work, using understated typography and sparse labelling."}

### Anti-Values

- {"name":"Ornamental Japanism","explanation":"No cherry blossoms, faux calligraphy, red-sun motifs, or cultural cliche."}
- {"name":"Spa minimalism","explanation":"No beige-on-beige softness or lifestyle calm that weakens function."}
- {"name":"Showroom gloss","explanation":"No glassmorphism, neon, gradient buttons, or polished SaaS hero effects."}
- {"name":"Over-compression","explanation":"The space between objects is part of the content; never pack the screen to prove efficiency."}

### Visual Character

- An asymmetrical grid with one reserved empty ma bay and content offset into the remaining columns.
- Flat warm-paper planes defined by tone and soft elevation - no box borders, no accent edges.
- Large ma intervals (48-96px) around forms, metrics, and navigation.
- Barely-visible concrete-paper texture (low-opacity speckle and thin horizontal shadow bands) instead of gradients.
- Square 0px corners on structure, with only small pills, chips, and avatars fully rounded.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F7F5F0` |
| surface_solid | `#FAF9F6` |
| text | `#1A1714` |
| muted | `#7C766D` |
| border | `#D8D2C8` |
| accent | `#8A6F4D` |
| accent_2 | `#77624D` |
| accent_soft | `#EAE3D6` |
| on_accent | `#FAF9F6` |
| success | `#4E6B4A` |
| warning | `#9A6B22` |
| error | `#8B2F2A` |
| info | `#4D6270` |
| stone | `#B8B0A4` |
| weathered_wood | `#77624D` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Noto Serif JP
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.6
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Serif+JP:wght@500;600;700&display=swap

### Radii

- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 2px rgba(26,23,20,0.06)
- **Md**: 0 18px 50px rgba(26,23,20,0.08)
- **Lg**: 0 30px 80px rgba(26,23,20,0.11)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat warm paper planes defined by surface tone and soft elevation; no box borders, no accent edges.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairlines survive only as a deliberate ornament system - the ma-seam, the short rule under a mono overline, and table/list dividers - never a box around a card.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2,0,0.1,1)
- **Philosophy**: deliberate; like a paper screen settling, never bouncing or celebrating.

## Rules

### Composition

A quiet asymmetrical grid: reserve one column as the ma bay, place primary work slightly off-centre, let secondary controls sit in narrow vertical planes. Major groups get 48-96px of visible interval. Alignment and silence create rhythm.

### Hierarchy

Priority from spatial isolation, illumination, shadow density, and type scale. Display and numbers in Noto Serif JP; labels in IBM Plex Mono. The one earth accent appears only on a mark, a selection, or a single call.

### Density

Medium-low with deliberate pauses: lists compact enough for work but never crowded; full-height controls; the screen feels edited rather than empty.

### Signature Patterns

- A reserved empty ma bay: a narrow interval with one rotated mono label and a single hairline seam.
- Planes read through surface tone and soft elevation - the important plane sits deeper in the light with more surrounding space, never a border or an accent edge.
- A soft raking light models the leading plane (light as hierarchy) and recolours with the accent on a palette swap.
- Section headers pair a small IBM Plex Mono overline with a short 32px hairline rule and generous negative space below.
- Interactive focus uses an offset earth outline and a faint earth wash, preserving square 0px corners instead of glow or colour floods.

## Layout

### Density

Medium-low; every cluster gets enough void to read as a deliberate pause.

### Grid

Desktop uses an asymmetric grid with one reserved empty ma bay; content offsets into the remaining columns, max width ~1240-1360px.

### Whitespace

Whitespace is active structure: 48px minimum between primary regions, 64px around decision areas, 96px where the reader should slow.

### Breakpoints

- **Desktop**: 1024px+: asymmetric grid with the empty ma bay
- **Tablet**: 768-1024px: ma bay becomes a top interval, side rails collapse
- **Mobile**: 0-767px: single column, intervals reduce to 32px but stay visible

### Responsive

Collapse side rails beneath the main panel on tablet; stack all panels on mobile; keep controls 44px minimum; tables become card rows rather than overflow.

## Guidance

### Do

- Use pure #FFFFFF for the main ground and warm paper only for material planes.
- Keep letter-spacing at -0.02em; lean on Noto Serif JP + IBM Plex Sans for quiet authority.
- Reserve at least one intentionally empty ma bay in desktop layouts.
- Use 0px square corners for structural UI; reserve 9999px for pills, chips, avatars.
- Express hierarchy with light, shadow, spacing, and type scale before adding colour.
- Use the muted earth accent once per decision, not as a brand wash.
- Keep texture barely visible and always behind content.

### Don't

- Do not box cards in borders, and never give a card an accent edge on any side.
- Do not use gradients as decoration, glossy cards, glassmorphism, or neon washes.
- Do not decorate with stereotypical Japanese motifs, brush fonts, or red circles.
- Do not fill every column; visible emptiness is part of the layout.
- Do not use arbitrary radii (8, 12, 20, 32, 48px).
- Do not centre everything or make symmetrical landing sections.
- Do not add multiple accent colours; one muted earth accent is enough.

### Usage Context

Editorial tools, product inventory, design archives, calm operations dashboards, architecture portfolios, material libraries, and focused planning interfaces where reduction, touch, and careful reading matter.

### Accessibility

Maintain WCAG AA contrast; visible offset earth focus outlines; 44px touch targets; never encode status by colour alone (pills carry a mark and a word); keep texture overlays low-opacity behind content; reduced-motion settles the landing to a readable static document.

## Imagery Direction

### Technique

Quiet architectural and material photography in the Tadao Ando tradition: bare poured concrete, off-white washi paper, weathered cedar and rough stone, raking daylight and deep restrained shadow, generous empty space. Natural aspect, no text.

### Palette

- #FFFFFF
- #F7F5F0
- #1A1714
- #8A6F4D
- #B8B0A4

### Subjects

- concrete threshold and light-seam interiors
- folded off-white paper
- weathered wood and stone material studies
- empty interval rooms with a single blade of light

### Pairs With

doma

### Negative Prompt

NO text, NO letters, NO logos, no people, no gradients as decoration, no glossy sheen, no cultural cliche motifs

### Plate Manifest

- **Hero-Image**: concrete plane with a vertical raking light seam
- **Plate-1**: concrete threshold / morning shadow
- **Plate-2**: folded washi paper
- **Plate-3**: weathered cedar and stone
- **Plate-4**: tall vertical light-seam interval room

---
version: "alpha"
name: "Doma"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FFFFFF"
  surface: "#F7F5F0"
  surface_solid: "#FAF9F6"
  text: "#1A1714"
  muted: "#7C766D"
  border: "#D8D2C8"
  accent: "#8A6F4D"
  accent_2: "#77624D"
  accent_soft: "#EAE3D6"
  on_accent: "#FAF9F6"
  success: "#4E6B4A"
  warning: "#9A6B22"
  error: "#8B2F2A"
  info: "#4D6270"
  stone: "#B8B0A4"
  weathered_wood: "#77624D"
typography:
  headline-lg:
    fontFamily: "Noto Serif JP"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Noto Serif JP"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    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:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-stone:
    backgroundColor: "{colors.stone}"
  color-reference-weathered_wood:
    backgroundColor: "{colors.weathered_wood}"
  button-primary:
    backgroundColor: "{colors.accent}"
    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"
---

# Doma

## Overview

Doma (the bare threshold floor of a traditional house) is spatial editing for interfaces. It treats interval, emptiness, and light as structural material rather than leftover space. It draws from ma (the active pause), wabi-sabi, MUJI no-brand restraint, Kenya Hara's emptiness-as-open-vessel, Naoto Fukasawa's without-thought affordances, and Tadao Ando's disciplined planes of concrete, light, and shadow. Every element earns its place by the silence around it; hierarchy comes from illumination, shadow, and exposed space rather than badges, gradients, or saturated colour.

### Values

- {"name":"Active emptiness","explanation":"White and warm paper fields behave as structural intervals; isolated controls and quiet planes make the pause legible."}
- {"name":"Material restraint","explanation":"Surfaces suggest paper, stone, concrete, and weathered wood through slight texture and edge discipline rather than illustration."}
- {"name":"Quiet affordance","explanation":"Controls read through proportion, placement, weight, and one tactile measure line, avoiding loud colour or decorative state."}
- {"name":"Light as hierarchy","explanation":"A plane that sits deeper in the light reads as more important; priority comes from illumination and space, not a badge or an accent edge."}
- {"name":"Weathered precision","explanation":"The layout is measured and rigorous while micro-texture and one muted earth tone keep it human."}
- {"name":"No-brand neutrality","explanation":"The interface recedes behind the work, using understated typography and sparse labelling."}

### Anti-Values

- {"name":"Ornamental Japanism","explanation":"No cherry blossoms, faux calligraphy, red-sun motifs, or cultural cliche."}
- {"name":"Spa minimalism","explanation":"No beige-on-beige softness or lifestyle calm that weakens function."}
- {"name":"Showroom gloss","explanation":"No glassmorphism, neon, gradient buttons, or polished SaaS hero effects."}
- {"name":"Over-compression","explanation":"The space between objects is part of the content; never pack the screen to prove efficiency."}

### Visual Character

- An asymmetrical grid with one reserved empty ma bay and content offset into the remaining columns.
- Flat warm-paper planes defined by tone and soft elevation - no box borders, no accent edges.
- Large ma intervals (48-96px) around forms, metrics, and navigation.
- Barely-visible concrete-paper texture (low-opacity speckle and thin horizontal shadow bands) instead of gradients.
- Square 0px corners on structure, with only small pills, chips, and avatars fully rounded.

## Colors

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

| Token | Value |
|-------|-------|
| bg | `#FFFFFF` |
| surface | `#F7F5F0` |
| surface_solid | `#FAF9F6` |
| text | `#1A1714` |
| muted | `#7C766D` |
| border | `#D8D2C8` |
| accent | `#8A6F4D` |
| accent_2 | `#77624D` |
| accent_soft | `#EAE3D6` |
| on_accent | `#FAF9F6` |
| success | `#4E6B4A` |
| warning | `#9A6B22` |
| error | `#8B2F2A` |
| info | `#4D6270` |
| stone | `#B8B0A4` |
| weathered_wood | `#77624D` |

## Typography

- **Headline-Lg**: Noto Serif JP, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Noto Serif JP, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, 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`
- **Step-9**: `128px`

### Density

Medium-low; every cluster gets enough void to read as a deliberate pause.

### Grid

Desktop uses an asymmetric grid with one reserved empty ma bay; content offsets into the remaining columns, max width ~1240-1360px.

### Whitespace

Whitespace is active structure: 48px minimum between primary regions, 64px around decision areas, 96px where the reader should slow.

### Breakpoints

- **Desktop**: 1024px+: asymmetric grid with the empty ma bay
- **Tablet**: 768-1024px: ma bay becomes a top interval, side rails collapse
- **Mobile**: 0-767px: single column, intervals reduce to 32px but stay visible

### Responsive

Collapse side rails beneath the main panel on tablet; stack all panels on mobile; keep controls 44px minimum; tables become card rows rather than overflow.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(26,23,20,0.06)
- **Md**: 0 18px 50px rgba(26,23,20,0.08)
- **Lg**: 0 30px 80px rgba(26,23,20,0.11)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat warm paper planes defined by surface tone and soft elevation; no box borders, no accent edges.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairlines survive only as a deliberate ornament system - the ma-seam, the short rule under a mono overline, and table/list dividers - never a box around a card.

## Components

### Composition

A quiet asymmetrical grid: reserve one column as the ma bay, place primary work slightly off-centre, let secondary controls sit in narrow vertical planes. Major groups get 48-96px of visible interval. Alignment and silence create rhythm.

### Hierarchy

Priority from spatial isolation, illumination, shadow density, and type scale. Display and numbers in Noto Serif JP; labels in IBM Plex Mono. The one earth accent appears only on a mark, a selection, or a single call.

### Density

Medium-low with deliberate pauses: lists compact enough for work but never crowded; full-height controls; the screen feels edited rather than empty.

### Signature Patterns

- A reserved empty ma bay: a narrow interval with one rotated mono label and a single hairline seam.
- Planes read through surface tone and soft elevation - the important plane sits deeper in the light with more surrounding space, never a border or an accent edge.
- A soft raking light models the leading plane (light as hierarchy) and recolours with the accent on a palette swap.
- Section headers pair a small IBM Plex Mono overline with a short 32px hairline rule and generous negative space below.
- Interactive focus uses an offset earth outline and a faint earth wash, preserving square 0px corners instead of glow or colour floods.

## 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-019f8b0d-6289-7c72-b78e-9ab4b60e8ddd/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 pure #FFFFFF for the main ground and warm paper only for material planes.
- Do Keep letter-spacing at -0.02em; lean on Noto Serif JP + IBM Plex Sans for quiet authority.
- Do Reserve at least one intentionally empty ma bay in desktop layouts.
- Do Use 0px square corners for structural UI; reserve 9999px for pills, chips, avatars.
- Do Express hierarchy with light, shadow, spacing, and type scale before adding colour.
- Do Use the muted earth accent once per decision, not as a brand wash.
- Do Keep texture barely visible and always behind content.
- Don't Do not box cards in borders, and never give a card an accent edge on any side.
- Don't Do not use gradients as decoration, glossy cards, glassmorphism, or neon washes.
- Don't Do not decorate with stereotypical Japanese motifs, brush fonts, or red circles.
- Don't Do not fill every column; visible emptiness is part of the layout.
- Don't Do not use arbitrary radii (8, 12, 20, 32, 48px).
- Don't Do not centre everything or make symmetrical landing sections.
- Don't Do not add multiple accent colours; one muted earth accent is enough.

### Usage Context

Editorial tools, product inventory, design archives, calm operations dashboards, architecture portfolios, material libraries, and focused planning interfaces where reduction, touch, and careful reading matter.

### Accessibility

Maintain WCAG AA contrast; visible offset earth focus outlines; 44px touch targets; never encode status by colour alone (pills carry a mark and a word); keep texture overlays low-opacity behind content; reduced-motion settles the landing to a readable static document.

## Imagery Direction

### Technique

Quiet architectural and material photography in the Tadao Ando tradition: bare poured concrete, off-white washi paper, weathered cedar and rough stone, raking daylight and deep restrained shadow, generous empty space. Natural aspect, no text.

### Palette

- #FFFFFF
- #F7F5F0
- #1A1714
- #8A6F4D
- #B8B0A4

### Subjects

- concrete threshold and light-seam interiors
- folded off-white paper
- weathered wood and stone material studies
- empty interval rooms with a single blade of light

### Pairs With

doma

### Negative Prompt

NO text, NO letters, NO logos, no people, no gradients as decoration, no glossy sheen, no cultural cliche motifs

### Plate Manifest

- **Hero-Image**: concrete plane with a vertical raking light seam
- **Plate-1**: concrete threshold / morning shadow
- **Plate-2**: folded washi paper
- **Plate-3**: weathered cedar and stone
- **Plate-4**: tall vertical light-seam interval room

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "doma",
  "type": "registry:theme",
  "title": "Doma shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#1A1714",
      "card": "#F7F5F0",
      "card-foreground": "#1A1714",
      "popover": "#F7F5F0",
      "popover-foreground": "#1A1714",
      "primary": "#1A1714",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7C766D",
      "muted-foreground": "#1A1714",
      "accent": "#8A6F4D",
      "accent-foreground": "#ffffff",
      "destructive": "#8B2F2A",
      "border": "#D8D2C8",
      "input": "#D8D2C8",
      "ring": "#8A6F4D",
      "chart-1": "#1A1714",
      "chart-2": "#f4f4f5",
      "chart-3": "#8A6F4D",
      "chart-4": "#4E6B4A",
      "chart-5": "#9A6B22",
      "sidebar": "#F7F5F0",
      "sidebar-foreground": "#1A1714",
      "sidebar-primary": "#1A1714",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4D6270",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D2C8",
      "sidebar-ring": "#8A6F4D",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1A1714",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#8A6F4D",
      "accent-foreground": "#ffffff",
      "destructive": "#8B2F2A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#8A6F4D",
      "chart-1": "#1A1714",
      "chart-2": "#f4f4f5",
      "chart-3": "#8A6F4D",
      "chart-4": "#4E6B4A",
      "chart-5": "#9A6B22",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1A1714",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8A6F4D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#8A6F4D",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8b0d-6289-7c72-b78e-9ab4b60e8ddd",
    "slug": "doma",
    "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": {
      "colors": [
        "accent",
        "accent_2",
        "accent_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "stone",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning",
        "weathered_wood"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```