Shuimo

# Shuimo

## Philosophy

A contemplative interface language for living ink on warm paper: content appears as if painted into existence, structure breathes with soft diffusion, and sparse vermillion marks punctuate otherwise restrained sumi surfaces. The faithfully modernized descendant of Ink Wash Motion — identity kept, execution corrected to current standards (no borders, 17px body, style-element-led embodiment, full artifact set).

### Values

- living stillness
- liubai negative space
- warm paper tactility
- diluted sumi hierarchy
- sparse vermillion emphasis
- slow organic motion
- visible imperfection

### Anti-Values

- synthetic SaaS chrome
- borders and grey divider systems
- fast abrupt animation
- pure white sterile backgrounds
- dense equal-card grids
- rainbow accent palettes

### Visual Character

- Warm rice-paper foundations use #f0ebe2 and fibrous noise overlays so every panel feels absorbent rather than glassy or plastic.
- Diluted sumi hierarchy uses near-black text, low-opacity ink washes and soft radial blooms instead of hard grey divider systems.
- Sparse vermillion marks appear as small seal-like chips and focus states, never as broad saturated fills or decorative gradients.
- Slow paint-in motion combines opacity, blur removal and small translate transforms with cubic-bezier(0.23,1,0.32,1) timing.
- Asymmetric scroll composition leaves large liubai voids beside dense controls so emptiness becomes a structural element.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#f0ebe2` |
| surface | `#f7f1e8` |
| surface_solid | `#f7f1e8` |
| text | `#1a1612` |
| muted | `#6b5f52` |
| border | `rgba(26,22,18,0.06)` |
| accent | `#b83a2d` |
| accent_2 | `#3f6858` |
| accent_soft | `#e8c8c2` |
| on_accent | `#f7f1e8` |
| success | `#3f6858` |
| warning | `#6a5a3a` |
| error | `#b83a2d` |
| info | `#47566a` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 2px 12px rgba(106,90,58,.09)
- **Md**: 0 12px 38px rgba(106,90,58,.13)
- **Lg**: 0 26px 70px rgba(106,90,58,.16)

### Spacing

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

### Surfaces

- **Treatment**: absorbent warm rice paper with fibrous grain and low-opacity radial ink washes
- **Card Style**: paper panel — no border, warm brown shadow, inset diluted-sumi wash pseudo-element, 24px radius
- **Bg Pattern**: SVG fractal-noise paper grain plus slow drifting ink-diffusion blobs

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: borderless — separation by paper elevation, ink-wash edges, alternating warm-paper fills and negative space

### Motion

- **Duration**: paint-in 900ms; ink diffusion 24s
- **Easing**: cubic-bezier(0.23,1,0.32,1)
- **Philosophy**: slow organic paint-in (opacity + blur-to-sharp + short vertical settle); ink diffusion breathes; nothing abrupt under 400ms for primary movement; respects prefers-reduced-motion

## Rules

### Composition

- Use one dominant restoration canvas rather than rows of equal cards.
- Pair dense control clusters with large empty paper fields (liubai).
- Keep scroll direction vertical, like unrolling a handscroll.
- Let ink blooms occupy negative space instead of adding decorative widgets.
- Break the grid with one oversized media panel or transcript strip.

### Density

Moderate: one dense console per viewport balanced by 64px to 128px empty intervals.

### Hierarchy

- Headings use ZCOOL XiaoWei at -0.035em tracking and 1.14 line height.
- Body copy uses Noto Sans SC at 17px, -0.02em tracking and 1.6 line height.
- Numeric and timecode labels use IBM Plex Mono in small all-caps.
- Vermillion only marks primary action, current frame or provenance seal.

### Signature Patterns

- {"name":"Ink diffusion background","css_concept":"body::before/::after radial-gradient blobs animated with transform scale + opacity over 24s","description":"Layered radial-gradient pseudo-elements slowly scale and drift, resembling ink dispersing through water without a synthetic rainbow gradient."}
- {"name":"Paint-in reveal","css_concept":"@keyframes paintIn{from{opacity:0;filter:blur(7px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:none}}","description":"Panels and controls enter with blur-to-sharp opacity transitions and a short vertical settle, as if brushed onto paper."}
- {"name":"Paper-wash panels","css_concept":".panel{background:#f7f1e8;border-radius:24px;box-shadow:0 12px 38px rgba(106,90,58,.13)} .panel::before{inset radial ink wash} — NO border","description":"Cards use a 24px radius, warm shadow and inset diluted sumi/moss washes clipped inside the panel — and no borders anywhere."}
- {"name":"Seal-stamp emphasis","css_concept":".seal{background:#b83a2d;color:#f7f1e8;border-radius:0 or 9999px}","description":"Small square or pill vermillion marks (印) provide emphasis like a carved seal, used sparingly on active states and provenance."}

## Layout

### Density

moderate, with a dense console beside broad empty paper intervals

### Grid

- **Type**: asymmetric 12-column
- **Columns Desktop**: 12
- **Columns Tablet**: 8
- **Columns Mobile**: 4
- **Gutter**: 24px
- **Max Width**: 1200px

### Responsive

- **Wide**: capped, centred content; only the hero spans 100vw
- **Desktop**: 12-column asymmetric hero and console
- **Tablet**: 8-column stacked canvas over controls, designed in its own right
- **Mobile**: single column, sticky rail removed, simplified spacing

### Whitespace

- **Tight**: 4px-8px metadata clusters
- **Normal**: 24px panel internals
- **Wide**: 64px between work zones
- **Breath**: 96px-128px liubai voids

## Guidance

### Do

- Use animated ink diffusion backgrounds that slowly breathe.
- Apply paint-in blur-to-sharp reveals on major panels.
- Maintain generous negative space as active liubai composition.
- Use warm brown paper shadows and inset ink washes for depth.
- Keep vermillion emphasis sparse, like a seal stamp.
- Style every input, select, checkbox, switch and button as paper controls.

### Don't

- Do not use borders, hairline rules, grey dividers or accent edges on cards.
- Do not box navigation into a floating pill bar.
- Do not use pure white or cold grey backgrounds.
- Do not create equal three-card catalog sections.
- Do not use abrupt transitions under 400ms for primary movement.
- Do not mix arbitrary radii — commit to {0,16,24,9999}.
- Do not use more than one vermillion action in a viewport.

### Accessibility

- **Contrast**: #1a1612 on #f0ebe2 exceeds WCAG AA; #6b5f52 muted is used for larger or secondary copy and small mono labels.
- **Focus**: 3px vermillion outline with 3px offset on all controls.
- **Motion**: prefers-reduced-motion disables diffusion, paint-in blur and de-pins the landing to a settled readable document.

### Usage Context

Film-restoration tools, meditative media archives, nature-documentary libraries, art-gallery interpretation systems, storytelling products and wellness applications.

## Imagery Direction

### Pairs With

shuimo-ink-wash

### Technique

Chinese ink-wash (shuimo/sumi-e): wet sumi bleeding into absorbent warm rice paper, feathered diffused edges, diluted grey tonal gradients from deep black to nothing, vast liubai negative space, a single small vermillion seal.

### Subjects

- restored film frames
- Qi Baishi brush studies
- ink-wash landscapes
- water-diffusion macros
- archival rice-paper scans
- quiet nature imagery

### Prompt Suffix

NO text, NO letters, NO logos

### Avoid

- stock dashboard illustration
- synthetic vector mascots
- cold glossy 3D renders

---
version: "alpha"
name: "Shuimo"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#f0ebe2"
  surface: "#f7f1e8"
  surface_solid: "#f7f1e8"
  text: "#1a1612"
  muted: "#6b5f52"
  accent: "#b83a2d"
  accent_2: "#3f6858"
  accent_soft: "#e8c8c2"
  on_accent: "#f7f1e8"
  success: "#3f6858"
  warning: "#6a5a3a"
  error: "#b83a2d"
  info: "#47566a"
typography:
  headline-lg:
    fontFamily: "ZCOOL XiaoWei"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "ZCOOL XiaoWei"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Noto Sans SC"
    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: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"
  step-8: "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-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}"
  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"
---

# Shuimo

## Overview

A contemplative interface language for living ink on warm paper: content appears as if painted into existence, structure breathes with soft diffusion, and sparse vermillion marks punctuate otherwise restrained sumi surfaces. The faithfully modernized descendant of Ink Wash Motion — identity kept, execution corrected to current standards (no borders, 17px body, style-element-led embodiment, full artifact set).

### Values

- living stillness
- liubai negative space
- warm paper tactility
- diluted sumi hierarchy
- sparse vermillion emphasis
- slow organic motion
- visible imperfection

### Anti-Values

- synthetic SaaS chrome
- borders and grey divider systems
- fast abrupt animation
- pure white sterile backgrounds
- dense equal-card grids
- rainbow accent palettes

### Visual Character

- Warm rice-paper foundations use #f0ebe2 and fibrous noise overlays so every panel feels absorbent rather than glassy or plastic.
- Diluted sumi hierarchy uses near-black text, low-opacity ink washes and soft radial blooms instead of hard grey divider systems.
- Sparse vermillion marks appear as small seal-like chips and focus states, never as broad saturated fills or decorative gradients.
- Slow paint-in motion combines opacity, blur removal and small translate transforms with cubic-bezier(0.23,1,0.32,1) timing.
- Asymmetric scroll composition leaves large liubai voids beside dense controls so emptiness becomes a structural element.

## 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 | `#f0ebe2` |
| surface | `#f7f1e8` |
| surface_solid | `#f7f1e8` |
| text | `#1a1612` |
| muted | `#6b5f52` |
| accent | `#b83a2d` |
| accent_2 | `#3f6858` |
| accent_soft | `#e8c8c2` |
| on_accent | `#f7f1e8` |
| success | `#3f6858` |
| warning | `#6a5a3a` |
| error | `#b83a2d` |
| info | `#47566a` |

## Typography

- **Headline-Lg**: ZCOOL XiaoWei, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: ZCOOL XiaoWei, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Sans SC, 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**: `16px`
- **Lg**: `24px`
- **Xl**: `32px`
- **2xl**: `48px`
- **3xl**: `64px`
- **4xl**: `96px`
- **Step-8**: `128px`

### Density

moderate, with a dense console beside broad empty paper intervals

### Grid

- **Type**: asymmetric 12-column
- **Columns Desktop**: 12
- **Columns Tablet**: 8
- **Columns Mobile**: 4
- **Gutter**: 24px
- **Max Width**: 1200px

### Responsive

- **Wide**: capped, centred content; only the hero spans 100vw
- **Desktop**: 12-column asymmetric hero and console
- **Tablet**: 8-column stacked canvas over controls, designed in its own right
- **Mobile**: single column, sticky rail removed, simplified spacing

### Whitespace

- **Tight**: 4px-8px metadata clusters
- **Normal**: 24px panel internals
- **Wide**: 64px between work zones
- **Breath**: 96px-128px liubai voids

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 12px rgba(106,90,58,.09)
- **Md**: 0 12px 38px rgba(106,90,58,.13)
- **Lg**: 0 26px 70px rgba(106,90,58,.16)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: absorbent warm rice paper with fibrous grain and low-opacity radial ink washes
- **Card Style**: paper panel — no border, warm brown shadow, inset diluted-sumi wash pseudo-element, 24px radius
- **Bg Pattern**: SVG fractal-noise paper grain plus slow drifting ink-diffusion blobs

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: borderless — separation by paper elevation, ink-wash edges, alternating warm-paper fills and negative space

## Components

### Composition

- Use one dominant restoration canvas rather than rows of equal cards.
- Pair dense control clusters with large empty paper fields (liubai).
- Keep scroll direction vertical, like unrolling a handscroll.
- Let ink blooms occupy negative space instead of adding decorative widgets.
- Break the grid with one oversized media panel or transcript strip.

### Density

Moderate: one dense console per viewport balanced by 64px to 128px empty intervals.

### Hierarchy

- Headings use ZCOOL XiaoWei at -0.035em tracking and 1.14 line height.
- Body copy uses Noto Sans SC at 17px, -0.02em tracking and 1.6 line height.
- Numeric and timecode labels use IBM Plex Mono in small all-caps.
- Vermillion only marks primary action, current frame or provenance seal.

### Signature Patterns

- {"name":"Ink diffusion background","css_concept":"body::before/::after radial-gradient blobs animated with transform scale + opacity over 24s","description":"Layered radial-gradient pseudo-elements slowly scale and drift, resembling ink dispersing through water without a synthetic rainbow gradient."}
- {"name":"Paint-in reveal","css_concept":"@keyframes paintIn{from{opacity:0;filter:blur(7px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:none}}","description":"Panels and controls enter with blur-to-sharp opacity transitions and a short vertical settle, as if brushed onto paper."}
- {"name":"Paper-wash panels","css_concept":".panel{background:#f7f1e8;border-radius:24px;box-shadow:0 12px 38px rgba(106,90,58,.13)} .panel::before{inset radial ink wash} — NO border","description":"Cards use a 24px radius, warm shadow and inset diluted sumi/moss washes clipped inside the panel — and no borders anywhere."}
- {"name":"Seal-stamp emphasis","css_concept":".seal{background:#b83a2d;color:#f7f1e8;border-radius:0 or 9999px}","description":"Small square or pill vermillion marks (印) provide emphasis like a carved seal, used sparingly on active states and provenance."}

## 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-019f8af7-6ee7-7b90-90ab-a651ae100759/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 animated ink diffusion backgrounds that slowly breathe.
- Do Apply paint-in blur-to-sharp reveals on major panels.
- Do Maintain generous negative space as active liubai composition.
- Do Use warm brown paper shadows and inset ink washes for depth.
- Do Keep vermillion emphasis sparse, like a seal stamp.
- Do Style every input, select, checkbox, switch and button as paper controls.
- Don't Do not use borders, hairline rules, grey dividers or accent edges on cards.
- Don't Do not box navigation into a floating pill bar.
- Don't Do not use pure white or cold grey backgrounds.
- Don't Do not create equal three-card catalog sections.
- Don't Do not use abrupt transitions under 400ms for primary movement.
- Don't Do not mix arbitrary radii — commit to {0,16,24,9999}.
- Don't Do not use more than one vermillion action in a viewport.

### Accessibility

- **Contrast**: #1a1612 on #f0ebe2 exceeds WCAG AA; #6b5f52 muted is used for larger or secondary copy and small mono labels.
- **Focus**: 3px vermillion outline with 3px offset on all controls.
- **Motion**: prefers-reduced-motion disables diffusion, paint-in blur and de-pins the landing to a settled readable document.

### Usage Context

Film-restoration tools, meditative media archives, nature-documentary libraries, art-gallery interpretation systems, storytelling products and wellness applications.

## Imagery Direction

### Pairs With

shuimo-ink-wash

### Technique

Chinese ink-wash (shuimo/sumi-e): wet sumi bleeding into absorbent warm rice paper, feathered diffused edges, diluted grey tonal gradients from deep black to nothing, vast liubai negative space, a single small vermillion seal.

### Subjects

- restored film frames
- Qi Baishi brush studies
- ink-wash landscapes
- water-diffusion macros
- archival rice-paper scans
- quiet nature imagery

### Prompt Suffix

NO text, NO letters, NO logos

### Avoid

- stock dashboard illustration
- synthetic vector mascots
- cold glossy 3D renders

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shuimo",
  "type": "registry:theme",
  "title": "Shuimo shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f0ebe2",
      "foreground": "#1a1612",
      "card": "#f7f1e8",
      "card-foreground": "#1a1612",
      "popover": "#f7f1e8",
      "popover-foreground": "#1a1612",
      "primary": "#1a1612",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6b5f52",
      "muted-foreground": "#1a1612",
      "accent": "#b83a2d",
      "accent-foreground": "#ffffff",
      "destructive": "#b83a2d",
      "border": "rgba(26,22,18,0.06)",
      "input": "rgba(26,22,18,0.06)",
      "ring": "#b83a2d",
      "chart-1": "#1a1612",
      "chart-2": "#f4f4f5",
      "chart-3": "#b83a2d",
      "chart-4": "#3f6858",
      "chart-5": "#6a5a3a",
      "sidebar": "#f7f1e8",
      "sidebar-foreground": "#1a1612",
      "sidebar-primary": "#1a1612",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#47566a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(26,22,18,0.06)",
      "sidebar-ring": "#b83a2d",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1a1612",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#b83a2d",
      "accent-foreground": "#ffffff",
      "destructive": "#b83a2d",
      "border": "#303642",
      "input": "#303642",
      "ring": "#b83a2d",
      "chart-1": "#1a1612",
      "chart-2": "#f4f4f5",
      "chart-3": "#b83a2d",
      "chart-4": "#3f6858",
      "chart-5": "#6a5a3a",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1a1612",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#b83a2d",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#b83a2d",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8af7-6ee7-7b90-90ab-a651ae100759",
    "slug": "shuimo",
    "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",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "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"
      ]
    }
  }
}
```