Rime

# Rime

## Philosophy

Rime refines glassmorphism into a disciplined cold-operations system. It keeps what was true in the frost original — translucent layered panes, spectral cold light, the sense of surfaces carved from winter air — and drops the slop: milky blur without hierarchy, glass-card wallpaper, decorative aurora orbs, and the generic SaaS shell. Every surface is an etched frost pane whose key edge is a crystalline fern-frost rim, and one bright thaw-line marks the single thing that is live. It reads on a deep glacial dark, where cold light actually belongs.

### Values

- layer information through translucent depth, never opaque containment
- etch the edge with crystalline frost as structure, never a solid accent bar
- let one cold thaw-line mark the single thing that is live
- keep precise readouts perfectly legible inside atmospheric glass
- make interaction feel weightless but controlled, like sliding over polished ice

### Anti-Values

- milky blur with no hierarchy or depth order
- glass cards stamped everywhere until transparency loses meaning
- decorative aurora orbs and warm playful gradients that break the cold mood
- heavy borders, skeuomorphic bevels, or a single accent edge on a card
- the generic SaaS hero: eyebrow tag, button pair, three-stat row

### Visual Character

- translucent frosted panes with backdrop blur, layered at distinct depths so order reads at a glance
- a crystalline fern-frost rim etched along one structural edge of each pane, hairline and luminous, never a solid coloured bar
- a single cold thaw-line (bright glacier cyan) that marks the one live row, the active control, the figure that needs you
- segmented controls and status flags embedded in inset frosted rails, with a tiny etched indicator rather than a filled chip
- a deep glacial-dark ground with cold spectral light, where one tiny warm ember marks a point of life inside the cold

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A1322` |
| surface | `#13203A` |
| surface-2 | `#1B2C4C` |
| text | `#EAF4FF` |
| muted | `#93A8C6` |
| border | `#2C4063` |
| accent | `#67E8F9` |
| accent-2 | `#A7C7FF` |
| accent-3 | `#F4B07A` |
| on-accent | `#06121F` |
| success | `#6FE3B0` |
| warning | `#F4C77A` |
| error | `#FF8FA6` |
| info | `#8FD3FF` |

### Typography

- **Base Size**: 17px
- **Body Font**: Manrope, 'Helvetica Neue', Arial, sans-serif
- **Heading Font**: Sora, 'Helvetica Neue', Arial, sans-serif
- **Mono Font**: 'IBM Plex Mono', ui-monospace, monospace
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap

### Radii

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

### Shadows

- **Sm**: 0 12px 32px rgba(2,8,20,0.45)
- **Md**: 0 22px 60px rgba(2,8,20,0.55)
- **Lg**: 0 34px 90px rgba(2,8,20,0.62)

### Spacing

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

### Surfaces

- **Treatment**: frosted-glass
- **Card Style**: translucent frosted pane with a crystalline fern-frost rim etched along one structural edge, layered at a distinct depth, no solid accent edge
- **Bg Pattern**: fern-frost

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: hairline luminous frost rims that catch cold light as structure, never decorative frames or a single accent edge

### Motion

- **Duration**: 220ms
- **Fast**: 140ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: settled-first; panes settle into depth and frost rims crystallize in on reveal; honours prefers-reduced-motion

## Rules

### Composition

Stack content on translucent frosted panes layered at distinct depths, separated by space and depth order rather than boxes inside boxes. Each pane carries a crystalline fern-frost rim etched along one structural edge; never wrap a pane in a full frame or give it a solid accent edge.

### Hierarchy

Hierarchy comes from pane depth, scale jumps, weight, and the single cold thaw-line. Headlines are oversized and quiet; labels and figures are mono and tracked; the thaw-line marks only what is live.

### Density

Medium density, high legibility: generous architectural whitespace between panes, tightly ordered ruled readouts inside them, no decorative padding in controls.

### Signature

The frost pane is the interface: every surface is a translucent etched pane layered at a distinct depth with a crystalline fern-frost rim, and a single cold thaw-line marks the one live row, active control, or figure that needs attention. The thaw-line is the positional accent and recolours on palette swap.

### Signature Patterns

- every surface is a translucent frosted pane with a crystalline fern-frost rim etched along one structural edge, layered at a distinct depth
- the one cold thaw-line marks the single live thing — the active row, the focused control, the figure that needs you
- status is an etched flag with a tiny frost-tick indicator and a tracked label, never a filled chip
- segmented controls and tabs sit in inset frosted rails, the active segment lifting forward with a thaw-line underline
- one tiny warm ember appears where there is a point of life inside the cold, never spreading into a fill

## Layout

### Grid

Desktop: 12-column grid where panes span 4-8 columns and layer at distinct depths; readout panes sit forward, context panes recede. Tablet narrows to 8 columns; phone collapses to one column with panes stacking and frost rims moving to the top edge.

### Whitespace

Whitespace is structural and atmospheric: large outer margins, 48-64px between pane clusters on desktop, an 8px baseline grid, deep negative space that lets the glacial ground show through. Titles are always padded from pane tops.

### Responsive

390px mobile to 2560px+ ultra-wide. Ultra-wide caps and centres content; only the hero spans 100vw. Mobile stacks to one column, drops non-essential table columns, and shrinks the hero headline with clamp() so it wraps and never clips the 390px edge.

### Breakpoints

- **Xl**: 1280
- **Lg**: 1080
- **Md**: 900
- **Sm**: 760
- **Xs**: 400

## Guidance

### Do

- Layer panes at distinct depths so the order of information reads before you read a word.
- Etch each pane's structural edge with a hairline crystalline frost rim; use it as structure, not decoration.
- Reserve the cold thaw-line for the single live thing — the active row, the focused field, the figure that matters.
- Use mono figures for readings, depths, codes, and numeric summaries.
- Keep one tiny warm ember as a point of life; let depth and cold light carry the mood.

### Don't

- Do not stamp glass cards everywhere until transparency stops meaning anything.
- Do not give a pane a solid accent edge, a heavy border, or a full frame.
- Do not add decorative aurora orbs, warm gradients, or skeuomorphic bevels.
- Do not trap the nav in a pill bar or nest panes inside panes.
- Do not let the thaw-line or the warm ember spread into a fill.

### Accessibility

High contrast on a deep glacial ground (text #EAF4FF on #0A1322). Body 17px, table rows 14.5px. Focus states are visible (cold thaw-line underline and frost rim). Motion is added on top of a fully-rendered no-JS state and honours prefers-reduced-motion. Status is never colour-only — every flag carries a tracked text label and an etched tick.

## Imagery Direction

### Pairs With

cryotype

### Summary

Etched frosted-glass scenes of cold mountain country — glacier lakes, snowpack ridgelines, frosted instruments — rendered in near-monochrome glacial blue with crystalline fern-frost feathering and one cold rim-light, deep open negative space for an overlaid headline.

### Subjects

- a still glacier lake at the foot of dark frosted mountains
- a snowpack ridgeline etched in frost
- a frosted sensor mast on an open col
- crystalline fern-frost spreading across a pane

### Treatment

Etched into and seen through layered frosted glass; near-monochrome cold rendering, fern-frost feathering at the edges, one luminous cool rim-light, one tiny warm spark; no gradients-as-decoration, atmospheric and stratified.

### Ground

Deep glacial dark, cinematic, with broad open negative space for an overlaid headline

### Usage

Hero is one full-bleed etched-frost glacier scene with the headline overlaid in the open upper space; feature and empty-state slots use restrained etched vignettes.

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high

---
version: "alpha"
name: "Rime"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0A1322"
  surface: "#13203A"
  surface-2: "#1B2C4C"
  text: "#EAF4FF"
  muted: "#93A8C6"
  border: "#2C4063"
  accent: "#67E8F9"
  accent-2: "#A7C7FF"
  accent-3: "#F4B07A"
  on-accent: "#06121F"
  success: "#6FE3B0"
  warning: "#F4C77A"
  error: "#FF8FA6"
  info: "#8FD3FF"
typography:
  headline-lg:
    fontFamily: "Sora, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Sora, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Manrope, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "'IBM Plex Mono', ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  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"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  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"
---

# Rime

## Overview

Rime refines glassmorphism into a disciplined cold-operations system. It keeps what was true in the frost original — translucent layered panes, spectral cold light, the sense of surfaces carved from winter air — and drops the slop: milky blur without hierarchy, glass-card wallpaper, decorative aurora orbs, and the generic SaaS shell. Every surface is an etched frost pane whose key edge is a crystalline fern-frost rim, and one bright thaw-line marks the single thing that is live. It reads on a deep glacial dark, where cold light actually belongs.

### Values

- layer information through translucent depth, never opaque containment
- etch the edge with crystalline frost as structure, never a solid accent bar
- let one cold thaw-line mark the single thing that is live
- keep precise readouts perfectly legible inside atmospheric glass
- make interaction feel weightless but controlled, like sliding over polished ice

### Anti-Values

- milky blur with no hierarchy or depth order
- glass cards stamped everywhere until transparency loses meaning
- decorative aurora orbs and warm playful gradients that break the cold mood
- heavy borders, skeuomorphic bevels, or a single accent edge on a card
- the generic SaaS hero: eyebrow tag, button pair, three-stat row

### Visual Character

- translucent frosted panes with backdrop blur, layered at distinct depths so order reads at a glance
- a crystalline fern-frost rim etched along one structural edge of each pane, hairline and luminous, never a solid coloured bar
- a single cold thaw-line (bright glacier cyan) that marks the one live row, the active control, the figure that needs you
- segmented controls and status flags embedded in inset frosted rails, with a tiny etched indicator rather than a filled chip
- a deep glacial-dark ground with cold spectral light, where one tiny warm ember marks a point of life inside the cold

## 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 | `#0A1322` |
| surface | `#13203A` |
| surface-2 | `#1B2C4C` |
| text | `#EAF4FF` |
| muted | `#93A8C6` |
| border | `#2C4063` |
| accent | `#67E8F9` |
| accent-2 | `#A7C7FF` |
| accent-3 | `#F4B07A` |
| on-accent | `#06121F` |
| success | `#6FE3B0` |
| warning | `#F4C77A` |
| error | `#FF8FA6` |
| info | `#8FD3FF` |

## Typography

- **Headline-Lg**: Sora, 'Helvetica Neue', Arial, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Sora, 'Helvetica Neue', Arial, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Manrope, 'Helvetica Neue', Arial, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: 'IBM Plex Mono', ui-monospace, monospace, 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`

### Grid

Desktop: 12-column grid where panes span 4-8 columns and layer at distinct depths; readout panes sit forward, context panes recede. Tablet narrows to 8 columns; phone collapses to one column with panes stacking and frost rims moving to the top edge.

### Whitespace

Whitespace is structural and atmospheric: large outer margins, 48-64px between pane clusters on desktop, an 8px baseline grid, deep negative space that lets the glacial ground show through. Titles are always padded from pane tops.

### Responsive

390px mobile to 2560px+ ultra-wide. Ultra-wide caps and centres content; only the hero spans 100vw. Mobile stacks to one column, drops non-essential table columns, and shrinks the hero headline with clamp() so it wraps and never clips the 390px edge.

### Breakpoints

- **Xl**: 1280
- **Lg**: 1080
- **Md**: 900
- **Sm**: 760
- **Xs**: 400

## Elevation & Depth

### Shadows

- **Sm**: 0 12px 32px rgba(2,8,20,0.45)
- **Md**: 0 22px 60px rgba(2,8,20,0.55)
- **Lg**: 0 34px 90px rgba(2,8,20,0.62)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: frosted-glass
- **Card Style**: translucent frosted pane with a crystalline fern-frost rim etched along one structural edge, layered at a distinct depth, no solid accent edge
- **Bg Pattern**: fern-frost

### Borders

- **Default Width**: 1px
- **Style**: solid
- **Character**: hairline luminous frost rims that catch cold light as structure, never decorative frames or a single accent edge

## Components

### Composition

Stack content on translucent frosted panes layered at distinct depths, separated by space and depth order rather than boxes inside boxes. Each pane carries a crystalline fern-frost rim etched along one structural edge; never wrap a pane in a full frame or give it a solid accent edge.

### Hierarchy

Hierarchy comes from pane depth, scale jumps, weight, and the single cold thaw-line. Headlines are oversized and quiet; labels and figures are mono and tracked; the thaw-line marks only what is live.

### Density

Medium density, high legibility: generous architectural whitespace between panes, tightly ordered ruled readouts inside them, no decorative padding in controls.

### Signature

The frost pane is the interface: every surface is a translucent etched pane layered at a distinct depth with a crystalline fern-frost rim, and a single cold thaw-line marks the one live row, active control, or figure that needs attention. The thaw-line is the positional accent and recolours on palette swap.

### Signature Patterns

- every surface is a translucent frosted pane with a crystalline fern-frost rim etched along one structural edge, layered at a distinct depth
- the one cold thaw-line marks the single live thing — the active row, the focused control, the figure that needs you
- status is an etched flag with a tiny frost-tick indicator and a tracked label, never a filled chip
- segmented controls and tabs sit in inset frosted rails, the active segment lifting forward with a thaw-line underline
- one tiny warm ember appears where there is a point of life inside the cold, never spreading into a fill

## 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-019efd25-dda7-74c1-a06f-466b9ae898b7/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 Layer panes at distinct depths so the order of information reads before you read a word.
- Do Etch each pane's structural edge with a hairline crystalline frost rim; use it as structure, not decoration.
- Do Reserve the cold thaw-line for the single live thing — the active row, the focused field, the figure that matters.
- Do Use mono figures for readings, depths, codes, and numeric summaries.
- Do Keep one tiny warm ember as a point of life; let depth and cold light carry the mood.
- Don't Do not stamp glass cards everywhere until transparency stops meaning anything.
- Don't Do not give a pane a solid accent edge, a heavy border, or a full frame.
- Don't Do not add decorative aurora orbs, warm gradients, or skeuomorphic bevels.
- Don't Do not trap the nav in a pill bar or nest panes inside panes.
- Don't Do not let the thaw-line or the warm ember spread into a fill.

### Accessibility

High contrast on a deep glacial ground (text #EAF4FF on #0A1322). Body 17px, table rows 14.5px. Focus states are visible (cold thaw-line underline and frost rim). Motion is added on top of a fully-rendered no-JS state and honours prefers-reduced-motion. Status is never colour-only — every flag carries a tracked text label and an etched tick.

## Imagery Direction

### Pairs With

cryotype

### Summary

Etched frosted-glass scenes of cold mountain country — glacier lakes, snowpack ridgelines, frosted instruments — rendered in near-monochrome glacial blue with crystalline fern-frost feathering and one cold rim-light, deep open negative space for an overlaid headline.

### Subjects

- a still glacier lake at the foot of dark frosted mountains
- a snowpack ridgeline etched in frost
- a frosted sensor mast on an open col
- crystalline fern-frost spreading across a pane

### Treatment

Etched into and seen through layered frosted glass; near-monochrome cold rendering, fern-frost feathering at the edges, one luminous cool rim-light, one tiny warm spark; no gradients-as-decoration, atmospheric and stratified.

### Ground

Deep glacial dark, cinematic, with broad open negative space for an overlaid headline

### Usage

Hero is one full-bleed etched-frost glacier scene with the headline overlaid in the open upper space; feature and empty-state slots use restrained etched vignettes.

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rime",
  "type": "registry:theme",
  "title": "Rime shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A1322",
      "foreground": "#EAF4FF",
      "card": "#13203A",
      "card-foreground": "#EAF4FF",
      "popover": "#13203A",
      "popover-foreground": "#EAF4FF",
      "primary": "#EAF4FF",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#93A8C6",
      "muted-foreground": "#EAF4FF",
      "accent": "#67E8F9",
      "accent-foreground": "#111111",
      "destructive": "#FF8FA6",
      "border": "#2C4063",
      "input": "#2C4063",
      "ring": "#67E8F9",
      "chart-1": "#EAF4FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#67E8F9",
      "chart-4": "#6FE3B0",
      "chart-5": "#F4C77A",
      "sidebar": "#13203A",
      "sidebar-foreground": "#EAF4FF",
      "sidebar-primary": "#EAF4FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#8FD3FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#2C4063",
      "sidebar-ring": "#67E8F9",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#EAF4FF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#67E8F9",
      "accent-foreground": "#111111",
      "destructive": "#FF8FA6",
      "border": "#303642",
      "input": "#303642",
      "ring": "#67E8F9",
      "chart-1": "#EAF4FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#67E8F9",
      "chart-4": "#6FE3B0",
      "chart-5": "#F4C77A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#EAF4FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#67E8F9",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#67E8F9",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efd25-dda7-74c1-a06f-466b9ae898b7",
    "slug": "rime",
    "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-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "fast",
        "philosophy"
      ]
    }
  }
}
```