Yinchuang

# Yinchuang

## Philosophy

印床 — the carver's bed. A reimagination of the seal-carving concept: instead of a stamp pressed onto a page, every record begins on the bed (印床), the vise that holds the stone square while the knife works. Yinchuang makes that bed its whole structure — each panel is a cell on a tessellated stone grid, tiles abutting tiles, and the only border is the thin uncarved channel between them. Emphasis is not a shadow or an outline; it is cinnabar coverage — the cell that matters is flooded with ink, the way uncarved paper defines a relief seal. The ground is dark carved stone, not warm paper; cinnabar glows against it. Headings are mechanical condensed caps, not literati serif. This is the console for the things a seal proves: collection catalogues, provenance trails, and the authentication desk where impressions are registered against the master rubbing.

### Values

- The bed holds the stone — every record sits in a cell on one tessellated grid
- The channel is the only border — uncarved negative space defines every mass around it
- Emphasis is cinnabar coverage, not a floating shadow — the lit cell carries the ink
- Registration is alignment — a gold crosshair squares the stone in the vise
- Square geometry and mechanical caps convey carved authority without calligraphy

### Anti-Values

- Card borders, outlines, or single accent edges — the channel does that work
- Warm-paper cream grounds and giant literati serif mastheads — that is the refinement, not this
- Floating soft drop-shadows that lift tiles off the bed
- Pills and circular badges — seal forms are square
- Gradients and photographic backgrounds inside the UI — the field is flat carved stone
- Bounce or elastic easing — the press is firm and decisive

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#14110D` |
| surface | `#1F1A13` |
| surface_2 | `#2A231A` |
| text | `#F4ECDD` |
| muted | `#A99B83` |
| border | `#3A3025` |
| channel | `#0C0A07` |
| accent | `#D83A2A` |
| accent_deep | `#A82317` |
| on_accent | `#FBF2E2` |
| gold | `#C9A24B` |
| success | `#7FA04A` |
| warning | `#C9A24B` |
| error | `#E0533F` |
| info | `#5C8BB0` |
| primary | `#D83A2A` |
| secondary | `#F4ECDD` |

### Typography

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

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 0px

### Shadows

- **Press**: translateY(1px) on active — the firm decisive press
- **Input Stroke**: inset 0 0 0 1px #3A3025
- **Input Focus**: inset 0 0 0 2px #D83A2A
- **Chop Seal**: inset 0 0 0 2px #D83A2A

### Spacing

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

### Surfaces

- **Treatment**: dark carved-stone field with faint CSS paper-fiber speckle; raised stone slabs separated only by a 3px uncarved channel
- **Card Style**: stone slab (surface) on a channel bed; the lit cell floods with cinnabar; no borders, never floating
- **Bg Pattern**: subtle radial speckle and faint cinnabar/gold blobs via CSS gradients only; no photographic imagery in the UI

### Borders

- **Default Width**: 0px
- **Channel Width**: 3px
- **Style**: none — the uncarved channel between tiles is the only divider
- **Character**: no card borders, no outlines, no single accent edges; the 3px channel and the lit cinnabar cell carry separation and emphasis

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2,0,0.3,1)
- **Philosophy**: firm decisive press: the primary control translates one pixel down on activation; landing sections rise in once on scroll. Settled state is the no-JS default; an inline script gates the hidden start-state behind an .anim class on <html>. prefers-reduced-motion respected.

## Rules

### Composition

Tessellate content into a stone bed: a grid of stone-slab cells on a dark channel background, separated by a 3px uncarved channel and nothing else. Content caps at ~1180px and centres; only the landing hero spans 100vw. Elements align to strong horizontal and vertical axes, like glyphs composed inside a seal face. Gold registration crosshairs mark channel intersections.

### Hierarchy

Primary emphasis is cinnabar coverage — the lit cell. Secondary is Archivo weight in paper-ink text; tertiary is muted stone gray and mono labels. Headings are mechanical condensed caps (Archivo 900, uppercase). Chinese seal script appears only small, as a registered chop accent. Gold is reserved for authentication.

### Density

Medium-high. The bed packs records into square cells without crowding; consistent 8px units and a 3px channel separate zones. Mono labels and cell numbers keep the grid legible.

### Signature

The seal-bed grid: tiles tessellate, the channel between them is the only border, gold crosshairs register alignment, and the active record is a lit cinnabar cell. Six named patterns appear live in the embodiment — Carved Cell, Registration Crosshair, Stamp Button group, Seal Badge, Imprint Table, Chop-Mark Divider.

## Layout

### Grid

Tessellated CSS grid on a channel background (background:channel; gap:3px); cells are minmax(0,1fr) so they shrink, never overflow. Content max-width ~1180px, centred; landing hero full-bleed 100vw.

### Whitespace

Generous padding inside cells (32px), always padded above titles; the channel provides crisp separation between zones.

### Density

medium-high

### Responsive

Single column under 880px; nav hidden on mobile; table columns and registration crosshairs drop; nothing overflows horizontally; renders from ~390px to 2560px+.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1180px
- **Wide**: 2560px

## Guidance

### Do

- Lay content into a tessellated stone bed — cells on a channel background, 3px gap as the only divider
- Light the cell that matters with flat cinnabar (#D83A2A); keep the rest quiet stone
- Use Archivo 800-900 uppercase for headings — mechanical caps, not calligraphy
- Reserve registration gold (#C9A24B) for alignment crosshairs and curator authentication
- Use Noto Serif SC only small, as a registered chop accent (印鑒 真迹)
- Keep every form control square with an inset stroke; focus deepens to a cinnabar stroke
- Make one button cinnabar-primary; the set shares one height on a channel bed
- Render the settled state with no JS; gate motion behind an .anim class on <html>

### Don't

- Don't add card borders, outlines, or single accent edges — the channel is the border
- Don't use a warm cream-paper ground or a giant literati serif masthead — that is the Zhuwen refinement
- Don't round corners — radius is 0 everywhere
- Don't float tiles with soft drop-shadows off the bed
- Don't use pills or circular badges — status reads as a square chop
- Don't let cinnabar and gold fight; gold is authentication only
- Don't put photographic imagery inside the UI — only the landing hero carries the cinnabar art

### Accessibility

WCAG AA on dark stone: paper-ink text (#F4ECDD) on ground (#14110D) ~13:1; cinnabar primary text on cinnabar (#FBF2E2 on #D83A2A) meets AA for the large mono labels used. Status badges always carry a text label, never colour alone. Focus states use a 2px cinnabar inset stroke or a gold outline. Touch targets meet 44px. prefers-reduced-motion disables reveals.

## Imagery Direction

### Pairs With

cinnabar

### Summary

One full-bleed cinnabar seal-impression hero — a dense lattice of carved relief motifs (dragon, key-fret, cloud-scroll, phoenix, lotus) on a square nine-cell grid, vermilion on cream paper with grainy stamped edges, read behind a legible dark ink overlay. Inside the UI, imagery is abstract CSS only; the bed mechanic carries the visual identity.

### Subjects

- a seal-bed lattice of carved relief motifs
- a single carved dragon chop
- a key-fret / cloud-scroll tessellation
- an archaic seal-script glyph block

### Usage

Landing hero only, full-bleed via background-image:var(--hero-image) under a solid-edge ink overlay; never inside dashboard/table UI.

---
version: "alpha"
name: "Yinchuang"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#14110D"
  surface: "#1F1A13"
  surface_2: "#2A231A"
  text: "#F4ECDD"
  muted: "#A99B83"
  border: "#3A3025"
  channel: "#0C0A07"
  accent: "#D83A2A"
  accent_deep: "#A82317"
  on_accent: "#FBF2E2"
  gold: "#C9A24B"
  success: "#7FA04A"
  warning: "#C9A24B"
  error: "#E0533F"
  info: "#5C8BB0"
  primary: "#D83A2A"
  secondary: "#F4ECDD"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo"
    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"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "0px"
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_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-channel:
    backgroundColor: "{colors.channel}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_deep:
    backgroundColor: "{colors.accent_deep}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-gold:
    backgroundColor: "{colors.gold}"
  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-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  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"
---

# Yinchuang

## Overview

印床 — the carver's bed. A reimagination of the seal-carving concept: instead of a stamp pressed onto a page, every record begins on the bed (印床), the vise that holds the stone square while the knife works. Yinchuang makes that bed its whole structure — each panel is a cell on a tessellated stone grid, tiles abutting tiles, and the only border is the thin uncarved channel between them. Emphasis is not a shadow or an outline; it is cinnabar coverage — the cell that matters is flooded with ink, the way uncarved paper defines a relief seal. The ground is dark carved stone, not warm paper; cinnabar glows against it. Headings are mechanical condensed caps, not literati serif. This is the console for the things a seal proves: collection catalogues, provenance trails, and the authentication desk where impressions are registered against the master rubbing.

### Values

- The bed holds the stone — every record sits in a cell on one tessellated grid
- The channel is the only border — uncarved negative space defines every mass around it
- Emphasis is cinnabar coverage, not a floating shadow — the lit cell carries the ink
- Registration is alignment — a gold crosshair squares the stone in the vise
- Square geometry and mechanical caps convey carved authority without calligraphy

### Anti-Values

- Card borders, outlines, or single accent edges — the channel does that work
- Warm-paper cream grounds and giant literati serif mastheads — that is the refinement, not this
- Floating soft drop-shadows that lift tiles off the bed
- Pills and circular badges — seal forms are square
- Gradients and photographic backgrounds inside the UI — the field is flat carved stone
- Bounce or elastic easing — the press is firm and decisive

## 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 | `#14110D` |
| surface | `#1F1A13` |
| surface_2 | `#2A231A` |
| text | `#F4ECDD` |
| muted | `#A99B83` |
| border | `#3A3025` |
| channel | `#0C0A07` |
| accent | `#D83A2A` |
| accent_deep | `#A82317` |
| on_accent | `#FBF2E2` |
| gold | `#C9A24B` |
| success | `#7FA04A` |
| warning | `#C9A24B` |
| error | `#E0533F` |
| info | `#5C8BB0` |
| primary | `#D83A2A` |
| secondary | `#F4ECDD` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, 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`

### Grid

Tessellated CSS grid on a channel background (background:channel; gap:3px); cells are minmax(0,1fr) so they shrink, never overflow. Content max-width ~1180px, centred; landing hero full-bleed 100vw.

### Whitespace

Generous padding inside cells (32px), always padded above titles; the channel provides crisp separation between zones.

### Density

medium-high

### Responsive

Single column under 880px; nav hidden on mobile; table columns and registration crosshairs drop; nothing overflows horizontally; renders from ~390px to 2560px+.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1180px
- **Wide**: 2560px

## Elevation & Depth

### Shadows

- **Press**: translateY(1px) on active — the firm decisive press
- **Input Stroke**: inset 0 0 0 1px #3A3025
- **Input Focus**: inset 0 0 0 2px #D83A2A
- **Chop Seal**: inset 0 0 0 2px #D83A2A

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`

### Surfaces

- **Treatment**: dark carved-stone field with faint CSS paper-fiber speckle; raised stone slabs separated only by a 3px uncarved channel
- **Card Style**: stone slab (surface) on a channel bed; the lit cell floods with cinnabar; no borders, never floating
- **Bg Pattern**: subtle radial speckle and faint cinnabar/gold blobs via CSS gradients only; no photographic imagery in the UI

### Borders

- **Default Width**: 0px
- **Channel Width**: 3px
- **Style**: none — the uncarved channel between tiles is the only divider
- **Character**: no card borders, no outlines, no single accent edges; the 3px channel and the lit cinnabar cell carry separation and emphasis

## Components

### Composition

Tessellate content into a stone bed: a grid of stone-slab cells on a dark channel background, separated by a 3px uncarved channel and nothing else. Content caps at ~1180px and centres; only the landing hero spans 100vw. Elements align to strong horizontal and vertical axes, like glyphs composed inside a seal face. Gold registration crosshairs mark channel intersections.

### Hierarchy

Primary emphasis is cinnabar coverage — the lit cell. Secondary is Archivo weight in paper-ink text; tertiary is muted stone gray and mono labels. Headings are mechanical condensed caps (Archivo 900, uppercase). Chinese seal script appears only small, as a registered chop accent. Gold is reserved for authentication.

### Density

Medium-high. The bed packs records into square cells without crowding; consistent 8px units and a 3px channel separate zones. Mono labels and cell numbers keep the grid legible.

### Signature

The seal-bed grid: tiles tessellate, the channel between them is the only border, gold crosshairs register alignment, and the active record is a lit cinnabar cell. Six named patterns appear live in the embodiment — Carved Cell, Registration Crosshair, Stamp Button group, Seal Badge, Imprint Table, Chop-Mark Divider.

## 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-019efa8a-f916-7643-ab11-7dd8580b3f43/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 Lay content into a tessellated stone bed — cells on a channel background, 3px gap as the only divider
- Do Light the cell that matters with flat cinnabar (#D83A2A); keep the rest quiet stone
- Do Use Archivo 800-900 uppercase for headings — mechanical caps, not calligraphy
- Do Reserve registration gold (#C9A24B) for alignment crosshairs and curator authentication
- Do Use Noto Serif SC only small, as a registered chop accent (印鑒 真迹)
- Do Keep every form control square with an inset stroke; focus deepens to a cinnabar stroke
- Do Make one button cinnabar-primary; the set shares one height on a channel bed
- Do Render the settled state with no JS; gate motion behind an .anim class on <html>
- Don't Don't add card borders, outlines, or single accent edges — the channel is the border
- Don't Don't use a warm cream-paper ground or a giant literati serif masthead — that is the Zhuwen refinement
- Don't Don't round corners — radius is 0 everywhere
- Don't Don't float tiles with soft drop-shadows off the bed
- Don't Don't use pills or circular badges — status reads as a square chop
- Don't Don't let cinnabar and gold fight; gold is authentication only
- Don't Don't put photographic imagery inside the UI — only the landing hero carries the cinnabar art

### Accessibility

WCAG AA on dark stone: paper-ink text (#F4ECDD) on ground (#14110D) ~13:1; cinnabar primary text on cinnabar (#FBF2E2 on #D83A2A) meets AA for the large mono labels used. Status badges always carry a text label, never colour alone. Focus states use a 2px cinnabar inset stroke or a gold outline. Touch targets meet 44px. prefers-reduced-motion disables reveals.

## Imagery Direction

### Pairs With

cinnabar

### Summary

One full-bleed cinnabar seal-impression hero — a dense lattice of carved relief motifs (dragon, key-fret, cloud-scroll, phoenix, lotus) on a square nine-cell grid, vermilion on cream paper with grainy stamped edges, read behind a legible dark ink overlay. Inside the UI, imagery is abstract CSS only; the bed mechanic carries the visual identity.

### Subjects

- a seal-bed lattice of carved relief motifs
- a single carved dragon chop
- a key-fret / cloud-scroll tessellation
- an archaic seal-script glyph block

### Usage

Landing hero only, full-bleed via background-image:var(--hero-image) under a solid-edge ink overlay; never inside dashboard/table UI.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "yinchuang",
  "type": "registry:theme",
  "title": "Yinchuang shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#14110D",
      "foreground": "#F4ECDD",
      "card": "#1F1A13",
      "card-foreground": "#F4ECDD",
      "popover": "#1F1A13",
      "popover-foreground": "#F4ECDD",
      "primary": "#D83A2A",
      "primary-foreground": "#ffffff",
      "secondary": "#F4ECDD",
      "secondary-foreground": "#111111",
      "muted": "#A99B83",
      "muted-foreground": "#F4ECDD",
      "accent": "#D83A2A",
      "accent-foreground": "#ffffff",
      "destructive": "#E0533F",
      "border": "#3A3025",
      "input": "#3A3025",
      "ring": "#D83A2A",
      "chart-1": "#D83A2A",
      "chart-2": "#F4ECDD",
      "chart-3": "#D83A2A",
      "chart-4": "#7FA04A",
      "chart-5": "#C9A24B",
      "sidebar": "#1F1A13",
      "sidebar-foreground": "#F4ECDD",
      "sidebar-primary": "#D83A2A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5C8BB0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3A3025",
      "sidebar-ring": "#D83A2A",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#D83A2A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D83A2A",
      "accent-foreground": "#ffffff",
      "destructive": "#E0533F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D83A2A",
      "chart-1": "#D83A2A",
      "chart-2": "#F4ECDD",
      "chart-3": "#D83A2A",
      "chart-4": "#7FA04A",
      "chart-5": "#C9A24B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#D83A2A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D83A2A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D83A2A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa8a-f916-7643-ab11-7dd8580b3f43",
    "slug": "yinchuang",
    "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_deep",
        "bg",
        "border",
        "channel",
        "error",
        "gold",
        "info",
        "muted",
        "on_accent",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "serif_accent_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "chop_seal",
        "input_focus",
        "input_stroke",
        "press"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "channel_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```