Tideline

# Tideline

## Philosophy

Tideline is a crafted-sheet interface system painted in saturated digital watercolor, reconceived for the dark. It takes the source idea — a product that feels authored by a hand, with wet pigment, bloom, and feathered edge, yet never goes fuzzy or imprecise — and changes its unit from the point to the edge. When wet pigment is dropped into wet paper, two washes do not blend evenly; they meet along a waterline and pool there, granulating and blooming into a bright glowing boundary. That wet edge is the whole system. Tideline organizes the screen as horizontal strata of colour that meet at luminous waterlines, and reserves the brightest charged edge for the moments that matter: the primary action, the active band, the live value. The ground is deep indigo wet paper, never white, so the bright waterlines read like light caught on a wet surface and the quiet reads as depth rather than emptiness. Type is a bold expanded grotesque with a single colour-pop on one headline word — no serif, no italic swap. The result is humid, luminous, and disciplined: soft where it should feel human, exact where a number has to be right.

### Values

- Read by the edge: the most charged, brightest pigment always sits exactly where the day turns — the active state, the primary action, the value that matters.
- Depth, not emptiness: the dark ground is wet paper at night; the quiet is humid and deep, and the bright waterlines read as light caught on water.
- Authored by a hand, exact where it counts: surfaces bloom and feather like pigment on stock, while type, spacing, and controls stay disciplined enough to run a working shift on.
- Humid, never muddy: jewel-tone washes layered as transparent glazes where the lower colour glows up through the upper; brilliance is preserved, never greyed.
- Warmth means watch this: the warm coral backrun is reserved for attention — a warning, a turning current — and never used as everyday decoration.

### Anti-Values

- Defaulting to a white or light editorial ground — that is the sibling refinement's territory, not this language's.
- Hairline borders or accent edges to separate content instead of a charged waterline seam.
- Serif or italic-swap headlines; the oversized italic serif and the regular-serif/italic-serif word flip.
- Muddy, greyed, or synthetic-glossy colour; gradients used as screen-light rather than pigment dilution.
- Decorative warmth everywhere, so the coral backrun stops meaning attention.

### Visual Character

- Waterline seams: sections and rows give way to one another at a glowing cyan edge (a 2px lit core plus a feathered halo), never a sterile hairline.
- The lit edge: the active band, selected row, live tab, and primary button all carry the bright waterline with its soft diffusion; quiet elements drop to a flat wash or plain ink.
- Warm backruns: only warnings and attention bleed a coral backrun off their edge.
- Meters and progress fill to a waterline — the leading edge is the bright tideline, the trailing fill the calmer wash behind it.
- Granulating wet swatches: each accent is a wash pooling at a waterline with fine speckled texture settling into the dark paper.
- Bold expanded grotesque headlines with a single highlighter colour-pop on one word; values and timestamps in restrained monospace.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A1326` |
| surface | `#12203D` |
| surface-2 | `#182B4F` |
| surface-3 | `#1F365F` |
| text | `#F4F7FB` |
| muted | `#9AB0CF` |
| border | `#243556` |
| accent | `#3DD4E8` |
| accent_2 | `#FF6A3D` |
| accent_3 | `#FFC24A` |
| on_accent | `#071021` |
| success | `#39C2A0` |
| warning | `#FFC24A` |
| error | `#FF6A6A` |
| info | `#5AB8E8` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 900
- **Heading Transform**: none
- **Letter Spacing**: -0.03em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap

### Radii

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

### Shadows

- **Glow**: 0 0 24px 2px color-mix(in srgb, var(--accent) 55%, transparent)

### Spacing

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

### Surfaces

- **Ground**: #0A1326
- **Panel**: #12203D
- **Raised**: #182B4F
- **Deep**: #1F365F

### Borders

- **Policy**: avoid; separate with a glowing waterline seam, not hairlines

### Motion

- **Default**: wash bleed-in from the seam outward
- **Reduced Motion**: settled state, no JS required

## Rules

### Composition

Stack the screen as full-bleed horizontal colour bands that meet at luminous waterline seams, not vellum panels floating on paper. The hero is one immersive saturated wash filling the viewport with the headline in its calm upper breathing zone. Below, return to rich stacked sections, each a band giving way to the next at a charged cyan seam. Reserve the brightest waterline for the active band, the primary action, and the live value; everything quiet drops to a flat wash or plain ink. On ultra-wide, cap and centre the content column; only the hero and band grounds span 100vw.

### Hierarchy

Headlines use a bold expanded grotesque (Archivo) with a single highlighter colour-pop on one word — no serif, no italic swap. Body and controls use Inter for legibility; values, timestamps, and metadata use IBM Plex Mono. The highest hierarchy combines type scale, brighter pigment concentration at the waterline, and the lit edge — not larger blocks of chrome. Alerts and selections intensify pigment while keeping the soft edge logic: the lit cyan edge for active, the warm coral backrun for attention.

### Density

Moderate density with generous breathing room between bands and compact, precise rhythm within each card. Spacious enough to feel the humid depth, dense enough to run a working shift.

### Signature

The waterline — two washes meet at a horizontal boundary and pool into a bright glowing edge (a 2px cyan core with a feathered diffusion and an occasional warm backrun). It maps onto semantic roles: the cyan core is --accent (the lit, active, primary edge), the warm backrun is --accent-2 (warning/attention), the bands are the surface roles — so the mechanic recolours on palette swap. Meters fill to a waterline; the live row lights its leading edge; sections meet at waterline seams.

### Signature Patterns

- Waterline seams between sections and rows: a 2px cyan core with a feathered halo, never a hairline border.
- The active band, selected row, live tab, and primary button light their cyan waterline; quiet elements drop to a flat wash.
- Warm coral backruns bleed off the edge only on warnings and attention.
- Meters and progress fill to a bright cyan tideline at their leading edge.
- Granulating wet swatches where each accent pools at a waterline with speckled texture on the dark paper.

## Layout

### Grid

Full-bleed horizontal bands; a capped, centred content column within each band on ultra-wide.

### Whitespace

Generous between bands; the dark ground reads as humid depth, not empty paper.

### Density

Macro-spacious, micro-precise.

### Responsive

Single column on mobile; hero and section headlines shrink with clamp() and wrap, never clipping the 390px edge; nav wraps or collapses; grids use minmax(0,1fr) + min-width:0 so children shrink instead of overflowing.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 760px
- **Desktop**: 1040px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Guidance

### Do

- Build on the deep indigo wet-paper ground; let the bright waterlines read like light on water.
- Separate content with a glowing waterline seam and space, never borders.
- Light the active or primary element's waterline; keep everything quiet a flat wash.
- Reserve the warm coral backrun for warnings and attention only.
- Use a bold grotesque headline with one highlighter colour-pop word; keep values in monospace.

### Don't

- Default to a white or light editorial ground.
- Use hairline borders or accent edges to divide content.
- Use serif headlines or the regular-serif/italic-serif word swap.
- Let colour go muddy or grey, or use gradients as synthetic screen-light.
- Scatter warm backruns as everyday decoration.

### Accessibility

Humid near-white text (#F4F7FB) on deep indigo (#0A1326) holds high contrast; muted sea-mist is reserved for secondary text on dark surfaces. The lit waterline marks state with both colour and position (a leading edge), not colour alone. Body 17px+; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

wetwash

### Summary

Saturated wet-into-wet watercolour applied to the wet edge itself — two washes meeting at a luminous waterline on deep paper, with warm backruns blooming off the boundary. Humid jewel-tones, never muddy.

### Subjects

- estuary water at the turn
- two washes meeting at a tideline
- coastal depth and current fields
- wet pigment pooling and granulating along an edge

### Usage

One full-bleed hero wash with a calm upper breathing zone for the headline overlay; bloom and granulation read against the dark ground.

---
version: "alpha"
name: "Tideline"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0A1326"
  surface: "#12203D"
  surface-2: "#182B4F"
  surface-3: "#1F365F"
  text: "#F4F7FB"
  muted: "#9AB0CF"
  border: "#243556"
  accent: "#3DD4E8"
  accent_2: "#FF6A3D"
  accent_3: "#FFC24A"
  on_accent: "#071021"
  success: "#39C2A0"
  warning: "#FFC24A"
  error: "#FF6A6A"
  info: "#5AB8E8"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.03em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  pill: "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-surface-3:
    backgroundColor: "{colors.surface-3}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-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"
---

# Tideline

## Overview

Tideline is a crafted-sheet interface system painted in saturated digital watercolor, reconceived for the dark. It takes the source idea — a product that feels authored by a hand, with wet pigment, bloom, and feathered edge, yet never goes fuzzy or imprecise — and changes its unit from the point to the edge. When wet pigment is dropped into wet paper, two washes do not blend evenly; they meet along a waterline and pool there, granulating and blooming into a bright glowing boundary. That wet edge is the whole system. Tideline organizes the screen as horizontal strata of colour that meet at luminous waterlines, and reserves the brightest charged edge for the moments that matter: the primary action, the active band, the live value. The ground is deep indigo wet paper, never white, so the bright waterlines read like light caught on a wet surface and the quiet reads as depth rather than emptiness. Type is a bold expanded grotesque with a single colour-pop on one headline word — no serif, no italic swap. The result is humid, luminous, and disciplined: soft where it should feel human, exact where a number has to be right.

### Values

- Read by the edge: the most charged, brightest pigment always sits exactly where the day turns — the active state, the primary action, the value that matters.
- Depth, not emptiness: the dark ground is wet paper at night; the quiet is humid and deep, and the bright waterlines read as light caught on water.
- Authored by a hand, exact where it counts: surfaces bloom and feather like pigment on stock, while type, spacing, and controls stay disciplined enough to run a working shift on.
- Humid, never muddy: jewel-tone washes layered as transparent glazes where the lower colour glows up through the upper; brilliance is preserved, never greyed.
- Warmth means watch this: the warm coral backrun is reserved for attention — a warning, a turning current — and never used as everyday decoration.

### Anti-Values

- Defaulting to a white or light editorial ground — that is the sibling refinement's territory, not this language's.
- Hairline borders or accent edges to separate content instead of a charged waterline seam.
- Serif or italic-swap headlines; the oversized italic serif and the regular-serif/italic-serif word flip.
- Muddy, greyed, or synthetic-glossy colour; gradients used as screen-light rather than pigment dilution.
- Decorative warmth everywhere, so the coral backrun stops meaning attention.

### Visual Character

- Waterline seams: sections and rows give way to one another at a glowing cyan edge (a 2px lit core plus a feathered halo), never a sterile hairline.
- The lit edge: the active band, selected row, live tab, and primary button all carry the bright waterline with its soft diffusion; quiet elements drop to a flat wash or plain ink.
- Warm backruns: only warnings and attention bleed a coral backrun off their edge.
- Meters and progress fill to a waterline — the leading edge is the bright tideline, the trailing fill the calmer wash behind it.
- Granulating wet swatches: each accent is a wash pooling at a waterline with fine speckled texture settling into the dark paper.
- Bold expanded grotesque headlines with a single highlighter colour-pop on one word; values and timestamps in restrained monospace.

## 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 | `#0A1326` |
| surface | `#12203D` |
| surface-2 | `#182B4F` |
| surface-3 | `#1F365F` |
| text | `#F4F7FB` |
| muted | `#9AB0CF` |
| border | `#243556` |
| accent | `#3DD4E8` |
| accent_2 | `#FF6A3D` |
| accent_3 | `#FFC24A` |
| on_accent | `#071021` |
| success | `#39C2A0` |
| warning | `#FFC24A` |
| error | `#FF6A6A` |
| info | `#5AB8E8` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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

Full-bleed horizontal bands; a capped, centred content column within each band on ultra-wide.

### Whitespace

Generous between bands; the dark ground reads as humid depth, not empty paper.

### Density

Macro-spacious, micro-precise.

### Responsive

Single column on mobile; hero and section headlines shrink with clamp() and wrap, never clipping the 390px edge; nav wraps or collapses; grids use minmax(0,1fr) + min-width:0 so children shrink instead of overflowing.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 760px
- **Desktop**: 1040px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Glow**: 0 0 24px 2px color-mix(in srgb, var(--accent) 55%, transparent)

## Shapes

### Rounded

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

### Surfaces

- **Ground**: #0A1326
- **Panel**: #12203D
- **Raised**: #182B4F
- **Deep**: #1F365F

### Borders

- **Policy**: avoid; separate with a glowing waterline seam, not hairlines

## Components

### Composition

Stack the screen as full-bleed horizontal colour bands that meet at luminous waterline seams, not vellum panels floating on paper. The hero is one immersive saturated wash filling the viewport with the headline in its calm upper breathing zone. Below, return to rich stacked sections, each a band giving way to the next at a charged cyan seam. Reserve the brightest waterline for the active band, the primary action, and the live value; everything quiet drops to a flat wash or plain ink. On ultra-wide, cap and centre the content column; only the hero and band grounds span 100vw.

### Hierarchy

Headlines use a bold expanded grotesque (Archivo) with a single highlighter colour-pop on one word — no serif, no italic swap. Body and controls use Inter for legibility; values, timestamps, and metadata use IBM Plex Mono. The highest hierarchy combines type scale, brighter pigment concentration at the waterline, and the lit edge — not larger blocks of chrome. Alerts and selections intensify pigment while keeping the soft edge logic: the lit cyan edge for active, the warm coral backrun for attention.

### Density

Moderate density with generous breathing room between bands and compact, precise rhythm within each card. Spacious enough to feel the humid depth, dense enough to run a working shift.

### Signature

The waterline — two washes meet at a horizontal boundary and pool into a bright glowing edge (a 2px cyan core with a feathered diffusion and an occasional warm backrun). It maps onto semantic roles: the cyan core is --accent (the lit, active, primary edge), the warm backrun is --accent-2 (warning/attention), the bands are the surface roles — so the mechanic recolours on palette swap. Meters fill to a waterline; the live row lights its leading edge; sections meet at waterline seams.

### Signature Patterns

- Waterline seams between sections and rows: a 2px cyan core with a feathered halo, never a hairline border.
- The active band, selected row, live tab, and primary button light their cyan waterline; quiet elements drop to a flat wash.
- Warm coral backruns bleed off the edge only on warnings and attention.
- Meters and progress fill to a bright cyan tideline at their leading edge.
- Granulating wet swatches where each accent pools at a waterline with speckled texture on the dark paper.

## 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-019efdb7-abf0-7e83-bd9d-a2360932ebd6/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 Build on the deep indigo wet-paper ground; let the bright waterlines read like light on water.
- Do Separate content with a glowing waterline seam and space, never borders.
- Do Light the active or primary element's waterline; keep everything quiet a flat wash.
- Do Reserve the warm coral backrun for warnings and attention only.
- Do Use a bold grotesque headline with one highlighter colour-pop word; keep values in monospace.
- Don't Default to a white or light editorial ground.
- Don't Use hairline borders or accent edges to divide content.
- Don't Use serif headlines or the regular-serif/italic-serif word swap.
- Don't Let colour go muddy or grey, or use gradients as synthetic screen-light.
- Don't Scatter warm backruns as everyday decoration.

### Accessibility

Humid near-white text (#F4F7FB) on deep indigo (#0A1326) holds high contrast; muted sea-mist is reserved for secondary text on dark surfaces. The lit waterline marks state with both colour and position (a leading edge), not colour alone. Body 17px+; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

wetwash

### Summary

Saturated wet-into-wet watercolour applied to the wet edge itself — two washes meeting at a luminous waterline on deep paper, with warm backruns blooming off the boundary. Humid jewel-tones, never muddy.

### Subjects

- estuary water at the turn
- two washes meeting at a tideline
- coastal depth and current fields
- wet pigment pooling and granulating along an edge

### Usage

One full-bleed hero wash with a calm upper breathing zone for the headline overlay; bloom and granulation read against the dark ground.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tideline",
  "type": "registry:theme",
  "title": "Tideline shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A1326",
      "foreground": "#F4F7FB",
      "card": "#12203D",
      "card-foreground": "#F4F7FB",
      "popover": "#12203D",
      "popover-foreground": "#F4F7FB",
      "primary": "#F4F7FB",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9AB0CF",
      "muted-foreground": "#F4F7FB",
      "accent": "#3DD4E8",
      "accent-foreground": "#ffffff",
      "destructive": "#FF6A6A",
      "border": "#243556",
      "input": "#243556",
      "ring": "#3DD4E8",
      "chart-1": "#F4F7FB",
      "chart-2": "#f4f4f5",
      "chart-3": "#3DD4E8",
      "chart-4": "#39C2A0",
      "chart-5": "#FFC24A",
      "sidebar": "#12203D",
      "sidebar-foreground": "#F4F7FB",
      "sidebar-primary": "#F4F7FB",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5AB8E8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#243556",
      "sidebar-ring": "#3DD4E8",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F4F7FB",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3DD4E8",
      "accent-foreground": "#ffffff",
      "destructive": "#FF6A6A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3DD4E8",
      "chart-1": "#F4F7FB",
      "chart-2": "#f4f4f5",
      "chart-3": "#3DD4E8",
      "chart-4": "#39C2A0",
      "chart-5": "#FFC24A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F4F7FB",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#3DD4E8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3DD4E8",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efdb7-abf0-7e83-bd9d-a2360932ebd6",
    "slug": "tideline",
    "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",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface-2",
        "surface-3",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "md",
        "none",
        "pill",
        "sm"
      ],
      "shadows": [
        "glow"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "deep",
        "ground",
        "panel",
        "raised"
      ],
      "borders": [
        "policy"
      ],
      "motion": [
        "default",
        "reduced_motion"
      ]
    }
  }
}
```