Tachikiri

# Tachikiri

## Philosophy

Tachikiri is a monochrome koma-noir interface language for systems that feel observed rather than operated: manga panel grammar, command-line evidence, and cinematic calm reduced to black ink, paper white, a grayscale wash, and a single rare phosphor-green signal. A page is read in beats — koma panels carry state, the gutter does the pacing, and a panel that goes live inverts to a black terminal slab with one phosphor cursor.

### Values

- Restraint before atmosphere: noir is made by omission, hard contrast, and visible silence, never by decorative darkness.
- Panels as interface logic: square koma borders and cinematic gutters define state, grouping, and reading order.
- Typed evidence over ornament: shell prompts, paths, timestamps, and diagnostics carry the references structurally.
- Existential calm: screens feel precise, post-human, and unhurried even when reporting something critical.
- Accent as signal only: phosphor green appears rarely, for live cursors and decisive machine acknowledgement.
- Recognizable without colour: the identity survives entirely in border weight, gutter, type rhythm, and negative space.

### Anti-Values

- Character art, anime eyes, mecha silhouettes, city neon, or cosplay references pasted onto generic cards.
- Busy hacker dashboards, glowing gradients, rainbow terminal palettes, or equal-weight analytics tiles.
- Soft SaaS chrome: rounded grey cards, broad blurred shadows, friendly blue CTAs, and centred marketing symmetry.
- Decorative scanlines or halftone laid over body text where they reduce legibility for the sake of texture.

### Visual Character

- Square koma panels with a 2px black outer rule, a 1px inner diagnostic frame, a shell-path tab crossing the border, and a timestamp pinned into the gutter.
- A vertical title rail with writing-mode vertical-rl type and stacked system codes locked to one edge of a spread.
- Terminal-noir inversion: selected panels flip to a near-black slab with white monospace output and a single blinking phosphor cursor.
- Ink-wash halftone voids: grayscale radial dot fields masked into empty corners with one distant phosphor point.
- Cursor-state accent discipline: #7CFF9A appears only as a 1ch cursor, a 2px focus ring, the one primary action, or a tiny status dot beside a word.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A0A0B` |
| surface | `#0F0F11` |
| panel | `#F4F2EC` |
| on_panel | `#0A0A0B` |
| text | `#EDEAE2` |
| muted | `#8A8A82` |
| border | `#26262A` |
| rule | `#070708` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| success | `#5FBF7E` |
| warning | `#C9A24B` |
| error | `#E0584B` |
| info | `#6E93A1` |

### Typography

- **Base Size**: 17px
- **Body Font**: Noto Sans
- **Heading Font**: Anton
- **Mono Font**: Kode Mono
- **Heading Weight**: 400
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Display Letter Spacing**: -0.035em
- **Label Letter Spacing**: 0.16em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Anton&family=Kode+Mono:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Shell**: 16px
- **Full**: 9999px

### Shadows

- **Depth**: 18px 18px 0 rgba(0,0,0,0.55)
- **Depth Paper**: 14px 14px 0 rgba(7,7,8,0.85)
- **Inner**: inset 0 0 0 1px #26262A

### Spacing

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

### Surfaces

- **Treatment**: Near-black room ground with paper-white inverted koma; grayscale halftone dot wash below legibility thresholds, masked into corners.
- **Card Style**: Square koma panels — heavy black exterior rule, hairline inner diagnostic frame, shell-path tab crossing the border, timestamp pinned in the gutter; never nested.
- **Bg Pattern**: Sparse radial halftone dot fields and shell-path labels in gutters; one distant phosphor point in empty fields.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: High-contrast black koma rules with hairline inner frames; the accent border appears only for live phosphor focus states.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: Typed and diagnostic: cursor blink, panel inversion, and a quiet scroll reveal. The settled state is the default and renders with no JavaScript; reduced-motion removes all animation.

## Rules

### Composition

Compose screens as asymmetric manga spreads: one dominant evidence panel, one vertical title rail, dense terminal slabs, and large unoccupied paper fields. Gutters are visible structure, never leftover space. Avoid equal card rows; every cluster takes a different scale or orientation.

### Hierarchy

Hierarchy comes from panel scale, black-white inversion, vertical type, and terminal density. Display headings use condensed Anton at uppercase; operational copy uses Kode Mono; body annotations use Noto Sans with mandatory negative tracking.

### Density

Alternate dense terminal slabs and sparse paper panels. Prompt gaps can tighten to 4px while narrative separations reach 96–128px, so calm negative space stays the dominant register.

### Signature

- Koma diagnostic frame: nested square panel borders with a shell-path tab crossing the border and a timestamp pinned in the gutter.
- Vertical title rail: writing-mode vertical-rl type with stacked system codes locked to one edge.
- Terminal-noir inversion: selected panels flip to black ground with white monospace output and a phosphor cursor.
- Ink-wash halftone voids: grayscale dot fields in empty corners with one distant phosphor point.
- Cursor-state accent discipline: phosphor green only as a cursor, a focus ring, the one primary action, or a status dot beside a word.

## Layout

### Grid

Desktop uses an asymmetric spread on a max-width near 1320px with 24px gutters; panels span uneven widths, including one dominant frame and one narrow vertical rail. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

Cinematic and asymmetric: preserve 64–128px paper fields around key panels while prompts and metadata cluster at 4–12px.

### Density

Medium-low overall, with deliberate pockets of terminal compression; quiet, not empty.

### Responsive

Mobile below 640px stacks panels to a single column and preserves the title rail; tablet 640–1024px uses two columns; desktop above 1024px restores the asymmetric spread. Render well from ~390px to 2560px+ with no horizontal overflow.

### Breakpoints

- **Mobile**: 390-640px
- **Tablet**: 640-1024px
- **Desktop**: 1024-2560px
- **Ultrawide**: 2560px+

## Guidance

### Do

- Use black, paper white, and grayscale as the real palette; introduce phosphor green only for live machine signal or focus.
- Make koma borders, gutters, and cropped frames the layout structure instead of adding decorative illustration.
- Write real interface language: shell paths, timestamps, error codes, diagnostic labels, and tabular command output.
- Keep corners square except a rare 16px device shell that needs separation.
- Vary scale aggressively: one dominant panel, one dense slab, one quiet void, and at least one vertical or rotated text moment.
- Apply -0.02em tracking to body and tighter display tracking so the austerity feels polished rather than default.
- Pair any colour-coded status with a dot, a word, or border weight so the accent is never the only cue.

### Don't

- Do not use character art, anime eyes, mecha silhouettes, city neon, or other literal cosplay references.
- Do not build three equal analytics cards or a generic SaaS dashboard scene.
- Do not add glow, multi-color gradients, chromatic aberration, or a rainbow hacker palette.
- Do not soften the language with large rounded cards, blue CTAs, or friendly product illustration.
- Do not cover small text with scanlines, halftone dots, or low-contrast gray overlays.
- Do not use the accent for decoration, icons in bulk, section backgrounds, or brand-colour flooding.
- Do not centre every section; asymmetry and gutters must carry the manga-spread rhythm.

### Accessibility

Black-on-paper and paper-on-ink exceed WCAG AA. The phosphor accent is supplemental; focus states include a visible 2px ring; touch targets stay at least 44px; reduced-motion disables the cursor and reveal animations.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone illustration — hard inked contours, manga halftone dot tones modelling volume, pure-black shadow masses against paper-white highlights, grayscale ink-wash bleeding at the edges, and a single tiny phosphor-green glint as the only colour in the frame.

### Subjects

- a lone CRT terminal in a dark operations room
- forensic archive interiors and empty consoles
- post-human writing systems and memory machines
- objects and figures treated as inked screentone plates

### Usage

One full-bleed landing hero in the ink-screentone technique with a hard cinematic crop and deep negative space for the overlay; the single phosphor glint placed off-centre. Never illustration on the thumbnail or behind body text.

---
version: "alpha"
name: "Tachikiri"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0A0A0B"
  surface: "#0F0F11"
  panel: "#F4F2EC"
  on_panel: "#0A0A0B"
  text: "#EDEAE2"
  muted: "#8A8A82"
  border: "#26262A"
  rule: "#070708"
  accent: "#7CFF9A"
  on_accent: "#06140A"
  success: "#5FBF7E"
  warning: "#C9A24B"
  error: "#E0584B"
  info: "#6E93A1"
typography:
  headline-lg:
    fontFamily: "Anton"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Anton"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Noto Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Kode Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  shell: "16px"
  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-panel:
    backgroundColor: "{colors.panel}"
  color-reference-on_panel:
    backgroundColor: "{colors.on_panel}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-rule:
    backgroundColor: "{colors.rule}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  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}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    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"
---

# Tachikiri

## Overview

Tachikiri is a monochrome koma-noir interface language for systems that feel observed rather than operated: manga panel grammar, command-line evidence, and cinematic calm reduced to black ink, paper white, a grayscale wash, and a single rare phosphor-green signal. A page is read in beats — koma panels carry state, the gutter does the pacing, and a panel that goes live inverts to a black terminal slab with one phosphor cursor.

### Values

- Restraint before atmosphere: noir is made by omission, hard contrast, and visible silence, never by decorative darkness.
- Panels as interface logic: square koma borders and cinematic gutters define state, grouping, and reading order.
- Typed evidence over ornament: shell prompts, paths, timestamps, and diagnostics carry the references structurally.
- Existential calm: screens feel precise, post-human, and unhurried even when reporting something critical.
- Accent as signal only: phosphor green appears rarely, for live cursors and decisive machine acknowledgement.
- Recognizable without colour: the identity survives entirely in border weight, gutter, type rhythm, and negative space.

### Anti-Values

- Character art, anime eyes, mecha silhouettes, city neon, or cosplay references pasted onto generic cards.
- Busy hacker dashboards, glowing gradients, rainbow terminal palettes, or equal-weight analytics tiles.
- Soft SaaS chrome: rounded grey cards, broad blurred shadows, friendly blue CTAs, and centred marketing symmetry.
- Decorative scanlines or halftone laid over body text where they reduce legibility for the sake of texture.

### Visual Character

- Square koma panels with a 2px black outer rule, a 1px inner diagnostic frame, a shell-path tab crossing the border, and a timestamp pinned into the gutter.
- A vertical title rail with writing-mode vertical-rl type and stacked system codes locked to one edge of a spread.
- Terminal-noir inversion: selected panels flip to a near-black slab with white monospace output and a single blinking phosphor cursor.
- Ink-wash halftone voids: grayscale radial dot fields masked into empty corners with one distant phosphor point.
- Cursor-state accent discipline: #7CFF9A appears only as a 1ch cursor, a 2px focus ring, the one primary action, or a tiny status dot beside a word.

## 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 | `#0A0A0B` |
| surface | `#0F0F11` |
| panel | `#F4F2EC` |
| on_panel | `#0A0A0B` |
| text | `#EDEAE2` |
| muted | `#8A8A82` |
| border | `#26262A` |
| rule | `#070708` |
| accent | `#7CFF9A` |
| on_accent | `#06140A` |
| success | `#5FBF7E` |
| warning | `#C9A24B` |
| error | `#E0584B` |
| info | `#6E93A1` |

## Typography

- **Headline-Lg**: Anton, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Anton, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: Kode 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`

### Grid

Desktop uses an asymmetric spread on a max-width near 1320px with 24px gutters; panels span uneven widths, including one dominant frame and one narrow vertical rail. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

Cinematic and asymmetric: preserve 64–128px paper fields around key panels while prompts and metadata cluster at 4–12px.

### Density

Medium-low overall, with deliberate pockets of terminal compression; quiet, not empty.

### Responsive

Mobile below 640px stacks panels to a single column and preserves the title rail; tablet 640–1024px uses two columns; desktop above 1024px restores the asymmetric spread. Render well from ~390px to 2560px+ with no horizontal overflow.

### Breakpoints

- **Mobile**: 390-640px
- **Tablet**: 640-1024px
- **Desktop**: 1024-2560px
- **Ultrawide**: 2560px+

## Elevation & Depth

### Shadows

- **Depth**: 18px 18px 0 rgba(0,0,0,0.55)
- **Depth Paper**: 14px 14px 0 rgba(7,7,8,0.85)
- **Inner**: inset 0 0 0 1px #26262A

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Shell**: `16px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Near-black room ground with paper-white inverted koma; grayscale halftone dot wash below legibility thresholds, masked into corners.
- **Card Style**: Square koma panels — heavy black exterior rule, hairline inner diagnostic frame, shell-path tab crossing the border, timestamp pinned in the gutter; never nested.
- **Bg Pattern**: Sparse radial halftone dot fields and shell-path labels in gutters; one distant phosphor point in empty fields.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: High-contrast black koma rules with hairline inner frames; the accent border appears only for live phosphor focus states.

## Components

### Composition

Compose screens as asymmetric manga spreads: one dominant evidence panel, one vertical title rail, dense terminal slabs, and large unoccupied paper fields. Gutters are visible structure, never leftover space. Avoid equal card rows; every cluster takes a different scale or orientation.

### Hierarchy

Hierarchy comes from panel scale, black-white inversion, vertical type, and terminal density. Display headings use condensed Anton at uppercase; operational copy uses Kode Mono; body annotations use Noto Sans with mandatory negative tracking.

### Density

Alternate dense terminal slabs and sparse paper panels. Prompt gaps can tighten to 4px while narrative separations reach 96–128px, so calm negative space stays the dominant register.

### Signature

- Koma diagnostic frame: nested square panel borders with a shell-path tab crossing the border and a timestamp pinned in the gutter.
- Vertical title rail: writing-mode vertical-rl type with stacked system codes locked to one edge.
- Terminal-noir inversion: selected panels flip to black ground with white monospace output and a phosphor cursor.
- Ink-wash halftone voids: grayscale dot fields in empty corners with one distant phosphor point.
- Cursor-state accent discipline: phosphor green only as a cursor, a focus ring, the one primary action, or a status dot beside a word.

## 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-019ef820-29bb-7941-9720-bb01d0378e82/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 black, paper white, and grayscale as the real palette; introduce phosphor green only for live machine signal or focus.
- Do Make koma borders, gutters, and cropped frames the layout structure instead of adding decorative illustration.
- Do Write real interface language: shell paths, timestamps, error codes, diagnostic labels, and tabular command output.
- Do Keep corners square except a rare 16px device shell that needs separation.
- Do Vary scale aggressively: one dominant panel, one dense slab, one quiet void, and at least one vertical or rotated text moment.
- Do Apply -0.02em tracking to body and tighter display tracking so the austerity feels polished rather than default.
- Do Pair any colour-coded status with a dot, a word, or border weight so the accent is never the only cue.
- Don't Do not use character art, anime eyes, mecha silhouettes, city neon, or other literal cosplay references.
- Don't Do not build three equal analytics cards or a generic SaaS dashboard scene.
- Don't Do not add glow, multi-color gradients, chromatic aberration, or a rainbow hacker palette.
- Don't Do not soften the language with large rounded cards, blue CTAs, or friendly product illustration.
- Don't Do not cover small text with scanlines, halftone dots, or low-contrast gray overlays.
- Don't Do not use the accent for decoration, icons in bulk, section backgrounds, or brand-colour flooding.
- Don't Do not centre every section; asymmetry and gutters must carry the manga-spread rhythm.

### Accessibility

Black-on-paper and paper-on-ink exceed WCAG AA. The phosphor accent is supplemental; focus states include a visible 2px ring; touch targets stay at least 44px; reduced-motion disables the cursor and reveal animations.

## Imagery Direction

### Pairs With

phosphor-ledger

### Summary

High-contrast black-ink screentone illustration — hard inked contours, manga halftone dot tones modelling volume, pure-black shadow masses against paper-white highlights, grayscale ink-wash bleeding at the edges, and a single tiny phosphor-green glint as the only colour in the frame.

### Subjects

- a lone CRT terminal in a dark operations room
- forensic archive interiors and empty consoles
- post-human writing systems and memory machines
- objects and figures treated as inked screentone plates

### Usage

One full-bleed landing hero in the ink-screentone technique with a hard cinematic crop and deep negative space for the overlay; the single phosphor glint placed off-centre. Never illustration on the thumbnail or behind body text.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tachikiri",
  "type": "registry:theme",
  "title": "Tachikiri shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A0A0B",
      "foreground": "#EDEAE2",
      "card": "#0F0F11",
      "card-foreground": "#EDEAE2",
      "popover": "#0F0F11",
      "popover-foreground": "#EDEAE2",
      "primary": "#EDEAE2",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8A8A82",
      "muted-foreground": "#EDEAE2",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#E0584B",
      "border": "#26262A",
      "input": "#26262A",
      "ring": "#7CFF9A",
      "chart-1": "#EDEAE2",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#5FBF7E",
      "chart-5": "#C9A24B",
      "sidebar": "#0F0F11",
      "sidebar-foreground": "#EDEAE2",
      "sidebar-primary": "#EDEAE2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#6E93A1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#26262A",
      "sidebar-ring": "#7CFF9A",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#EDEAE2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7CFF9A",
      "accent-foreground": "#111111",
      "destructive": "#E0584B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7CFF9A",
      "chart-1": "#EDEAE2",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF9A",
      "chart-4": "#5FBF7E",
      "chart-5": "#C9A24B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#EDEAE2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7CFF9A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7CFF9A",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef820-29bb-7941-9720-bb01d0378e82",
    "slug": "tachikiri",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "on_panel",
        "panel",
        "rule",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "label_letter_spacing",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "md",
        "none",
        "shell",
        "sm"
      ],
      "shadows": [
        "depth",
        "depth_paper",
        "inner"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```