Minimal Repro

# Minimal Repro

## Philosophy

Minimal Repro is built from the discipline of reducing a bug report until the cause becomes undeniable. It avoids decorative polish and instead makes evidence legible: nested test frames, exact step labels, sparse annotations, and one controlled breakpoint accent. The language feels calm, procedural, and slightly forensic, with white space used as isolation rather than luxury. Its beauty comes from showing less, but showing each remaining relationship with absolute precision.

### Values

- Reduction before expression: remove every element that does not clarify the state being reproduced.
- Evidence hierarchy: source, input, observed result, and expected result must be visually distinct.
- Traceable structure: nested frames and step numbers show how a user reached the present state.
- Quiet confidence: neutral surfaces dominate so the single failure accent can be trusted.
- Operational readability: long text, code, timestamps, and controls remain comfortable for extended review.
- Deterministic motion: transitions are short, linear, and never obscure state changes.

### Anti-Values

- Decorative dashboards with interchangeable cards and celebratory metrics.
- Colorful severity rainbows that make every condition compete for attention.
- Soft neumorphic shadows, arbitrary gradients, or ornamental illustration.
- Dense chrome that hides the minimal sequence needed to understand the case.

### Visual Character

- Warm notebook paper surfaces (#F7F4EE and #FFFDF8) are bounded by hard 1px ink borders so every module feels like reproducible evidence rather than decoration.
- A single vermilion failure seam (#B6422C) appears as a 3px rule on the active breakpoint, paired with text labels so severity is never communicated by color alone.
- Nested rectangular frames, dashed trace dividers, and compact monospace metadata create the visual rhythm of a reduced test case with only necessary variables exposed.
- Whitespace is deliberately uneven: the central proof receives generous space while environment rails and log rows compress into dense, scannable fixtures.

## Tokens

### Borders

- **Breakpoint**: 3px solid #B6422C
- **Dashed**: 1px dashed rgba(42,41,36,0.32)
- **Primary**: 1px solid #2A2924
- **Subtle**: 1px solid rgba(42,41,36,0.18)

### Colors

| Name | Value |
|------|-------|
| accent | `#2F5D50` |
| background | `#F7F4EE` |
| border | `#2A2924` |
| border_subtle | `#C9C0B2` |
| danger | `#B6422C` |
| foreground | `#161512` |
| info | `#3D5E78` |
| muted | `#D8D1C5` |
| primary | `#B6422C` |
| secondary | `#5D655F` |
| success | `#3E6A52` |
| surface | `#FFFDF8` |
| surface_alt | `#ECE6DA` |
| warning | `#A66A21` |

### Motion

- **Duration Base**: 160ms
- **Duration Fast**: 90ms
- **Duration Slow**: 260ms
- **Easing**: linear
- **Principle**: Short deterministic replay ticks only; every transition must feel inspectable and disabled under reduced motion.

### Opacity

- **Disabled**: 0.42
- **Muted**: 0.68
- **Overlay**: 0.88

### Radii

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

### Shadows

- **Hairline**: 0 0 0 1px rgba(42,41,36,0.14)
- **Inset**: inset 0 0 0 1px rgba(42,41,36,0.20)
- **Lift**: 0 18px 44px rgba(22,21,18,0.08)
- **None**: none

### Spacing

- **0**: 0
- **1**: 4px
- **2**: 8px
- **3**: 12px
- **4**: 16px
- **5**: 24px
- **6**: 32px
- **7**: 48px
- **8**: 64px
- **9**: 96px
- **10**: 128px

### Surfaces

- **Failure Seam**: #B6422C 3px rule used once per view to mark the active breakpoint
- **Log Strip**: #ECE6DA compressed trace rows separated by dashed borders
- **Paper**: #FFFDF8 notebook panels with 1px ink border and almost no shadow
- **Repro Frame**: #F7F4EE inset evidence area with nested rectangular bounds

### Typography

- **Body Font**: IBM Plex Sans
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap
- **Heading Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Scale**: Tight product scale: 12px metadata, 15px body, 22px section titles, 48-72px proof headlines with -0.04em tracking.

## Rules

### Composition

- Lead with one oversized evidence frame; never distribute attention across three equal cards.
- Use nested rectangles to show reproduction scope: environment outside, steps in the middle, failing assertion inside.
- Keep metadata in compact rails so the central artifact remains spacious and inspectable.
- Place the vermilion breakpoint accent at exactly one active failure seam per view.
- Break the grid with one full-width code or diff specimen to create a memorable proof moment.
- Prefer left-aligned, ragged layouts with measured gaps over centered marketing symmetry.

### Density

Alternate a spacious central proof area with dense log rails. The tightest recurring gap is 8px and the largest section gap is 96px or more, preserving an 8:1 spacing ratio.

### Hierarchy

- Display headings use editorial serif contrast and tight tracking for the case title.
- Procedural labels use mono uppercase with tabular numerals and appear before each evidence group.
- Body copy is plain and readable, with muted color for explanation and ink color for facts.
- Primary actions are outlined with a vermilion seam instead of filled saturated buttons.
- Terminal excerpts invert the palette but keep the same border rhythm.

### Signature Patterns

- Render the main artifact as nested bordered rectangles: outer environment frame, middle reproduction steps, inner assertion panel, each using CSS border and inset spacing rather than shadows.
- Use exactly one vermilion breakpoint seam per composition with border-left or border-top set to 3px solid #B6422C and an adjacent monospace label describing the failed assertion.
- Pair spacious evidence canvases with compressed metadata rails by combining CSS grid column spans, 8px log rows, and 64px section gaps to show investigation hierarchy.
- Display code, diff, and event traces in IBM Plex Mono with dashed row separators, muted paper backgrounds, and explicit focus outlines for all interactive controls.

## Layout

### Density

Mixed density is required: the central reproduction frame breathes, while logs, variables, and environment metadata compress into tight rows for rapid scanning.

### Grid

Desktop uses a 12-column grid with 24px gutters and a 1240px max width. The hero allocates seven columns to the evidence frame, four to the environment rail, and one column to breathing room. Tablet collapses to six columns and mobile stacks all modules with the failure seam above the assertion.

### Responsive

At 900px collapse rails under the proof frame; at 640px turn the step list and diff pane into single-column cards with horizontal code scrolling.

### Spacing

Use 8px and 12px inside dense logs, 24px between related controls, 48px between evidence groups, and 80px around the principal proof frame.

## Guidance

### Do

- Lead every screen with one inspectable evidence frame before showing metrics or navigation.
- Use monospace labels for variables, environment values, timestamps, and assertion text.
- Keep the palette restrained to paper, ink, sage, and one vermilion failure accent.
- Make focus states, severity labels, and selected rows explicit with borders and text, not color alone.

### Don't

- Do not create a generic SaaS analytics dashboard or three equal metric cards.
- Do not use rainbow severities, soft gradients, glassmorphism, or celebratory success visuals.
- Do not hide form controls behind browser defaults; inputs, selects, toggles, and checkboxes must be visibly styled.
- Do not scatter multiple red accents across a view; one active failure seam is the signature.

### Accessibility

Maintain WCAG AA contrast for all text. Pair the vermilion seam with labels, icons, or assertion text. Keep body copy at 15-16px with 1.5 line height, provide visible 2px focus outlines, style every form control, and honor prefers-reduced-motion by disabling replay ticks.

### Usage Context

Best for developer tools, QA review products, incident replay, API debugging, compliance evidence, changelog verification, and any product where a small reproducible sequence matters more than broad exploration.

## Imagery Direction

### Hero Image Direction

A reproduction notebook with one failing assertion seam, environment metadata rail, and a full-bleed diff specimen.

### Icon Style

1.5px mono-line icons with square terminals and no filled duotone treatment.

### Illustration Style

Sparse line diagrams of test fixtures, cropped UI evidence, and annotated rectangles; no mascots or decorative scenes.

### Image Gen Prompts

- Minimal debugging interface with nested paper rectangles, vermilion failure seam, monochrome logs, warm off-white background, precise typographic labels

## Generative Canvas

### Animation Philosophy

Motion should feel like stepping through a test replay: short, linear, and user-controlled.

### Shader Palette

Warm paper, ink, muted sage, and vermilion only.

### Techniques

Optional canvas is limited to static trace lines or tiny deterministic playback ticks; avoid particles and decorative shader fields.

---
version: "alpha"
name: "Minimal Repro"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#2F5D50"
  background: "#F7F4EE"
  border: "#2A2924"
  border_subtle: "#C9C0B2"
  danger: "#B6422C"
  foreground: "#161512"
  info: "#3D5E78"
  muted: "#D8D1C5"
  primary: "#B6422C"
  secondary: "#5D655F"
  success: "#3E6A52"
  surface: "#FFFDF8"
  surface_alt: "#ECE6DA"
  warning: "#A66A21"
typography:
  headline-lg:
    fontFamily: "IBM Plex Sans"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    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:
  lg: "24px"
  md: "16px"
  none: "0px"
  pill: "9999px"
  sm: "0px"
spacing:
  0: "0px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "32px"
  7: "48px"
  8: "64px"
  9: "96px"
  10: "128px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-border_subtle:
    backgroundColor: "{colors.border_subtle}"
  color-reference-danger:
    backgroundColor: "{colors.danger}"
  color-reference-foreground:
    backgroundColor: "{colors.foreground}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_alt:
    backgroundColor: "{colors.surface_alt}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "12px"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "16px"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Minimal Repro

## Overview

Minimal Repro is built from the discipline of reducing a bug report until the cause becomes undeniable. It avoids decorative polish and instead makes evidence legible: nested test frames, exact step labels, sparse annotations, and one controlled breakpoint accent. The language feels calm, procedural, and slightly forensic, with white space used as isolation rather than luxury. Its beauty comes from showing less, but showing each remaining relationship with absolute precision.

### Values

- Reduction before expression: remove every element that does not clarify the state being reproduced.
- Evidence hierarchy: source, input, observed result, and expected result must be visually distinct.
- Traceable structure: nested frames and step numbers show how a user reached the present state.
- Quiet confidence: neutral surfaces dominate so the single failure accent can be trusted.
- Operational readability: long text, code, timestamps, and controls remain comfortable for extended review.
- Deterministic motion: transitions are short, linear, and never obscure state changes.

### Anti-Values

- Decorative dashboards with interchangeable cards and celebratory metrics.
- Colorful severity rainbows that make every condition compete for attention.
- Soft neumorphic shadows, arbitrary gradients, or ornamental illustration.
- Dense chrome that hides the minimal sequence needed to understand the case.

### Visual Character

- Warm notebook paper surfaces (#F7F4EE and #FFFDF8) are bounded by hard 1px ink borders so every module feels like reproducible evidence rather than decoration.
- A single vermilion failure seam (#B6422C) appears as a 3px rule on the active breakpoint, paired with text labels so severity is never communicated by color alone.
- Nested rectangular frames, dashed trace dividers, and compact monospace metadata create the visual rhythm of a reduced test case with only necessary variables exposed.
- Whitespace is deliberately uneven: the central proof receives generous space while environment rails and log rows compress into dense, scannable fixtures.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#2F5D50` |
| background | `#F7F4EE` |
| border | `#2A2924` |
| border_subtle | `#C9C0B2` |
| danger | `#B6422C` |
| foreground | `#161512` |
| info | `#3D5E78` |
| muted | `#D8D1C5` |
| primary | `#B6422C` |
| secondary | `#5D655F` |
| success | `#3E6A52` |
| surface | `#FFFDF8` |
| surface_alt | `#ECE6DA` |
| warning | `#A66A21` |

## Typography

- **Headline-Lg**: IBM Plex Sans, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Sans, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **0**: `0px`
- **1**: `4px`
- **2**: `8px`
- **3**: `12px`
- **4**: `16px`
- **5**: `24px`
- **6**: `32px`
- **7**: `48px`
- **8**: `64px`
- **9**: `96px`
- **10**: `128px`

### Density

Mixed density is required: the central reproduction frame breathes, while logs, variables, and environment metadata compress into tight rows for rapid scanning.

### Grid

Desktop uses a 12-column grid with 24px gutters and a 1240px max width. The hero allocates seven columns to the evidence frame, four to the environment rail, and one column to breathing room. Tablet collapses to six columns and mobile stacks all modules with the failure seam above the assertion.

### Responsive

At 900px collapse rails under the proof frame; at 640px turn the step list and diff pane into single-column cards with horizontal code scrolling.

### Spacing

Use 8px and 12px inside dense logs, 24px between related controls, 48px between evidence groups, and 80px around the principal proof frame.

## Elevation & Depth

### Shadows

- **Hairline**: 0 0 0 1px rgba(42,41,36,0.14)
- **Inset**: inset 0 0 0 1px rgba(42,41,36,0.20)
- **Lift**: 0 18px 44px rgba(22,21,18,0.08)
- **None**: none

## Shapes

### Rounded

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

### Surfaces

- **Failure Seam**: #B6422C 3px rule used once per view to mark the active breakpoint
- **Log Strip**: #ECE6DA compressed trace rows separated by dashed borders
- **Paper**: #FFFDF8 notebook panels with 1px ink border and almost no shadow
- **Repro Frame**: #F7F4EE inset evidence area with nested rectangular bounds

### Borders

- **Breakpoint**: 3px solid #B6422C
- **Dashed**: 1px dashed rgba(42,41,36,0.32)
- **Primary**: 1px solid #2A2924
- **Subtle**: 1px solid rgba(42,41,36,0.18)

## Components

### Composition

- Lead with one oversized evidence frame; never distribute attention across three equal cards.
- Use nested rectangles to show reproduction scope: environment outside, steps in the middle, failing assertion inside.
- Keep metadata in compact rails so the central artifact remains spacious and inspectable.
- Place the vermilion breakpoint accent at exactly one active failure seam per view.
- Break the grid with one full-width code or diff specimen to create a memorable proof moment.
- Prefer left-aligned, ragged layouts with measured gaps over centered marketing symmetry.

### Density

Alternate a spacious central proof area with dense log rails. The tightest recurring gap is 8px and the largest section gap is 96px or more, preserving an 8:1 spacing ratio.

### Hierarchy

- Display headings use editorial serif contrast and tight tracking for the case title.
- Procedural labels use mono uppercase with tabular numerals and appear before each evidence group.
- Body copy is plain and readable, with muted color for explanation and ink color for facts.
- Primary actions are outlined with a vermilion seam instead of filled saturated buttons.
- Terminal excerpts invert the palette but keep the same border rhythm.

### Signature Patterns

- Render the main artifact as nested bordered rectangles: outer environment frame, middle reproduction steps, inner assertion panel, each using CSS border and inset spacing rather than shadows.
- Use exactly one vermilion breakpoint seam per composition with border-left or border-top set to 3px solid #B6422C and an adjacent monospace label describing the failed assertion.
- Pair spacious evidence canvases with compressed metadata rails by combining CSS grid column spans, 8px log rows, and 64px section gaps to show investigation hierarchy.
- Display code, diff, and event traces in IBM Plex Mono with dashed row separators, muted paper backgrounds, and explicit focus outlines for all interactive 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-019e04f8-a451-77a0-9f09-f18b7b7dbe5c/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 Lead every screen with one inspectable evidence frame before showing metrics or navigation.
- Do Use monospace labels for variables, environment values, timestamps, and assertion text.
- Do Keep the palette restrained to paper, ink, sage, and one vermilion failure accent.
- Do Make focus states, severity labels, and selected rows explicit with borders and text, not color alone.
- Don't Do not create a generic SaaS analytics dashboard or three equal metric cards.
- Don't Do not use rainbow severities, soft gradients, glassmorphism, or celebratory success visuals.
- Don't Do not hide form controls behind browser defaults; inputs, selects, toggles, and checkboxes must be visibly styled.
- Don't Do not scatter multiple red accents across a view; one active failure seam is the signature.

### Accessibility

Maintain WCAG AA contrast for all text. Pair the vermilion seam with labels, icons, or assertion text. Keep body copy at 15-16px with 1.5 line height, provide visible 2px focus outlines, style every form control, and honor prefers-reduced-motion by disabling replay ticks.

### Usage Context

Best for developer tools, QA review products, incident replay, API debugging, compliance evidence, changelog verification, and any product where a small reproducible sequence matters more than broad exploration.

## Imagery Direction

### Hero Image Direction

A reproduction notebook with one failing assertion seam, environment metadata rail, and a full-bleed diff specimen.

### Icon Style

1.5px mono-line icons with square terminals and no filled duotone treatment.

### Illustration Style

Sparse line diagrams of test fixtures, cropped UI evidence, and annotated rectangles; no mascots or decorative scenes.

### Image Gen Prompts

- Minimal debugging interface with nested paper rectangles, vermilion failure seam, monochrome logs, warm off-white background, precise typographic labels

## Generative Canvas

### Animation Philosophy

Motion should feel like stepping through a test replay: short, linear, and user-controlled.

### Shader Palette

Warm paper, ink, muted sage, and vermilion only.

### Techniques

Optional canvas is limited to static trace lines or tiny deterministic playback ticks; avoid particles and decorative shader fields.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "minimal-repro",
  "type": "registry:theme",
  "title": "Minimal Repro shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F4EE",
      "foreground": "#161512",
      "card": "#FFFDF8",
      "card-foreground": "#161512",
      "popover": "#FFFDF8",
      "popover-foreground": "#161512",
      "primary": "#B6422C",
      "primary-foreground": "#ffffff",
      "secondary": "#5D655F",
      "secondary-foreground": "#ffffff",
      "muted": "#D8D1C5",
      "muted-foreground": "#161512",
      "accent": "#2F5D50",
      "accent-foreground": "#ffffff",
      "destructive": "#dc2626",
      "border": "#2A2924",
      "input": "#2A2924",
      "ring": "#2F5D50",
      "chart-1": "#B6422C",
      "chart-2": "#5D655F",
      "chart-3": "#2F5D50",
      "chart-4": "#3E6A52",
      "chart-5": "#A66A21",
      "sidebar": "#FFFDF8",
      "sidebar-foreground": "#161512",
      "sidebar-primary": "#B6422C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3D5E78",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A2924",
      "sidebar-ring": "#2F5D50",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#B6422C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2F5D50",
      "accent-foreground": "#ffffff",
      "destructive": "#dc2626",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2F5D50",
      "chart-1": "#B6422C",
      "chart-2": "#5D655F",
      "chart-3": "#2F5D50",
      "chart-4": "#3E6A52",
      "chart-5": "#A66A21",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#B6422C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5D50",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2F5D50",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e04f8-a451-77a0-9f09-f18b7b7dbe5c",
    "slug": "minimal-repro",
    "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": {
      "borders": [
        "breakpoint",
        "dashed",
        "primary",
        "subtle"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "border_subtle",
        "danger",
        "foreground",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_alt",
        "warning"
      ],
      "motion": [
        "duration_base",
        "duration_fast",
        "duration_slow",
        "easing",
        "principle"
      ],
      "opacity": [
        "disabled",
        "muted",
        "overlay"
      ],
      "radii": [
        "lg",
        "md",
        "none",
        "pill",
        "sm"
      ],
      "shadows": [
        "hairline",
        "inset",
        "lift",
        "none"
      ],
      "spacing": [
        "0",
        "1",
        "10",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9"
      ],
      "surfaces": [
        "failure_seam",
        "log_strip",
        "paper",
        "repro_frame"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font",
        "scale"
      ]
    }
  }
}
```