Bunting

# Bunting

## Philosophy

A felt-board storyboard interface language: warm torn-paper cut-outs pinned to a deep teal felt wall, strung with bunting and a yarn thread, so a learning tool feels like a teacher's flannelboard rather than a grey dashboard. An independent reading of the WhimsiCollage brief — same DNA (handmade collage, narrative props, emotional warmth, screens built like a children's spread) reorganised around the felt board: cut-outs pinned, tilted and re-placed by hand, not a page turned left to right.

### Values

- pin, don't box — every surface is a tacked, tilted, hand-placed paper cut-out
- narrative worldbuilding carried by the CSS structure, not just illustration
- visible craft: paper grain, blanket-stitch rims, wooden pins, hand-touched imperfection
- a colour ground as identity — warm cut paper glowing on deep felt
- gentle emotional guidance through warm shape, ribbon and seal

### Anti-Values

- sterile white-card SaaS inventories and flat ruled rectangles
- grey hairline borders and single accent edges on cards
- cold neon dark mode or glassmorphism as the dominant motif
- oversized mascots replacing information design
- decoration without an idea — flourishes piled on by reflex

### Visual Character

- torn-paper cut-outs pinned to a deep teal felt ground with a real wooden tack and a slight hand-placed tilt
- every patch lifts at one corner — a peel, never an offset-duplicate underlay — and is edged with a blanket-stitch applique rim
- bunting pennant banners and a coloured yarn story-thread structure the page and tie the reading path
- seed-stitch dotted dividers and pasted, rotated sticker-seal badges overlapping card corners
- rounded felt-letter display (Fredoka) over warm storybook serif body (Lora), with mono data tags

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#143D38` |
| bg_2 | `#0E2F2B` |
| surface | `#FBF3E1` |
| surface_2 | `#F6E3C6` |
| surface_3 | `#EFE0D6` |
| text | `#2E2A22` |
| text_on_felt | `#F4E9D0` |
| muted | `#7E7561` |
| muted_on_felt | `#AAC4B9` |
| accent | `#E0506E` |
| on_accent | `#FFF6EC` |
| accent_2 | `#EF8B4A` |
| accent_3 | `#6FA9C9` |
| moss | `#6E8A3C` |
| pin | `#B98A4E` |
| border | `#E8D8BE` |
| success | `#5E9B57` |
| warning | `#E0A02E` |
| error | `#CF5A43` |
| info | `#6FA9C9` |

### Typography

- **Base Size**: 17px
- **Body Font**: Lora
- **Heading Font**: Fredoka
- **Mono Font**: Space Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Display Line Height**: 1.08
- **Line Height**: 1.6
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 6px 14px rgba(8,28,25,0.30)
- **Md**: 0 14px 30px rgba(8,28,25,0.38)
- **Lg**: 0 26px 56px rgba(6,22,20,0.46)
- **Pin**: 0 2px 0 #8A5F2E, 0 4px 8px rgba(8,28,25,0.45)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: felt-weave-noise
- **Card Style**: warm torn-paper cut-out pinned to deep teal felt with a wooden tack, a slight tilt, a lifted bottom-right corner peel, and a blanket-stitch applique rim — no borders

### Borders

- **Default Width**: 0px
- **Style**: none
- **Character**: no card borders or accent edges; depth from the pin, the lifted-corner peel and a soft paper shadow; fields carry an inset paper ring only

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.34, 1.36, 0.46, 1)
- **Philosophy**: pin-settle: a small lift with a touch of overshoot and a tiny tilt, like pressing a felt cut-out onto the board; never opacity-only fades. Settled state visible with no JS; hidden start-state gated behind html.anim set by an inline head script; respects prefers-reduced-motion

## Rules

### Composition

Compose every screen as a felt-board wall, not a left-to-right page: cut-outs pinned at varied scale and tilt down an irregular masonry, a dominant hero patch with smaller pockets tucked around it. Break dense data into themed paper patches; never nest cards; never box the nav.

### Hierarchy

Hierarchy comes from patch scale, the pin's accent colour, and elevation rather than pure typography. Section headers ride bunting pennant rows; primary actions are large berry pebbles; supporting facts tuck into ribbon pills and seed-shaped tags.

### Density

Moderate density with generous breathing room — busy in detail, never cramped in layout. Felt grain and stitch live inside a disciplined macro-grid with roomy gutters; always pad above titles.

### Signature

Every surface is a pinned patch: a wooden tack, a hand-placed tilt, a lifted bottom-right corner peel (never an offset-duplicate underlay), and a blanket-stitch applique rim. Supported by bunting pennant banners, a coloured yarn story-thread, seed-stitch dotted dividers, and pasted sticker-seal badges overlapping corners.

## Layout

### Grid

Desktop is a pinboard masonry wall (columns of varied-height cut-outs); the dashboard adds a pinned left rail (~248px). Tablet relaxes to two columns; mobile becomes a single pinned column with preserved tacks and peels. Use minmax(0,1fr) columns and min-width:0 children so grids never overflow.

### Whitespace

Roomy outer margins, deep section padding, intentional overlap between pinned layers and a slight tilt. Leave felt space around cut-outs so texture supports readability instead of crowding it.

### Density

Generous; always pad above titles; titles never stuck to container tops.

### Responsive

Renders from ~390px to 2560px+. Single pinned column on mobile, non-essential nav and table columns hidden, no horizontal overflow. On ultra-wide, cap and centre contained content; only the hero spans 100vw.

### Breakpoints

- **Lg**: 1200px+
- **Md**: 900-1199px
- **Sm**: 620-899px
- **Xs**: below 620px

## Guidance

### Do

- Pin every surface — tack, tilt, lifted-corner peel, blanket-stitch rim — never a flat ruled card.
- Keep the deep teal felt ground; let warm cream and apricot paper cut-outs carry the colour.
- Use the three accents (berry, apricot, sky) like highlighters; keep moss and wooden-pin quiet.
- Style every form control explicitly with an inset paper ring; bloom focus in moss, not system blue.
- Let ornament mean something — a seal is earned, the yarn thread shows a reading path.
- Make one button clearly primary (berry); keep the rest quieter; share one height and shape.

### Don't

- No borders, no single accent edges, no nested cards, no nav trapped in a pill bar.
- No flat white default ground and no cold midnight dark mode.
- No neon saturation or toy-store primaries as the default palette.
- No oversized mascots that replace information design.
- No arbitrary corner radii; use only {0, 16, 24, 9999}.
- No emoji or symbol glyphs in buttons or copy — use inline SVG.

### Accessibility

Cream ink on deep felt and dark ink on cream paper both meet WCAG AA. Focus uses a visible 3px moss ring plus the control's own state change, never colour alone. Accents are decorative or active markers, never the sole carrier of meaning. Hit targets stay large and friendly; felt grain behind text is kept very low contrast.

## Imagery Direction

### Pairs With

torn-cut-paper-collage

### Summary

Découpage felt-storyboard scenes: layered hand-torn cut-paper subjects with fibrous deckle edges and offset paper underlays, warm cream-apricot-berry-moss paper glowing on a deep teal felt ground — bunting, cottages, folk trees and friendly animals, the same cut-paper craft that builds the interface.

### Subjects

- a felt-board hillside with bunting, a cottage and a paper fox
- torn-paper folk trees, flowers and friendly animals
- cut-paper reading nooks and storybook landscapes
- pinned paper props — ribbons, seals, seed-shaped tags
- warm cut-paper still lifes on dark felt

### Usage

One full-bleed hero rendered in the découpage technique sits behind the open masthead on the landing and is reused in the feature split. Imagery is warm, tactile and hand-made — cut paper on felt, never muddy, never a flat digital illustration.

---
version: "alpha"
name: "Bunting"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#143D38"
  bg_2: "#0E2F2B"
  surface: "#FBF3E1"
  surface_2: "#F6E3C6"
  surface_3: "#EFE0D6"
  text: "#2E2A22"
  text_on_felt: "#F4E9D0"
  muted: "#7E7561"
  muted_on_felt: "#AAC4B9"
  accent: "#E0506E"
  on_accent: "#FFF6EC"
  accent_2: "#EF8B4A"
  accent_3: "#6FA9C9"
  moss: "#6E8A3C"
  pin: "#B98A4E"
  border: "#E8D8BE"
  success: "#5E9B57"
  warning: "#E0A02E"
  error: "#CF5A43"
  info: "#6FA9C9"
typography:
  headline-lg:
    fontFamily: "Fredoka"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fredoka"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Lora"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  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-bg_2:
    backgroundColor: "{colors.bg_2}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-surface_3:
    backgroundColor: "{colors.surface_3}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_on_felt:
    backgroundColor: "{colors.text_on_felt}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-muted_on_felt:
    backgroundColor: "{colors.muted_on_felt}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-moss:
    backgroundColor: "{colors.moss}"
  color-reference-pin:
    backgroundColor: "{colors.pin}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  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"
---

# Bunting

## Overview

A felt-board storyboard interface language: warm torn-paper cut-outs pinned to a deep teal felt wall, strung with bunting and a yarn thread, so a learning tool feels like a teacher's flannelboard rather than a grey dashboard. An independent reading of the WhimsiCollage brief — same DNA (handmade collage, narrative props, emotional warmth, screens built like a children's spread) reorganised around the felt board: cut-outs pinned, tilted and re-placed by hand, not a page turned left to right.

### Values

- pin, don't box — every surface is a tacked, tilted, hand-placed paper cut-out
- narrative worldbuilding carried by the CSS structure, not just illustration
- visible craft: paper grain, blanket-stitch rims, wooden pins, hand-touched imperfection
- a colour ground as identity — warm cut paper glowing on deep felt
- gentle emotional guidance through warm shape, ribbon and seal

### Anti-Values

- sterile white-card SaaS inventories and flat ruled rectangles
- grey hairline borders and single accent edges on cards
- cold neon dark mode or glassmorphism as the dominant motif
- oversized mascots replacing information design
- decoration without an idea — flourishes piled on by reflex

### Visual Character

- torn-paper cut-outs pinned to a deep teal felt ground with a real wooden tack and a slight hand-placed tilt
- every patch lifts at one corner — a peel, never an offset-duplicate underlay — and is edged with a blanket-stitch applique rim
- bunting pennant banners and a coloured yarn story-thread structure the page and tie the reading path
- seed-stitch dotted dividers and pasted, rotated sticker-seal badges overlapping card corners
- rounded felt-letter display (Fredoka) over warm storybook serif body (Lora), with mono data tags

## 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 | `#143D38` |
| bg_2 | `#0E2F2B` |
| surface | `#FBF3E1` |
| surface_2 | `#F6E3C6` |
| surface_3 | `#EFE0D6` |
| text | `#2E2A22` |
| text_on_felt | `#F4E9D0` |
| muted | `#7E7561` |
| muted_on_felt | `#AAC4B9` |
| accent | `#E0506E` |
| on_accent | `#FFF6EC` |
| accent_2 | `#EF8B4A` |
| accent_3 | `#6FA9C9` |
| moss | `#6E8A3C` |
| pin | `#B98A4E` |
| border | `#E8D8BE` |
| success | `#5E9B57` |
| warning | `#E0A02E` |
| error | `#CF5A43` |
| info | `#6FA9C9` |

## Typography

- **Headline-Lg**: Fredoka, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fredoka, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Lora, 17px, weight 400, line-height 1.6.
- **Label-Md**: Space Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Grid

Desktop is a pinboard masonry wall (columns of varied-height cut-outs); the dashboard adds a pinned left rail (~248px). Tablet relaxes to two columns; mobile becomes a single pinned column with preserved tacks and peels. Use minmax(0,1fr) columns and min-width:0 children so grids never overflow.

### Whitespace

Roomy outer margins, deep section padding, intentional overlap between pinned layers and a slight tilt. Leave felt space around cut-outs so texture supports readability instead of crowding it.

### Density

Generous; always pad above titles; titles never stuck to container tops.

### Responsive

Renders from ~390px to 2560px+. Single pinned column on mobile, non-essential nav and table columns hidden, no horizontal overflow. On ultra-wide, cap and centre contained content; only the hero spans 100vw.

### Breakpoints

- **Lg**: 1200px+
- **Md**: 900-1199px
- **Sm**: 620-899px
- **Xs**: below 620px

## Elevation & Depth

### Shadows

- **Sm**: 0 6px 14px rgba(8,28,25,0.30)
- **Md**: 0 14px 30px rgba(8,28,25,0.38)
- **Lg**: 0 26px 56px rgba(6,22,20,0.46)
- **Pin**: 0 2px 0 #8A5F2E, 0 4px 8px rgba(8,28,25,0.45)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: felt-weave-noise
- **Card Style**: warm torn-paper cut-out pinned to deep teal felt with a wooden tack, a slight tilt, a lifted bottom-right corner peel, and a blanket-stitch applique rim — no borders

### Borders

- **Default Width**: 0px
- **Style**: none
- **Character**: no card borders or accent edges; depth from the pin, the lifted-corner peel and a soft paper shadow; fields carry an inset paper ring only

## Components

### Composition

Compose every screen as a felt-board wall, not a left-to-right page: cut-outs pinned at varied scale and tilt down an irregular masonry, a dominant hero patch with smaller pockets tucked around it. Break dense data into themed paper patches; never nest cards; never box the nav.

### Hierarchy

Hierarchy comes from patch scale, the pin's accent colour, and elevation rather than pure typography. Section headers ride bunting pennant rows; primary actions are large berry pebbles; supporting facts tuck into ribbon pills and seed-shaped tags.

### Density

Moderate density with generous breathing room — busy in detail, never cramped in layout. Felt grain and stitch live inside a disciplined macro-grid with roomy gutters; always pad above titles.

### Signature

Every surface is a pinned patch: a wooden tack, a hand-placed tilt, a lifted bottom-right corner peel (never an offset-duplicate underlay), and a blanket-stitch applique rim. Supported by bunting pennant banners, a coloured yarn story-thread, seed-stitch dotted dividers, and pasted sticker-seal badges overlapping corners.

## 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-019ef801-91eb-78e0-ae64-92bb21381ea7/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 Pin every surface — tack, tilt, lifted-corner peel, blanket-stitch rim — never a flat ruled card.
- Do Keep the deep teal felt ground; let warm cream and apricot paper cut-outs carry the colour.
- Do Use the three accents (berry, apricot, sky) like highlighters; keep moss and wooden-pin quiet.
- Do Style every form control explicitly with an inset paper ring; bloom focus in moss, not system blue.
- Do Let ornament mean something — a seal is earned, the yarn thread shows a reading path.
- Do Make one button clearly primary (berry); keep the rest quieter; share one height and shape.
- Don't No borders, no single accent edges, no nested cards, no nav trapped in a pill bar.
- Don't No flat white default ground and no cold midnight dark mode.
- Don't No neon saturation or toy-store primaries as the default palette.
- Don't No oversized mascots that replace information design.
- Don't No arbitrary corner radii; use only {0, 16, 24, 9999}.
- Don't No emoji or symbol glyphs in buttons or copy — use inline SVG.

### Accessibility

Cream ink on deep felt and dark ink on cream paper both meet WCAG AA. Focus uses a visible 3px moss ring plus the control's own state change, never colour alone. Accents are decorative or active markers, never the sole carrier of meaning. Hit targets stay large and friendly; felt grain behind text is kept very low contrast.

## Imagery Direction

### Pairs With

torn-cut-paper-collage

### Summary

Découpage felt-storyboard scenes: layered hand-torn cut-paper subjects with fibrous deckle edges and offset paper underlays, warm cream-apricot-berry-moss paper glowing on a deep teal felt ground — bunting, cottages, folk trees and friendly animals, the same cut-paper craft that builds the interface.

### Subjects

- a felt-board hillside with bunting, a cottage and a paper fox
- torn-paper folk trees, flowers and friendly animals
- cut-paper reading nooks and storybook landscapes
- pinned paper props — ribbons, seals, seed-shaped tags
- warm cut-paper still lifes on dark felt

### Usage

One full-bleed hero rendered in the découpage technique sits behind the open masthead on the landing and is reused in the feature split. Imagery is warm, tactile and hand-made — cut paper on felt, never muddy, never a flat digital illustration.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bunting",
  "type": "registry:theme",
  "title": "Bunting shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#143D38",
      "foreground": "#2E2A22",
      "card": "#FBF3E1",
      "card-foreground": "#2E2A22",
      "popover": "#FBF3E1",
      "popover-foreground": "#2E2A22",
      "primary": "#2E2A22",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7E7561",
      "muted-foreground": "#2E2A22",
      "accent": "#E0506E",
      "accent-foreground": "#ffffff",
      "destructive": "#CF5A43",
      "border": "#E8D8BE",
      "input": "#E8D8BE",
      "ring": "#E0506E",
      "chart-1": "#2E2A22",
      "chart-2": "#f4f4f5",
      "chart-3": "#E0506E",
      "chart-4": "#5E9B57",
      "chart-5": "#E0A02E",
      "sidebar": "#FBF3E1",
      "sidebar-foreground": "#2E2A22",
      "sidebar-primary": "#2E2A22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6FA9C9",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E8D8BE",
      "sidebar-ring": "#E0506E",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2E2A22",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E0506E",
      "accent-foreground": "#ffffff",
      "destructive": "#CF5A43",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E0506E",
      "chart-1": "#2E2A22",
      "chart-2": "#f4f4f5",
      "chart-3": "#E0506E",
      "chart-4": "#5E9B57",
      "chart-5": "#E0A02E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2E2A22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E0506E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E0506E",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef801-91eb-78e0-ae64-92bb21381ea7",
    "slug": "bunting",
    "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",
        "bg_2",
        "border",
        "error",
        "info",
        "moss",
        "muted",
        "muted_on_felt",
        "on_accent",
        "pin",
        "success",
        "surface",
        "surface_2",
        "surface_3",
        "text",
        "text_on_felt",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "pin",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```