Raster

# Raster

## Philosophy

Raster is Swiss grid modernism for screens, drawn as a printer's proof. A twelve-column lattice, one oversized grotesk, graphite on warm paper and a single vermilion register mark carry every page. The hero is one full-strength relief print of the lattice with a quiet paper half where the type sits, and each section opens on the origin rule, a short vermilion segment at the left edge. Order is the only decoration: alignment, scale and weight do the work colour and ornament do elsewhere.

### Values

- The grid is the decoration: columns, rules and baselines before any accent.
- One red, spent on the origin rule and the main action, so it always means start here.
- Oversized heavy type is the graphic device; figures are tabular and heavy.
- Separation by rule, tint and space, never by a frame.
- Tables read like a journal: flush-left labels, one rule under the header, real facts in the rows.

### Anti-Values

- Gradient scrims over the hero image.
- Mono eyebrow labels and hairline card frames as ornament.
- A stamped footer colophon and the overused grotesk and plex font pool.
- Rounded corners, glass, shadow elevation and a second accent colour.

### Visual Character

- Warm paper #F4F4F0 ground, cool-white #FBFBF8 panels, graphite #141414 ink.
- One register red #C63A2B: the origin rule, the lead action, a figure unit.
- A full-bleed relief print hero in the Hochdruck style, quiet paper on the left half under the type, a portrait crop under 1000px.
- Afacad Flux 900 at huge sizes with -0.02em tracking, Imprima 17px for prose, Iosevka Charon for tables and figures.
- A graphite closing band as the one dark block.
- Square corners on every rectangle.

### Lineage

> Revised in place from the approved Raster take of range round 8. Kept: the paper ground, graphite ink, vermilion register, page order and origin rule. Changed: fonts, a quiet-paper hero without a scrim, corrected muted, warning and error roles, and a table of real breakpoint facts.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F4F0` |
| surface | `#FBFBF8` |
| surface_2 | `#E9E9E3` |
| text | `#141414` |
| muted | `#555B62` |
| border | `#D7D7D1` |
| accent | `#C63A2B` |
| on_accent | `#FFFFFF` |
| success | `#1F6B4F` |
| warning | `#8A5200` |
| error | `#A3123A` |
| info | `#245D8C` |

### Typography

- **Heading Font**: Afacad Flux
- **Body Font**: Imprima
- **Mono Font**: Iosevka Charon
- **Heading Weight**: 900
- **Body Weight**: 400
- **Button Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display and headings; 0 on Iosevka Charon
- **Base Size**: 17px
- **Line Height**: 1.6
- **Scale**: ["15px","17px","20px","26px","36px","52px","72px","104px","150px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;700;900&family=Imprima&family=Iosevka+Charon:wght@400;600&display=swap

### Radii

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

### Shadows

- **Overlay**: 0 1px 2px rgba(20,20,20,.12), 0 18px 36px -14px rgba(20,20,20,.28), only on an open menu or dialog
- **None**: everything else is flat

### Spacing

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

### Surfaces

- **Treatment**: flat-paper-lattice
- **Material**: Warm paper #F4F4F0 with cool-white panels #FBFBF8 and one graphite band. Flat matte, no gradient, no texture; the relief print in the hero is the only texture.
- **Card Style**: Flat panels on the ground with no frame. Rails and tables sit on #FBFBF8; separation by a 2px graphite rule, a 1px tint line or space.
- **Bg Pattern**: none; the visible lattice lives in the hero print

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Structure is drawn as inset rules: a 2px graphite rule above a column heading or under a table header, a 1px paper-tint line between rows, and the 48 by 4 vermilion origin segment above each section heading. Focus is a 3px vermilion outline at 3px offset.

### Motion

- **Duration**: 200ms
- **Easing**: ease
- **Philosophy**: Structural and quiet: a 200ms brightness shift on buttons. The settled page is the default and renders with no JavaScript; prefers-reduced-motion removes all transitions.

## Rules

### Composition

- Build on a visible 12-column lattice with uneven spans: a 7-column lead beside a 4-column rail at 9 to 12.
- Open every section on the origin rule: a 48 by 4 vermilion segment above the heading.
- Put the type on the quiet paper half of the hero print; never add a scrim.
- At most one dark band per page, at the close.

### Hierarchy

- Display in Afacad Flux 900 up to 104px with 0.92 leading; headings 700 at 36 to 64px.
- Prose in Imprima 17px; the second tone in muted #555B62.
- Iosevka Charon for table rows, figure units and breakpoints; heavy figures up to 150px.
- Red only on the origin rule, the lead action and a figure unit.

### Density

Moderate: 112px between sections on desktop, 56px on phones, 24px gutters, 16px table rows.

### Signature Patterns

- The origin rule: a 48 by 4 vermilion segment at the left edge above every section heading.
- The relief-print hero: one full-strength Hochdruck print with a quiet paper half that carries the type.
- The editorial table: one 2px graphite rule under the header, 1px tint lines between rows, tabular figures.
- The heavy figure: a 150px grotesk number with a small vermilion mono unit.

## Layout

### Grid

- **Type**: 12-column modular lattice
- **Max Width**: 1280px content, centred; only the hero and bands run full bleed
- **Gutter**: 24px between columns, 56px page edge on desktop
- **Column Behavior**: Lead block spans 1 to 7 and a rail spans 9 to 12; three-up rows and tables span the full width; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 56px phone
- **Card Gap**: 24px to 32px
- **Content Padding**: 28px inside a panel
- **Approach**: Rules and space separate; panels are flat #FBFBF8 on the paper.

### Density

- **Default**: moderate
- **Moderate**: {"button_height":"56px","input_height":"52px","row_height":"16px padding in table rows"}

### Responsive

Desktop is twelve columns; 601 to 1199px is six columns with the lead and rail stacked, two-up modules and the portrait print; phones are one column with the nav cut to two words. Content caps at 1280px.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Open each section on the origin rule.
- Set the headline on the quiet paper half of the print.
- Keep red to the origin rule, the lead action and a unit.
- Rule under a table header, tint lines between rows, tabular figures.
- Keep every rectangle square and borderless.

### Don't

- Don't lay a scrim or gradient over the hero print.
- Don't frame a card with a hairline or add mono eyebrow labels.
- Don't add a second accent or use red for status.
- Don't round corners or add shadow elevation to panels.
- Don't add a footer colophon stamp.

### Accessibility

Graphite #141414 on paper is 16.5:1; muted #555B62 is 6.4:1 on #F4F4F0; vermilion #C63A2B is 4.8:1 on paper and 5.2:1 under white text on the button. Body is 17px and table rows 15px. Focus is a 3px vermilion outline. Status pairs a square with a word. The settled page renders with no JavaScript and prefers-reduced-motion removes transitions.

## Imagery Direction

### Pairs With

hochdruck

### Art Style Id

en-019ef5c2-a38e-7f63-9d61-5a975edffa19

### Summary

Two-colour relief prints in Hochdruck: ink black on warm off-white with one solid vermilion square, carved gouge texture, flat planes. The lattice of carved columns on the right, and a quiet paper half on the left for type. A portrait crop puts the lattice at the bottom with calm paper above.

### Subjects

- a carved modular lattice of overlapping bars
- a vermilion register square on a grid intersection
- stacked printed columns
- a quiet paper field for type

### Usage

One full-bleed hero painted with var(--hero-image), right-aligned so the type sits on the paper half; a portrait crop under 1000px. No scrim. Inside pages carry no illustration.

### Avoid

A third colour, a gradient scrim, the press itself, and text inside the image.

---
version: "alpha"
name: "Raster"
description: "Raster is Swiss grid modernism for screens, drawn as a printer's proof. A twelve-column lattice, one oversized grotesk, graphite on warm paper and a single vermilion register mark carry every page. The hero is one full-strength relief pr..."
colors:
  bg: "#F4F4F0"
  surface: "#FBFBF8"
  surface_2: "#E9E9E3"
  text: "#141414"
  muted: "#555B62"
  border: "#D7D7D1"
  accent: "#C63A2B"
  on_accent: "#FFFFFF"
  success: "#1F6B4F"
  warning: "#8A5200"
  error: "#A3123A"
  info: "#245D8C"
typography:
  headline-lg:
    fontFamily: "Afacad Flux"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Afacad Flux"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Imprima"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Iosevka Charon"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "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: "112px"
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-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: "{colors.on_accent}"
    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"
---

# Raster

## Overview

Raster is Swiss grid modernism for screens, drawn as a printer's proof. A twelve-column lattice, one oversized grotesk, graphite on warm paper and a single vermilion register mark carry every page. The hero is one full-strength relief print of the lattice with a quiet paper half where the type sits, and each section opens on the origin rule, a short vermilion segment at the left edge. Order is the only decoration: alignment, scale and weight do the work colour and ornament do elsewhere.

### Values

- The grid is the decoration: columns, rules and baselines before any accent.
- One red, spent on the origin rule and the main action, so it always means start here.
- Oversized heavy type is the graphic device; figures are tabular and heavy.
- Separation by rule, tint and space, never by a frame.
- Tables read like a journal: flush-left labels, one rule under the header, real facts in the rows.

### Anti-Values

- Gradient scrims over the hero image.
- Mono eyebrow labels and hairline card frames as ornament.
- A stamped footer colophon and the overused grotesk and plex font pool.
- Rounded corners, glass, shadow elevation and a second accent colour.

### Visual Character

- Warm paper #F4F4F0 ground, cool-white #FBFBF8 panels, graphite #141414 ink.
- One register red #C63A2B: the origin rule, the lead action, a figure unit.
- A full-bleed relief print hero in the Hochdruck style, quiet paper on the left half under the type, a portrait crop under 1000px.
- Afacad Flux 900 at huge sizes with -0.02em tracking, Imprima 17px for prose, Iosevka Charon for tables and figures.
- A graphite closing band as the one dark block.
- Square corners on every rectangle.

### Lineage

> Revised in place from the approved Raster take of range round 8. Kept: the paper ground, graphite ink, vermilion register, page order and origin rule. Changed: fonts, a quiet-paper hero without a scrim, corrected muted, warning and error roles, and a table of real breakpoint facts.

## 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 | `#F4F4F0` |
| surface | `#FBFBF8` |
| surface_2 | `#E9E9E3` |
| text | `#141414` |
| muted | `#555B62` |
| border | `#D7D7D1` |
| accent | `#C63A2B` |
| on_accent | `#FFFFFF` |
| success | `#1F6B4F` |
| warning | `#8A5200` |
| error | `#A3123A` |
| info | `#245D8C` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@500;700;900&family=Imprima&family=Iosevka+Charon:wght@400;600&display=swap

- **Headline-Lg**: Afacad Flux, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Afacad Flux, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Imprima, 17px, weight 400, line-height 1.5.
- **Label-Md**: Iosevka Charon, 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**: `112px`

### Grid

- **Type**: 12-column modular lattice
- **Max Width**: 1280px content, centred; only the hero and bands run full bleed
- **Gutter**: 24px between columns, 56px page edge on desktop
- **Column Behavior**: Lead block spans 1 to 7 and a rail spans 9 to 12; three-up rows and tables span the full width; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 112px desktop, 56px phone
- **Card Gap**: 24px to 32px
- **Content Padding**: 28px inside a panel
- **Approach**: Rules and space separate; panels are flat #FBFBF8 on the paper.

### Density

- **Default**: moderate
- **Moderate**: {"button_height":"56px","input_height":"52px","row_height":"16px padding in table rows"}

### Responsive

Desktop is twelve columns; 601 to 1199px is six columns with the lead and rail stacked, two-up modules and the portrait print; phones are one column with the nav cut to two words. Content caps at 1280px.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Overlay**: 0 1px 2px rgba(20,20,20,.12), 0 18px 36px -14px rgba(20,20,20,.28), only on an open menu or dialog
- **None**: everything else is flat

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: flat-paper-lattice
- **Material**: Warm paper #F4F4F0 with cool-white panels #FBFBF8 and one graphite band. Flat matte, no gradient, no texture; the relief print in the hero is the only texture.
- **Card Style**: Flat panels on the ground with no frame. Rails and tables sit on #FBFBF8; separation by a 2px graphite rule, a 1px tint line or space.
- **Bg Pattern**: none; the visible lattice lives in the hero print

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Structure is drawn as inset rules: a 2px graphite rule above a column heading or under a table header, a 1px paper-tint line between rows, and the 48 by 4 vermilion origin segment above each section heading. Focus is a 3px vermilion outline at 3px offset.

## Components

### Composition

- Build on a visible 12-column lattice with uneven spans: a 7-column lead beside a 4-column rail at 9 to 12.
- Open every section on the origin rule: a 48 by 4 vermilion segment above the heading.
- Put the type on the quiet paper half of the hero print; never add a scrim.
- At most one dark band per page, at the close.

### Hierarchy

- Display in Afacad Flux 900 up to 104px with 0.92 leading; headings 700 at 36 to 64px.
- Prose in Imprima 17px; the second tone in muted #555B62.
- Iosevka Charon for table rows, figure units and breakpoints; heavy figures up to 150px.
- Red only on the origin rule, the lead action and a figure unit.

### Density

Moderate: 112px between sections on desktop, 56px on phones, 24px gutters, 16px table rows.

### Signature Patterns

- The origin rule: a 48 by 4 vermilion segment at the left edge above every section heading.
- The relief-print hero: one full-strength Hochdruck print with a quiet paper half that carries the type.
- The editorial table: one 2px graphite rule under the header, 1px tint lines between rows, tabular figures.
- The heavy figure: a 150px grotesk number with a small vermilion mono unit.

## 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-01a11414-b567-7540-8ba7-4c589741f2b5/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11414-b567-7540-8ba7-4c589741f2b5/shadcn.json` (registry theme), `/language/en-01a11414-b567-7540-8ba7-4c589741f2b5/shadcn-components.md` (component recipes) and `/language/en-01a11414-b567-7540-8ba7-4c589741f2b5/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Open each section on the origin rule.
- Do Set the headline on the quiet paper half of the print.
- Do Keep red to the origin rule, the lead action and a unit.
- Do Rule under a table header, tint lines between rows, tabular figures.
- Do Keep every rectangle square and borderless.
- Don't Don't lay a scrim or gradient over the hero print.
- Don't Don't frame a card with a hairline or add mono eyebrow labels.
- Don't Don't add a second accent or use red for status.
- Don't Don't round corners or add shadow elevation to panels.
- Don't Don't add a footer colophon stamp.

### Accessibility

Graphite #141414 on paper is 16.5:1; muted #555B62 is 6.4:1 on #F4F4F0; vermilion #C63A2B is 4.8:1 on paper and 5.2:1 under white text on the button. Body is 17px and table rows 15px. Focus is a 3px vermilion outline. Status pairs a square with a word. The settled page renders with no JavaScript and prefers-reduced-motion removes transitions.

## Imagery Direction

### Pairs With

hochdruck

### Art Style Id

en-019ef5c2-a38e-7f63-9d61-5a975edffa19

### Summary

Two-colour relief prints in Hochdruck: ink black on warm off-white with one solid vermilion square, carved gouge texture, flat planes. The lattice of carved columns on the right, and a quiet paper half on the left for type. A portrait crop puts the lattice at the bottom with calm paper above.

### Subjects

- a carved modular lattice of overlapping bars
- a vermilion register square on a grid intersection
- stacked printed columns
- a quiet paper field for type

### Usage

One full-bleed hero painted with var(--hero-image), right-aligned so the type sits on the paper half; a portrait crop under 1000px. No scrim. Inside pages carry no illustration.

### Avoid

A third colour, a gradient scrim, the press itself, and text inside the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "raster",
  "type": "registry:theme",
  "title": "Raster shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F4F0",
      "foreground": "#141414",
      "card": "#FBFBF8",
      "card-foreground": "#141414",
      "popover": "#FBFBF8",
      "popover-foreground": "#141414",
      "primary": "#141414",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#555B62",
      "muted-foreground": "#141414",
      "accent": "#C63A2B",
      "accent-foreground": "#ffffff",
      "destructive": "#A3123A",
      "border": "#D7D7D1",
      "input": "#D7D7D1",
      "ring": "#C63A2B",
      "chart-1": "#141414",
      "chart-2": "#f4f4f5",
      "chart-3": "#C63A2B",
      "chart-4": "#1F6B4F",
      "chart-5": "#8A5200",
      "sidebar": "#FBFBF8",
      "sidebar-foreground": "#141414",
      "sidebar-primary": "#141414",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#245D8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D7D7D1",
      "sidebar-ring": "#C63A2B",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#141414",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C63A2B",
      "accent-foreground": "#ffffff",
      "destructive": "#A3123A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C63A2B",
      "chart-1": "#141414",
      "chart-2": "#f4f4f5",
      "chart-3": "#C63A2B",
      "chart-4": "#1F6B4F",
      "chart-5": "#8A5200",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#141414",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C63A2B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C63A2B",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11414-b567-7540-8ba7-4c589741f2b5",
    "slug": "raster",
    "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",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "none",
        "overlay"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```