Amikake Console

# Amikake Console

## Philosophy

Amikake Console is a disciplined youth-tech language for street-level software: monochrome manga structure, portable-console hardware cues, and terminal-state labelling compressed into a polished black-and-paper interface. It treats existential cyber-anime mood as operational clarity rather than visual chaos. A faithful refinement of Osaka Debug Deck, brought up to standard.

### Values

- manga economy: black ink, warm paper, screentone, and only one loud status mark
- debug legibility: every decorative label behaves like firmware metadata or a terminal prompt
- portable hardware tactility through chrome rails, battery chips, recessed buttons, and barcode IDs
- asymmetric streetwear composition with sticker clusters balanced by large calm negative space
- high-contrast accessibility with a restrained accent hierarchy and no synthetic rainbow effects
- youthful velocity expressed through cropping, panel rhythm, and microcopy rather than clutter

### Anti-Values

- generic neon cyberpunk gradients and dense futuristic decoration
- soft SaaS cards with equal columns, pastel status palettes, and default rounded corners
- anime nostalgia used as illustration wallpaper instead of structural typography and layout
- uncontrolled graffiti, random stickers, or multiple competing accent colours

### Visual Character

- A modular manga-panel grid uses thick black outer rules, clipped corner notches, halftone blocks, and one oversized negative-space breach to avoid equal-card symmetry.
- Portable-console chrome rails are built with linear-gradient silver strips, pill battery chips, circular hardware buttons, and recessed black screw dots on key surfaces.
- Terminal stickers appear as rotated monochrome labels with barcode IDs, command prompts, and checksum strings, with a single acid-lime hand-tag overlay used only for active status.
- Typography separates voices with condensed uppercase Teko deck labels, IBM Plex Sans JP body copy, and Reddit Mono firmware microcopy with mandatory tight tracking.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2EDE3` |
| surface | `#FFFDF6` |
| surface_2 | `#E7E1D4` |
| ink | `#11110F` |
| text | `#11110F` |
| text_inverse | `#F4F1E8` |
| muted | `#5F5D56` |
| secondary | `#7A7A72` |
| accent | `#B7D23A` |
| accent_ink | `#3A4A0E` |
| on_accent | `#11110F` |
| border | `#11110F` |
| success | `#6E8A1F` |
| warning | `#C49A2E` |
| error | `#B33A2E` |
| info | `#4F8B9A` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans JP
- **Heading Font**: Teko
- **Mono Font**: Reddit Mono
- **Heading Weight**: 600
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Reddit+Mono:wght@400;500;700&display=swap

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 rgba(17,17,15,0.18)
- **Md**: 8px 8px 0 rgba(17,17,15,0.12)
- **Lg**: 14px 18px 0 rgba(17,17,15,0.10)

### Spacing

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

### Surfaces

- **Bg Pattern**: Large quiet warm-paper background with a faint diagonal halftone field and small barcode ticks; pattern opacity stays below 12%.
- **Card Style**: Rectangular manga panels with 2-4px black rules, clipped corner notches, a one-corner halftone block, and occasional offset sticker labels; hard offset print shadows, never soft blur.
- **Treatment**: Warm paper fields with black ink rules, sparse halftone radial-dot overlays, and chrome strips reserved for hardware-like edges.

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Ink-black panel rules, doubled terminal dividers, clipped-corner outlines, and near-invisible rgba(17,17,15,0.10) interior hairlines.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: Motion feels like firmware confirming input: tiny lime blinks, one-step deck slides, and no floating parallax or decorative looping. The settled state renders with no JavaScript; motion is layered on top behind a class and respects prefers-reduced-motion.

## Rules

### Composition

Use a 12-column modular UI grid interrupted by manga panel spans: one dominant deck panel, one dense debug strip, one rotated sticker cluster, and a deliberate large blank paper area. Avoid three equal cards; panels crop, overlap, or break the grid like a printed streetwear layout.

### Hierarchy

Primary hierarchy comes from condensed uppercase deck labels at extreme scale, then black rule weight, then monospace debug chips. Acid lime marks only live on active or selected states, never as a general decorative fill. Chrome rails frame important controls but never become a full background.

### Density

Alternate dense firmware clusters at 4-8px gaps with open paper zones at 64-128px so the system feels energetic but disciplined instead of busy.

### Signature

- Clipped manga panels use CSS polygon clip-path plus thick ink borders and a halftone pseudo-element anchored to one corner.
- Portable-console chrome rails use narrow linear-gradient strips with screw-dot pseudo-elements and pill battery chips attached to panel edges.
- Terminal sticker clusters are rotated labels with barcode repeating-linear-gradient blocks and command-prompt microcopy, clustered at meaningful panel edges.
- Acid-lime hand-tag states are drawn as short skewed highlight strokes behind text, limited to one active command or route marker per composition.

## Layout

### Grid

Desktop uses a 12-column grid with 24px gutters and max-width 1320px; dominant panels span 7-8 columns while utility panels occupy irregular 3-5 column fragments. Grids use minmax(0,1fr) columns and min-width:0 children so they never blow out their container.

### Whitespace

Large negative-space fields are mandatory around the hero title and beside the console deck; do not fill paper gaps with extra icons or metrics.

### Density

The system deliberately pairs tight terminal rows with generous paper pauses; visual energy is localized to sticker clusters and debug strips.

### Responsive

Chrome rails and halftone blocks scale with clamp() dimensions, panels stack before microcopy becomes unreadable, rotated stickers flatten on narrow screens, and non-essential nav links and table columns are hidden on mobile.

### Breakpoints

- **Mobile**: < 640px stacks panels in source order with sticker rotation reduced and non-essential nav hidden
- **Tablet**: 640-1024px uses 6 columns
- **Desktop**: >= 1024px uses the full 12-column asymmetric deck
- **Ultrawide**: >= 1600px caps and centres the contained content; only the full-bleed hero spans 100vw

## Guidance

### Do

- Use black-and-warm-paper as the default relationship and reserve acid lime for active debug state.
- Make at least one panel visibly hardware-like with chrome rails, screws, and battery/status chips.
- Create rhythm through manga crops, halftone fields, barcode labels, and dense terminal rows.
- Keep body copy readable at 17px+ with -0.02em tracking and strong contrast.
- Use condensed uppercase labels for deck/navigation language and monospace only for metadata.
- Let large blank paper areas remain blank; restraint is part of the streetwear polish.
- Pair every colour status with text, a shape, or a command label for accessibility.

### Don't

- Do not introduce purple, cyan, pink, or a multi-neon cyberpunk palette.
- Do not use three equal statistic cards, generic dashboard charts, or SaaS analytics layouts.
- Do not turn manga influence into character-illustration wallpaper.
- Do not scatter stickers randomly; cluster them around meaningful panel edges.
- Do not round every card or use soft glassmorphism blurs.
- Do not place essential information only in tiny barcode or microcopy labels.
- Do not let chrome gradients cover large surfaces; they are hardware cues only.

### Accessibility

Maintain WCAG AA contrast on paper and ink surfaces, keep lime supplemental to text state, use #3A4A0E for lime text on paper, provide visible black or lime focus outlines, and never set terminal microcopy below 11px.

## Imagery Direction

### Pairs With

screentone-press

### Summary

Bold black manga ink and gekiga halftone screentone on warm off-white paper, with exactly one acid-lime hand-drawn accent. Imagery treats portable-hardware and street-tech subjects as dramatic, frame-filling gekiga plates.

### Subjects

- a hand gripping a portable debug console
- a courier deck mid-dispatch
- a circuit-dense device underside
- a rider crossing a halftone-shaded street

### Usage

Landing hero is generated in the screentone-press technique, full-bleed behind a legible ink overlay. Reserve the single acid-lime mark for the live element in each image.

---
version: "alpha"
name: "Amikake Console"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F2EDE3"
  surface: "#FFFDF6"
  surface_2: "#E7E1D4"
  ink: "#11110F"
  text: "#11110F"
  text_inverse: "#F4F1E8"
  muted: "#5F5D56"
  secondary: "#7A7A72"
  accent: "#B7D23A"
  accent_ink: "#3A4A0E"
  on_accent: "#11110F"
  border: "#11110F"
  success: "#6E8A1F"
  warning: "#C49A2E"
  error: "#B33A2E"
  info: "#4F8B9A"
typography:
  headline-lg:
    fontFamily: "Teko"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Teko"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans JP"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Reddit Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "16px"
  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"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_inverse:
    backgroundColor: "{colors.text_inverse}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_ink:
    backgroundColor: "{colors.accent_ink}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  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"
---

# Amikake Console

## Overview

Amikake Console is a disciplined youth-tech language for street-level software: monochrome manga structure, portable-console hardware cues, and terminal-state labelling compressed into a polished black-and-paper interface. It treats existential cyber-anime mood as operational clarity rather than visual chaos. A faithful refinement of Osaka Debug Deck, brought up to standard.

### Values

- manga economy: black ink, warm paper, screentone, and only one loud status mark
- debug legibility: every decorative label behaves like firmware metadata or a terminal prompt
- portable hardware tactility through chrome rails, battery chips, recessed buttons, and barcode IDs
- asymmetric streetwear composition with sticker clusters balanced by large calm negative space
- high-contrast accessibility with a restrained accent hierarchy and no synthetic rainbow effects
- youthful velocity expressed through cropping, panel rhythm, and microcopy rather than clutter

### Anti-Values

- generic neon cyberpunk gradients and dense futuristic decoration
- soft SaaS cards with equal columns, pastel status palettes, and default rounded corners
- anime nostalgia used as illustration wallpaper instead of structural typography and layout
- uncontrolled graffiti, random stickers, or multiple competing accent colours

### Visual Character

- A modular manga-panel grid uses thick black outer rules, clipped corner notches, halftone blocks, and one oversized negative-space breach to avoid equal-card symmetry.
- Portable-console chrome rails are built with linear-gradient silver strips, pill battery chips, circular hardware buttons, and recessed black screw dots on key surfaces.
- Terminal stickers appear as rotated monochrome labels with barcode IDs, command prompts, and checksum strings, with a single acid-lime hand-tag overlay used only for active status.
- Typography separates voices with condensed uppercase Teko deck labels, IBM Plex Sans JP body copy, and Reddit Mono firmware microcopy with mandatory tight tracking.

## 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 | `#F2EDE3` |
| surface | `#FFFDF6` |
| surface_2 | `#E7E1D4` |
| ink | `#11110F` |
| text | `#11110F` |
| text_inverse | `#F4F1E8` |
| muted | `#5F5D56` |
| secondary | `#7A7A72` |
| accent | `#B7D23A` |
| accent_ink | `#3A4A0E` |
| on_accent | `#11110F` |
| border | `#11110F` |
| success | `#6E8A1F` |
| warning | `#C49A2E` |
| error | `#B33A2E` |
| info | `#4F8B9A` |

## Typography

- **Headline-Lg**: Teko, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Teko, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans JP, 17px, weight 400, line-height 1.55.
- **Label-Md**: Reddit 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`
- **Step-9**: `128px`

### Grid

Desktop uses a 12-column grid with 24px gutters and max-width 1320px; dominant panels span 7-8 columns while utility panels occupy irregular 3-5 column fragments. Grids use minmax(0,1fr) columns and min-width:0 children so they never blow out their container.

### Whitespace

Large negative-space fields are mandatory around the hero title and beside the console deck; do not fill paper gaps with extra icons or metrics.

### Density

The system deliberately pairs tight terminal rows with generous paper pauses; visual energy is localized to sticker clusters and debug strips.

### Responsive

Chrome rails and halftone blocks scale with clamp() dimensions, panels stack before microcopy becomes unreadable, rotated stickers flatten on narrow screens, and non-essential nav links and table columns are hidden on mobile.

### Breakpoints

- **Mobile**: < 640px stacks panels in source order with sticker rotation reduced and non-essential nav hidden
- **Tablet**: 640-1024px uses 6 columns
- **Desktop**: >= 1024px uses the full 12-column asymmetric deck
- **Ultrawide**: >= 1600px caps and centres the contained content; only the full-bleed hero spans 100vw

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 rgba(17,17,15,0.18)
- **Md**: 8px 8px 0 rgba(17,17,15,0.12)
- **Lg**: 14px 18px 0 rgba(17,17,15,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Large quiet warm-paper background with a faint diagonal halftone field and small barcode ticks; pattern opacity stays below 12%.
- **Card Style**: Rectangular manga panels with 2-4px black rules, clipped corner notches, a one-corner halftone block, and occasional offset sticker labels; hard offset print shadows, never soft blur.
- **Treatment**: Warm paper fields with black ink rules, sparse halftone radial-dot overlays, and chrome strips reserved for hardware-like edges.

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Ink-black panel rules, doubled terminal dividers, clipped-corner outlines, and near-invisible rgba(17,17,15,0.10) interior hairlines.

## Components

### Composition

Use a 12-column modular UI grid interrupted by manga panel spans: one dominant deck panel, one dense debug strip, one rotated sticker cluster, and a deliberate large blank paper area. Avoid three equal cards; panels crop, overlap, or break the grid like a printed streetwear layout.

### Hierarchy

Primary hierarchy comes from condensed uppercase deck labels at extreme scale, then black rule weight, then monospace debug chips. Acid lime marks only live on active or selected states, never as a general decorative fill. Chrome rails frame important controls but never become a full background.

### Density

Alternate dense firmware clusters at 4-8px gaps with open paper zones at 64-128px so the system feels energetic but disciplined instead of busy.

### Signature

- Clipped manga panels use CSS polygon clip-path plus thick ink borders and a halftone pseudo-element anchored to one corner.
- Portable-console chrome rails use narrow linear-gradient strips with screw-dot pseudo-elements and pill battery chips attached to panel edges.
- Terminal sticker clusters are rotated labels with barcode repeating-linear-gradient blocks and command-prompt microcopy, clustered at meaningful panel edges.
- Acid-lime hand-tag states are drawn as short skewed highlight strokes behind text, limited to one active command or route marker per composition.

## 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-019ef821-6251-7d72-b664-99e23ed79779/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 Use black-and-warm-paper as the default relationship and reserve acid lime for active debug state.
- Do Make at least one panel visibly hardware-like with chrome rails, screws, and battery/status chips.
- Do Create rhythm through manga crops, halftone fields, barcode labels, and dense terminal rows.
- Do Keep body copy readable at 17px+ with -0.02em tracking and strong contrast.
- Do Use condensed uppercase labels for deck/navigation language and monospace only for metadata.
- Do Let large blank paper areas remain blank; restraint is part of the streetwear polish.
- Do Pair every colour status with text, a shape, or a command label for accessibility.
- Don't Do not introduce purple, cyan, pink, or a multi-neon cyberpunk palette.
- Don't Do not use three equal statistic cards, generic dashboard charts, or SaaS analytics layouts.
- Don't Do not turn manga influence into character-illustration wallpaper.
- Don't Do not scatter stickers randomly; cluster them around meaningful panel edges.
- Don't Do not round every card or use soft glassmorphism blurs.
- Don't Do not place essential information only in tiny barcode or microcopy labels.
- Don't Do not let chrome gradients cover large surfaces; they are hardware cues only.

### Accessibility

Maintain WCAG AA contrast on paper and ink surfaces, keep lime supplemental to text state, use #3A4A0E for lime text on paper, provide visible black or lime focus outlines, and never set terminal microcopy below 11px.

## Imagery Direction

### Pairs With

screentone-press

### Summary

Bold black manga ink and gekiga halftone screentone on warm off-white paper, with exactly one acid-lime hand-drawn accent. Imagery treats portable-hardware and street-tech subjects as dramatic, frame-filling gekiga plates.

### Subjects

- a hand gripping a portable debug console
- a courier deck mid-dispatch
- a circuit-dense device underside
- a rider crossing a halftone-shaded street

### Usage

Landing hero is generated in the screentone-press technique, full-bleed behind a legible ink overlay. Reserve the single acid-lime mark for the live element in each image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "amikake-console",
  "type": "registry:theme",
  "title": "Amikake Console shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2EDE3",
      "foreground": "#11110F",
      "card": "#FFFDF6",
      "card-foreground": "#11110F",
      "popover": "#FFFDF6",
      "popover-foreground": "#11110F",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#7A7A72",
      "secondary-foreground": "#ffffff",
      "muted": "#5F5D56",
      "muted-foreground": "#11110F",
      "accent": "#B7D23A",
      "accent-foreground": "#111111",
      "destructive": "#B33A2E",
      "border": "#11110F",
      "input": "#11110F",
      "ring": "#B7D23A",
      "chart-1": "#11110F",
      "chart-2": "#7A7A72",
      "chart-3": "#B7D23A",
      "chart-4": "#6E8A1F",
      "chart-5": "#C49A2E",
      "sidebar": "#FFFDF6",
      "sidebar-foreground": "#11110F",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4F8B9A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#11110F",
      "sidebar-ring": "#B7D23A",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#11110F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B7D23A",
      "accent-foreground": "#111111",
      "destructive": "#B33A2E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B7D23A",
      "chart-1": "#11110F",
      "chart-2": "#7A7A72",
      "chart-3": "#B7D23A",
      "chart-4": "#6E8A1F",
      "chart-5": "#C49A2E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#11110F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B7D23A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B7D23A",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef821-6251-7d72-b664-99e23ed79779",
    "slug": "amikake-console",
    "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_ink",
        "bg",
        "border",
        "error",
        "info",
        "ink",
        "muted",
        "on_accent",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "text_inverse",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "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",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```