Manila

# Manila

## Philosophy

Manila translates the bright order of a bungu (stationery) shop floor into product software: white shelf cards lifted off a warm paper floor, gridded browsing, and prices and SKUs riding on tactile paper price-tags, with a little category colour used like an aisle marker rather than decoration. Cheerful but never childish; its restraint comes from commercial display logic, price-tag utility, and repeated shelf geometry.

### Values

- Shelf order: products and controls line up like stock on a clean retail fixture, with browsing rhythm made of rows, gutters, and consistent sightlines.
- Tactile labeling: metadata appears as paper price-tags, stickers, and small slips rather than generic SaaS chips.
- Bright restraint: a warm paper floor and warm-white shelves dominate while a few desaturated category colours punctuate wayfinding and state.
- Retail clarity: prices, counts, availability, and actions read at a glance without decorative clutter.
- Snappy handling: hover and focus feel like lifting a product from a shelf, quick and tactile.
- Friendly precision: forms, tables, and filters stay exact but use approachable shapes and paper-store details.

### Anti-Values

- Generic analytics dashboards or component-catalog layouts with abstract cards.
- Rainbow maximalism where every control competes for attention.
- Dark dramatic surfaces that contradict a well-lit shop floor.
- Browser-default form elements or unstyled commerce controls.
- Flat white SaaS grounds and grey utilitarian borders that lose the warm paper character.

### Visual Character

- A warm paper floor (#F4EFE6) with a faint paper-dot grain sits behind warm-white shelf cards lifted by soft shadow, so surfaces read as bright paper displays rather than grey panels.
- Section headers carry a separate flat 3px aisle-marker rail under the title, never a one-sided border on a rounded card, building visible wayfinding in CSS.
- Metadata badges use paper price-tag geometry — a clip-path notch and a circular punch made by pseudo-elements — pairing IBM Plex Mono numerals with warm paper colours.
- Product cards form an asymmetric shelf: one featured wide card interrupts the grid while smaller cards lock to even rows, preserving retail order without equal-card monotony.
- Interactions lift translateY(-2px) and press translateY(1px) on one 180ms retail snap, so cards and buttons feel physically picked up from the shelf.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EFE6` |
| surface | `#FFFFFF` |
| surface_2 | `#FBF8F1` |
| text | `#211D1A` |
| muted | `#6F6860` |
| border | `#E7DFD4` |
| accent | `#D94F45` |
| accent_2 | `#3F6FA8` |
| accent_3 | `#D8A529` |
| on_accent | `#FFFFFF` |
| red_tint | `#FBE9E7` |
| blue_tint | `#E9F0F7` |
| ochre_tint | `#FAF1DC` |
| success | `#3F7A55` |
| warning | `#B87922` |
| error | `#B8423D` |
| info | `#3F6FA8` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Fraunces
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 2px rgba(33,29,26,0.05)
- **Md**: 0 8px 24px rgba(33,29,26,0.08)
- **Lg**: 0 18px 42px rgba(33,29,26,0.10)

### Spacing

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

### Surfaces

- **Treatment**: warm paper floor with flat warm-white shelf cards, a faint paper-dot grain, and no gradients
- **Card Style**: warm-white 16px shelf cards lifted by a restrained shadow, no border
- **Bg Pattern**: faint 22px radial paper-dot grain on the warm floor

### Borders

- **Default Width**: 0
- **Accent Width**: 3px
- **Style**: none
- **Character**: No borders on cards — separation is soft shadow, warm surface zebra, and the warm floor. The only colour edge is the detached 3px aisle-marker rail under a section title, never a one-sided edge on a rounded component.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy retail handling: cards lift 2px, buttons press 1px, no bounce

## Rules

### Composition

Keep the interface scene-specific — a fictional bungu buying workspace, not a dashboard or component inventory. Use an asymmetric shelf grid with one featured product card spanning two columns and smaller cards locked to even rows. Limit brand accents to tag red, shelf blue, and warm ochre; place category colour on tabs, rails, and tiny tags, never as a large background field. Use the warm paper floor and clipped paper-tag shapes as structural identity so the system survives palette swaps.

### Hierarchy

Fraunces display headings carry shop-sign presence at tight tracking; IBM Plex Sans body copy holds precise retail legibility at 17px; IBM Plex Mono appears only for SKUs, prices, pagination, and tag metadata. Aisle-marker rails and active tabs provide wayfinding before colour-filled buttons do. Tables are compact and ruled like inventory sheets while cards stay airy like shelves.

### Density

Comfortable browsing by default with one dense inventory ledger; related label clusters sit at 4-8px while sections breathe at 64-96px.

### Signature

Paper price-tag badges built with a clip-path notch plus a ::before punch hole, using mono numerals; a detached 3px aisle-marker rail under section titles; an asymmetric shelf grid with a featured card; a faint paper-dot floor repeated behind every surface; and a 180ms retail-pickup lift/press across cards and controls.

## Layout

### Grid

12 columns desktop, max-width 1320px; a featured shelf card spans two columns to break even rows; 24px gutters desktop, 16px mobile.

### Whitespace

Outer margins generous like store aisles; tag clusters tight like labels attached to products. Card padding 24-32px; major scene bands separated by 64px+.

### Density

comfortable

### Responsive

Desktop is a full shelf workspace with a side control rail; tablet drops to a two-column shelf; mobile is a single-column product flow that hides the aisle/par columns and secondary nav, never overflowing horizontally.

### Breakpoints

- **Desktop**: 1440
- **Tablet**: 900
- **Mobile**: 560

## Guidance

### Do

- Lift warm-white shelf cards off the warm paper floor with soft shadow and near-invisible separation.
- Keep category colours attached to tabs, rails, and tags rather than broad panels.
- Use Fraunces for display signage and IBM Plex Sans for all transactional text.
- Build price and SKU metadata as notched paper tags with mono numerals.
- Break a repeated grid with one featured shelf product or inset panel.
- Style every input, select, checkbox, switch, slider, tab, and pagination control explicitly.

### Don't

- Default to a flat white SaaS ground or grey utilitarian borders.
- Pour an accent across a panel, or give a card a single accent edge.
- Use a one-sided border to do the aisle rail's job.
- Use saturated rainbow fills or more than three brand accent colours.
- Create a generic analytics dashboard, CRM view, or component catalog.
- Leave native browser select, checkbox, or radio styling visible.

### Accessibility

AA contrast for body text and controls; category labels always carry text, never colour alone; focus draws a 2px shelf-blue ring; prefers-reduced-motion disables every transform and the fully-settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

tagboard

### Summary

Tagboard tagged flat-lay product photography: the subject shot top-down or in clean front elevation on a warm off-white paper ground with a faint paper-dot grain, soft crisp studio light, annotated with clipped paper price-tags (notched corner, round punched hole) and round stickers carrying terse mono labels, accent reserved to the tags like aisle markers, the subject and its tags filling the frame.

### Subjects

- a tidy bungu stationery flat-lay
- a teapot
- a reader in profile
- a city block
- a potted plant

### Usage

One full-bleed tagged flat-lay hero per landing (warm paper, paper price-tags in muted red/blue/ochre), composed so a paper overlay panel can sit over the lower-left; smaller subjects as feature splits and spot product shots.

---
version: "alpha"
name: "Manila"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4EFE6"
  surface: "#FFFFFF"
  surface_2: "#FBF8F1"
  text: "#211D1A"
  muted: "#6F6860"
  border: "#E7DFD4"
  accent: "#D94F45"
  accent_2: "#3F6FA8"
  accent_3: "#D8A529"
  on_accent: "#FFFFFF"
  red_tint: "#FBE9E7"
  blue_tint: "#E9F0F7"
  ochre_tint: "#FAF1DC"
  success: "#3F7A55"
  warning: "#B87922"
  error: "#B8423D"
  info: "#3F6FA8"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    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: "16px"
  lg: "24px"
  default: "16px"
  full: "9999px"
spacing:
  base: "4px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
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-red_tint:
    backgroundColor: "{colors.red_tint}"
  color-reference-blue_tint:
    backgroundColor: "{colors.blue_tint}"
  color-reference-ochre_tint:
    backgroundColor: "{colors.ochre_tint}"
  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"
---

# Manila

## Overview

Manila translates the bright order of a bungu (stationery) shop floor into product software: white shelf cards lifted off a warm paper floor, gridded browsing, and prices and SKUs riding on tactile paper price-tags, with a little category colour used like an aisle marker rather than decoration. Cheerful but never childish; its restraint comes from commercial display logic, price-tag utility, and repeated shelf geometry.

### Values

- Shelf order: products and controls line up like stock on a clean retail fixture, with browsing rhythm made of rows, gutters, and consistent sightlines.
- Tactile labeling: metadata appears as paper price-tags, stickers, and small slips rather than generic SaaS chips.
- Bright restraint: a warm paper floor and warm-white shelves dominate while a few desaturated category colours punctuate wayfinding and state.
- Retail clarity: prices, counts, availability, and actions read at a glance without decorative clutter.
- Snappy handling: hover and focus feel like lifting a product from a shelf, quick and tactile.
- Friendly precision: forms, tables, and filters stay exact but use approachable shapes and paper-store details.

### Anti-Values

- Generic analytics dashboards or component-catalog layouts with abstract cards.
- Rainbow maximalism where every control competes for attention.
- Dark dramatic surfaces that contradict a well-lit shop floor.
- Browser-default form elements or unstyled commerce controls.
- Flat white SaaS grounds and grey utilitarian borders that lose the warm paper character.

### Visual Character

- A warm paper floor (#F4EFE6) with a faint paper-dot grain sits behind warm-white shelf cards lifted by soft shadow, so surfaces read as bright paper displays rather than grey panels.
- Section headers carry a separate flat 3px aisle-marker rail under the title, never a one-sided border on a rounded card, building visible wayfinding in CSS.
- Metadata badges use paper price-tag geometry — a clip-path notch and a circular punch made by pseudo-elements — pairing IBM Plex Mono numerals with warm paper colours.
- Product cards form an asymmetric shelf: one featured wide card interrupts the grid while smaller cards lock to even rows, preserving retail order without equal-card monotony.
- Interactions lift translateY(-2px) and press translateY(1px) on one 180ms retail snap, so cards and buttons feel physically picked up from the shelf.

## 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 | `#F4EFE6` |
| surface | `#FFFFFF` |
| surface_2 | `#FBF8F1` |
| text | `#211D1A` |
| muted | `#6F6860` |
| border | `#E7DFD4` |
| accent | `#D94F45` |
| accent_2 | `#3F6FA8` |
| accent_3 | `#D8A529` |
| on_accent | `#FFFFFF` |
| red_tint | `#FBE9E7` |
| blue_tint | `#E9F0F7` |
| ochre_tint | `#FAF1DC` |
| success | `#3F7A55` |
| warning | `#B87922` |
| error | `#B8423D` |
| info | `#3F6FA8` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `4px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Grid

12 columns desktop, max-width 1320px; a featured shelf card spans two columns to break even rows; 24px gutters desktop, 16px mobile.

### Whitespace

Outer margins generous like store aisles; tag clusters tight like labels attached to products. Card padding 24-32px; major scene bands separated by 64px+.

### Density

comfortable

### Responsive

Desktop is a full shelf workspace with a side control rail; tablet drops to a two-column shelf; mobile is a single-column product flow that hides the aisle/par columns and secondary nav, never overflowing horizontally.

### Breakpoints

- **Desktop**: 1440
- **Tablet**: 900
- **Mobile**: 560

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(33,29,26,0.05)
- **Md**: 0 8px 24px rgba(33,29,26,0.08)
- **Lg**: 0 18px 42px rgba(33,29,26,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: warm paper floor with flat warm-white shelf cards, a faint paper-dot grain, and no gradients
- **Card Style**: warm-white 16px shelf cards lifted by a restrained shadow, no border
- **Bg Pattern**: faint 22px radial paper-dot grain on the warm floor

### Borders

- **Default Width**: 0
- **Accent Width**: 3px
- **Style**: none
- **Character**: No borders on cards — separation is soft shadow, warm surface zebra, and the warm floor. The only colour edge is the detached 3px aisle-marker rail under a section title, never a one-sided edge on a rounded component.

## Components

### Composition

Keep the interface scene-specific — a fictional bungu buying workspace, not a dashboard or component inventory. Use an asymmetric shelf grid with one featured product card spanning two columns and smaller cards locked to even rows. Limit brand accents to tag red, shelf blue, and warm ochre; place category colour on tabs, rails, and tiny tags, never as a large background field. Use the warm paper floor and clipped paper-tag shapes as structural identity so the system survives palette swaps.

### Hierarchy

Fraunces display headings carry shop-sign presence at tight tracking; IBM Plex Sans body copy holds precise retail legibility at 17px; IBM Plex Mono appears only for SKUs, prices, pagination, and tag metadata. Aisle-marker rails and active tabs provide wayfinding before colour-filled buttons do. Tables are compact and ruled like inventory sheets while cards stay airy like shelves.

### Density

Comfortable browsing by default with one dense inventory ledger; related label clusters sit at 4-8px while sections breathe at 64-96px.

### Signature

Paper price-tag badges built with a clip-path notch plus a ::before punch hole, using mono numerals; a detached 3px aisle-marker rail under section titles; an asymmetric shelf grid with a featured card; a faint paper-dot floor repeated behind every surface; and a 180ms retail-pickup lift/press across cards and controls.

## 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-019ef9b2-0f80-7742-8d14-4d735d03e80e/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 Lift warm-white shelf cards off the warm paper floor with soft shadow and near-invisible separation.
- Do Keep category colours attached to tabs, rails, and tags rather than broad panels.
- Do Use Fraunces for display signage and IBM Plex Sans for all transactional text.
- Do Build price and SKU metadata as notched paper tags with mono numerals.
- Do Break a repeated grid with one featured shelf product or inset panel.
- Do Style every input, select, checkbox, switch, slider, tab, and pagination control explicitly.
- Don't Default to a flat white SaaS ground or grey utilitarian borders.
- Don't Pour an accent across a panel, or give a card a single accent edge.
- Don't Use a one-sided border to do the aisle rail's job.
- Don't Use saturated rainbow fills or more than three brand accent colours.
- Don't Create a generic analytics dashboard, CRM view, or component catalog.
- Don't Leave native browser select, checkbox, or radio styling visible.

### Accessibility

AA contrast for body text and controls; category labels always carry text, never colour alone; focus draws a 2px shelf-blue ring; prefers-reduced-motion disables every transform and the fully-settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

tagboard

### Summary

Tagboard tagged flat-lay product photography: the subject shot top-down or in clean front elevation on a warm off-white paper ground with a faint paper-dot grain, soft crisp studio light, annotated with clipped paper price-tags (notched corner, round punched hole) and round stickers carrying terse mono labels, accent reserved to the tags like aisle markers, the subject and its tags filling the frame.

### Subjects

- a tidy bungu stationery flat-lay
- a teapot
- a reader in profile
- a city block
- a potted plant

### Usage

One full-bleed tagged flat-lay hero per landing (warm paper, paper price-tags in muted red/blue/ochre), composed so a paper overlay panel can sit over the lower-left; smaller subjects as feature splits and spot product shots.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "manila",
  "type": "registry:theme",
  "title": "Manila shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EFE6",
      "foreground": "#211D1A",
      "card": "#FFFFFF",
      "card-foreground": "#211D1A",
      "popover": "#FFFFFF",
      "popover-foreground": "#211D1A",
      "primary": "#211D1A",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6F6860",
      "muted-foreground": "#211D1A",
      "accent": "#D94F45",
      "accent-foreground": "#ffffff",
      "destructive": "#B8423D",
      "border": "#E7DFD4",
      "input": "#E7DFD4",
      "ring": "#D94F45",
      "chart-1": "#211D1A",
      "chart-2": "#f4f4f5",
      "chart-3": "#D94F45",
      "chart-4": "#3F7A55",
      "chart-5": "#B87922",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#211D1A",
      "sidebar-primary": "#211D1A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F6FA8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E7DFD4",
      "sidebar-ring": "#D94F45",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#211D1A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D94F45",
      "accent-foreground": "#ffffff",
      "destructive": "#B8423D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D94F45",
      "chart-1": "#211D1A",
      "chart-2": "#f4f4f5",
      "chart-3": "#D94F45",
      "chart-4": "#3F7A55",
      "chart-5": "#B87922",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#211D1A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D94F45",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D94F45",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9b2-0f80-7742-8d14-4d735d03e80e",
    "slug": "manila",
    "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",
        "blue_tint",
        "border",
        "error",
        "info",
        "muted",
        "ochre_tint",
        "on_accent",
        "red_tint",
        "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": [
        "default",
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```