Gekiga

# Gekiga

## Philosophy

Gekiga treats a screen the way a comic stages a page. The eye lands on the largest panel and steps through the rest in order; the gutter is a deliberate pause, and a caption strip names the scene before the reveal. Structure is made legible rather than invisible. Dense utility panels alternate with open release panels so the page can breathe. The signature is the inked panel with a hard offset print-shadow — every major region is a paper panel framed in 3px sumi ink and stacked as if physically printed. Asymmetric panel scale sets rank, halftone and speed-lines mark the focal frame, and a single speech-bubble carries guidance. The result feels authored and slightly cinematic — never a neutral application shell, never a novelty comic gimmick. It is paced composition: some regions packed with detail, neighbouring regions kept quiet so the eye recovers.

### Values

- Framed clarity: every major region earns a visible inked boundary so users know where one thought ends and the next begins.
- Sequential readability: layouts imply an order of attention through panel scale, caption strips, and adjacency, not menus alone.
- Asymmetric tension: imbalance is used on purpose to create momentum and focal pull, never as random decoration.
- Dense-detail contrast: high-information panels are balanced by open release panels so the page can breathe.
- Editorial voice: caption strips and one speech-bubble interpret state instead of merely naming it.
- Printed material: the offset print-shadow and paper ground make the interface feel composed and stacked, not soft product chrome.

### Anti-Values

- Borderless sameness where every container dissolves into one continuous slab of UI.
- Perfectly even card grids that remove pacing and flatten attention.
- Overused comic gimmicks — constant speech bubbles, explosions, or novelty typography.
- Soft glassmorphism, vague gradients, or blurred drop-shadows in place of the inked frame and hard offset shadow.
- Unbroken density with no white-space release between dense frames.
- Defaulting to a flat white minimal ground with no material or framing.

### Visual Character

- Hard 3px sumi-ink frames around every major panel, each carrying a hard offset print-shadow block as if printed and stacked.
- Asymmetric panel reel with wide gutters: one tall close-up lead, one wide panorama, compact release panels.
- Caption-strip labels in uppercase mono, docked to panel edges like editorial tags, on ink / vermilion / ink-blue fills.
- Halftone-dot and speed-line treatments clipped inside the focal frame, never behind the whole page.
- A single yellow speech-bubble with a pointed tail, used once for guidance, set on an ink-blue annotation panel.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FAF5E9` |
| surface | `#FFFDF6` |
| surface-2 | `#F1E9D6` |
| text | `#141210` |
| muted | `#6F665A` |
| border | `#141210` |
| accent | `#E8431F` |
| on-accent | `#FFFDF6` |
| ink | `#141210` |
| ink-blue | `#1F3A6E` |
| vermilion | `#E8431F` |
| panel-yellow | `#F7D75C` |
| panel-pink | `#F2A9B8` |
| panel-mint | `#B7E3C7` |
| success | `#1E8E5A` |
| warning | `#E0930A` |
| error | `#C9261E` |
| info | `#1F3A6E` |

### Typography

- **Base Size**: 17px
- **Body Font**: Zen Kaku Gothic New
- **Heading Font**: Archivo Black
- **Mono Font**: Azeret Mono
- **Heading Weight**: 400
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Black&family=Azeret+Mono:wght@400;600&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap

### Radii

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

### Shadows

- **Sm**: 5px 5px 0 #141210
- **Md**: 8px 8px 0 #141210
- **Lg**: 13px 13px 0 #141210

### Spacing

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

### Surfaces

- **Ground**: warm kozo paper #FAF5E9 with a faint sumi dot field
- **Card Style**: paper panels with a 3px sumi-ink frame and a hard offset print-shadow block; caption-strip header; halftone or speed-lines only on the focal frame
- **Treatment**: printed, inked, stacked — never soft chrome; gutters stay structurally wide

### Borders

- **Default Width**: 3px
- **Accent Width**: 3px
- **Style**: solid sumi ink
- **Character**: inked, assertive, editorial frames drawn like a technical pen — the frame IS the panel, supported by a hard offset print-shadow, never a single coloured accent edge

### Motion

- **Duration**: 170ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: snappy and inked: buttons nudge toward the light on hover and press into their offset shadow on click; the landing settles by default and reveals on scroll. The settled state renders with no JavaScript. Reduced motion stills the reveal and the hero drift.

## Rules

### Composition

Compose every screen as a readable panel sequence with deliberate interruption points. Major panels span multiple columns or rows, but adjacency implies the reading order. Gutters are structural, not decorative, and stay visibly wide at every breakpoint.

### Hierarchy

Panel scale ranks first, then caption strips, then weighty display headings, then halftone emphasis. A region looks framed and authored before it looks interactive. Vermilion marks the one focal action; semantic colour stays on dots and alerts.

### Density

Alternate dense utility panels with open release panels. Never place high-detail panels edge-to-edge across the whole canvas; at least one region per view is a quiet beat.

### Signature

The inked panel + hard offset print-shadow is the primary shape. It is supported by an asymmetric panel reel (tall close-up + wide panorama + compact release), caption strips docked to edges, halftone and speed-lines clipped inside the focal frame, and a single guidance speech-bubble.

## Layout

### Grid

Desktop uses a 12-column asymmetric composition with mixed spans (tall portrait + wide panorama). Tablet collapses to 6 columns preserving one hero panel. Mobile becomes a stacked panel reel with the gutter rhythm kept and the narrative priority reordered.

### Whitespace

Reserve oversized gutters and selective low-detail release panels to pace the page. White space is a narrative beat, not leftover emptiness.

### Density

Dense ledgers and forms balanced by quiet release panels — a paced page, not a maximalist dashboard.

### Responsive

Single-column stack on mobile; non-essential nav and table columns dropped; never overflow horizontally. minmax(0,1fr) columns with min-width:0 children so grids never blow out.

### Breakpoints

- **Mobile**: 0-640px
- **Tablet**: 641-1000px
- **Desktop**: 1001px+
- **Ultrawide**: 1700px+

## Guidance

### Do

- Frame every major region with the inked 3px frame and a hard offset print-shadow; keep gutters wide.
- Use caption strips to tell the user what scene, mode, or state they are entering.
- Mix tall, wide, and compact panels to control pacing; let scale rank importance.
- Keep vermilion for the one focal action and emphasis; keep semantic colour on dots and alerts.
- Use one speech-bubble for guidance — never for routine labels or navigation.

### Don't

- Do not turn the interface into a generic component gallery with even labelled sections.
- Do not apply halftone or speed-lines to every surface until text contrast suffers.
- Do not use speech bubbles for routine labels, placeholders, or repeated nav items.
- Do not equalize all panel sizes or remove the gutters on smaller screens.
- Do not substitute soft glassmorphism, gradients, or borderless cards for the inked framing system.

### Accessibility

Sumi ink on warm kozo paper holds very high contrast for body and headings. Vermilion is used for the focal action and emphasis with paper text on top, never as small text on paper. Ink-blue panels carry paper-white text. Form focus snaps a 3px vermilion inner rule. Reduced motion stills the scroll reveal and the hero drift; the fully settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

mokuhanga

### Summary

Japanese mokuhanga woodblock: flat carved sumi-ink contours and solid blocks, one muted indigo field, a single vermilion spot accent, on crisp off-white kozo paper with fine woodgrain inside the colour blocks. Dramatic, cinematic compositions that read like the lead panel of a page.

### Subjects

- a lone swordsman on a cliff above the strait
- a rain-soaked market lane
- a last train at an empty platform
- a quiet dojo interior
- lantern alleys at dusk

### Usage

One full-bleed woodblock hero sits behind the inked landing mast, composed with the figure to the left and the sky/sea open right so the dark caption panel stays legible. The same image fills the feature-split panel. Imagery is dramatic and scene-setting, never illustrated character mascots.

---
version: "alpha"
name: "Gekiga"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FAF5E9"
  surface: "#FFFDF6"
  surface-2: "#F1E9D6"
  text: "#141210"
  muted: "#6F665A"
  border: "#141210"
  accent: "#E8431F"
  on-accent: "#FFFDF6"
  ink: "#141210"
  ink-blue: "#1F3A6E"
  vermilion: "#E8431F"
  panel-yellow: "#F7D75C"
  panel-pink: "#F2A9B8"
  panel-mint: "#B7E3C7"
  success: "#1E8E5A"
  warning: "#E0930A"
  error: "#C9261E"
  info: "#1F3A6E"
typography:
  headline-lg:
    fontFamily: "Archivo Black"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo Black"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Azeret Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "48px"
  step-8: "64px"
  step-9: "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-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-ink-blue:
    backgroundColor: "{colors.ink-blue}"
  color-reference-vermilion:
    backgroundColor: "{colors.vermilion}"
  color-reference-panel-yellow:
    backgroundColor: "{colors.panel-yellow}"
  color-reference-panel-pink:
    backgroundColor: "{colors.panel-pink}"
  color-reference-panel-mint:
    backgroundColor: "{colors.panel-mint}"
  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"
---

# Gekiga

## Overview

Gekiga treats a screen the way a comic stages a page. The eye lands on the largest panel and steps through the rest in order; the gutter is a deliberate pause, and a caption strip names the scene before the reveal. Structure is made legible rather than invisible. Dense utility panels alternate with open release panels so the page can breathe. The signature is the inked panel with a hard offset print-shadow — every major region is a paper panel framed in 3px sumi ink and stacked as if physically printed. Asymmetric panel scale sets rank, halftone and speed-lines mark the focal frame, and a single speech-bubble carries guidance. The result feels authored and slightly cinematic — never a neutral application shell, never a novelty comic gimmick. It is paced composition: some regions packed with detail, neighbouring regions kept quiet so the eye recovers.

### Values

- Framed clarity: every major region earns a visible inked boundary so users know where one thought ends and the next begins.
- Sequential readability: layouts imply an order of attention through panel scale, caption strips, and adjacency, not menus alone.
- Asymmetric tension: imbalance is used on purpose to create momentum and focal pull, never as random decoration.
- Dense-detail contrast: high-information panels are balanced by open release panels so the page can breathe.
- Editorial voice: caption strips and one speech-bubble interpret state instead of merely naming it.
- Printed material: the offset print-shadow and paper ground make the interface feel composed and stacked, not soft product chrome.

### Anti-Values

- Borderless sameness where every container dissolves into one continuous slab of UI.
- Perfectly even card grids that remove pacing and flatten attention.
- Overused comic gimmicks — constant speech bubbles, explosions, or novelty typography.
- Soft glassmorphism, vague gradients, or blurred drop-shadows in place of the inked frame and hard offset shadow.
- Unbroken density with no white-space release between dense frames.
- Defaulting to a flat white minimal ground with no material or framing.

### Visual Character

- Hard 3px sumi-ink frames around every major panel, each carrying a hard offset print-shadow block as if printed and stacked.
- Asymmetric panel reel with wide gutters: one tall close-up lead, one wide panorama, compact release panels.
- Caption-strip labels in uppercase mono, docked to panel edges like editorial tags, on ink / vermilion / ink-blue fills.
- Halftone-dot and speed-line treatments clipped inside the focal frame, never behind the whole page.
- A single yellow speech-bubble with a pointed tail, used once for guidance, set on an ink-blue annotation panel.

## 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 | `#FAF5E9` |
| surface | `#FFFDF6` |
| surface-2 | `#F1E9D6` |
| text | `#141210` |
| muted | `#6F665A` |
| border | `#141210` |
| accent | `#E8431F` |
| on-accent | `#FFFDF6` |
| ink | `#141210` |
| ink-blue | `#1F3A6E` |
| vermilion | `#E8431F` |
| panel-yellow | `#F7D75C` |
| panel-pink | `#F2A9B8` |
| panel-mint | `#B7E3C7` |
| success | `#1E8E5A` |
| warning | `#E0930A` |
| error | `#C9261E` |
| info | `#1F3A6E` |

## Typography

- **Headline-Lg**: Archivo Black, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Black, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.5.
- **Label-Md**: Azeret Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Grid

Desktop uses a 12-column asymmetric composition with mixed spans (tall portrait + wide panorama). Tablet collapses to 6 columns preserving one hero panel. Mobile becomes a stacked panel reel with the gutter rhythm kept and the narrative priority reordered.

### Whitespace

Reserve oversized gutters and selective low-detail release panels to pace the page. White space is a narrative beat, not leftover emptiness.

### Density

Dense ledgers and forms balanced by quiet release panels — a paced page, not a maximalist dashboard.

### Responsive

Single-column stack on mobile; non-essential nav and table columns dropped; never overflow horizontally. minmax(0,1fr) columns with min-width:0 children so grids never blow out.

### Breakpoints

- **Mobile**: 0-640px
- **Tablet**: 641-1000px
- **Desktop**: 1001px+
- **Ultrawide**: 1700px+

## Elevation & Depth

### Shadows

- **Sm**: 5px 5px 0 #141210
- **Md**: 8px 8px 0 #141210
- **Lg**: 13px 13px 0 #141210

## Shapes

### Rounded

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

### Surfaces

- **Ground**: warm kozo paper #FAF5E9 with a faint sumi dot field
- **Card Style**: paper panels with a 3px sumi-ink frame and a hard offset print-shadow block; caption-strip header; halftone or speed-lines only on the focal frame
- **Treatment**: printed, inked, stacked — never soft chrome; gutters stay structurally wide

### Borders

- **Default Width**: 3px
- **Accent Width**: 3px
- **Style**: solid sumi ink
- **Character**: inked, assertive, editorial frames drawn like a technical pen — the frame IS the panel, supported by a hard offset print-shadow, never a single coloured accent edge

## Components

### Composition

Compose every screen as a readable panel sequence with deliberate interruption points. Major panels span multiple columns or rows, but adjacency implies the reading order. Gutters are structural, not decorative, and stay visibly wide at every breakpoint.

### Hierarchy

Panel scale ranks first, then caption strips, then weighty display headings, then halftone emphasis. A region looks framed and authored before it looks interactive. Vermilion marks the one focal action; semantic colour stays on dots and alerts.

### Density

Alternate dense utility panels with open release panels. Never place high-detail panels edge-to-edge across the whole canvas; at least one region per view is a quiet beat.

### Signature

The inked panel + hard offset print-shadow is the primary shape. It is supported by an asymmetric panel reel (tall close-up + wide panorama + compact release), caption strips docked to edges, halftone and speed-lines clipped inside the focal frame, and a single guidance speech-bubble.

## 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-019ef6df-b17c-75d0-bf10-c0f7db3ae0ef/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 Frame every major region with the inked 3px frame and a hard offset print-shadow; keep gutters wide.
- Do Use caption strips to tell the user what scene, mode, or state they are entering.
- Do Mix tall, wide, and compact panels to control pacing; let scale rank importance.
- Do Keep vermilion for the one focal action and emphasis; keep semantic colour on dots and alerts.
- Do Use one speech-bubble for guidance — never for routine labels or navigation.
- Don't Do not turn the interface into a generic component gallery with even labelled sections.
- Don't Do not apply halftone or speed-lines to every surface until text contrast suffers.
- Don't Do not use speech bubbles for routine labels, placeholders, or repeated nav items.
- Don't Do not equalize all panel sizes or remove the gutters on smaller screens.
- Don't Do not substitute soft glassmorphism, gradients, or borderless cards for the inked framing system.

### Accessibility

Sumi ink on warm kozo paper holds very high contrast for body and headings. Vermilion is used for the focal action and emphasis with paper text on top, never as small text on paper. Ink-blue panels carry paper-white text. Form focus snaps a 3px vermilion inner rule. Reduced motion stills the scroll reveal and the hero drift; the fully settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

mokuhanga

### Summary

Japanese mokuhanga woodblock: flat carved sumi-ink contours and solid blocks, one muted indigo field, a single vermilion spot accent, on crisp off-white kozo paper with fine woodgrain inside the colour blocks. Dramatic, cinematic compositions that read like the lead panel of a page.

### Subjects

- a lone swordsman on a cliff above the strait
- a rain-soaked market lane
- a last train at an empty platform
- a quiet dojo interior
- lantern alleys at dusk

### Usage

One full-bleed woodblock hero sits behind the inked landing mast, composed with the figure to the left and the sky/sea open right so the dark caption panel stays legible. The same image fills the feature-split panel. Imagery is dramatic and scene-setting, never illustrated character mascots.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gekiga",
  "type": "registry:theme",
  "title": "Gekiga shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FAF5E9",
      "foreground": "#141210",
      "card": "#FFFDF6",
      "card-foreground": "#141210",
      "popover": "#FFFDF6",
      "popover-foreground": "#141210",
      "primary": "#141210",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6F665A",
      "muted-foreground": "#141210",
      "accent": "#E8431F",
      "accent-foreground": "#ffffff",
      "destructive": "#C9261E",
      "border": "#141210",
      "input": "#141210",
      "ring": "#E8431F",
      "chart-1": "#141210",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8431F",
      "chart-4": "#1E8E5A",
      "chart-5": "#E0930A",
      "sidebar": "#FFFDF6",
      "sidebar-foreground": "#141210",
      "sidebar-primary": "#141210",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F3A6E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#141210",
      "sidebar-ring": "#E8431F",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#141210",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E8431F",
      "accent-foreground": "#ffffff",
      "destructive": "#C9261E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E8431F",
      "chart-1": "#141210",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8431F",
      "chart-4": "#1E8E5A",
      "chart-5": "#E0930A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#141210",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E8431F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E8431F",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef6df-b17c-75d0-bf10-c0f7db3ae0ef",
    "slug": "gekiga",
    "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",
        "ink",
        "ink-blue",
        "muted",
        "on-accent",
        "panel-mint",
        "panel-pink",
        "panel-yellow",
        "success",
        "surface",
        "surface-2",
        "text",
        "vermilion",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "ground",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```