Glaze

# Glaze

## Philosophy

Glaze is a watercolor material system: colour is built from translucent mineral-pigment glazes layered over bright white archival paper, never opaque fills, so every interface state reads as one more wash laid down. Hand-made evidence sits inside a strict editorial grid, so the craft never costs precision. It is built for brand-illustration tools, editorial dashboards, and creative-workflow products that need warmth without losing rigour.

### Values

- {"name":"Transparency as structure","explanation":"Colour is built from low-opacity layers rather than opaque fills, echoing watercolor glazing and making states feel additive instead of heavy."}
- {"name":"Paper as the surface","explanation":"A subtle grain texture sits across every panel and the page, so the surface feels fibrous and absorbent while staying legible."}
- {"name":"Controlled bloom","explanation":"Wet-on-wet effects appear as soft feathered halos around priority areas, never as uncontrolled decorative gradients."}
- {"name":"Pigment restraint","explanation":"Mostly black ink, white paper, and one mineral-blue accent, with rare warm ochre and rose splatter for emphasis."}
- {"name":"Readable craft","explanation":"Typography and spacing stay crisp, editorial, and digital; hand-made texture never compromises accessibility or interaction clarity."}

### Anti-Values

- No pastel-template softness: no candy backgrounds, lavender cards, or mint panels.
- No gradient buttons or glossy glow; translucency is simulated with layered washes and texture masks.
- No messy art-board clutter: splatters and blooms are sparse annotations tied to hierarchy.
- No default browser UI; every control feels printed and deliberately placed on paper.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#14130F` |
| muted | `#6E6A5E` |
| border | `#D8D1C2` |
| accent | `#1F6A8C` |
| on_accent | `#FFFFFF` |
| primary | `#14130F` |
| secondary | `#14506B` |
| success | `#3F7A52` |
| warning | `#B87524` |
| error | `#A33A32` |
| info | `#1F6A8C` |
| pigment_blue | `#1F6A8C` |
| pigment_blue_deep | `#14506B` |
| pigment_ochre | `#C8862E` |
| pigment_rose | `#C66A5E` |
| paper_fiber | `#D8D1C2` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(20,19,15,0.06), 0 8px 24px rgba(31,106,140,0.06)
- **Md**: 0 1px 0 rgba(20,19,15,0.08), 0 18px 44px rgba(31,106,140,0.10)
- **Lg**: 0 2px 0 rgba(20,19,15,0.10), 0 30px 80px rgba(31,106,140,0.14)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: White surfaces with translucent mineral wash blooms, visible paper grain, uneven pigment edges, and a single sparse splatter cluster for emphasis.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Thin ink-and-paper rules, paired with masked dry-brush dashed strokes for selection — texture without losing UI precision.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Snappy but absorbent: controls respond quickly, then settle like pigment soaking into paper. Settled state is the default with no JavaScript.

## Rules

### Composition

A disciplined editorial grid under tactile watercolor layers: white paper fields, compact ink typography, and wash panels clustered around real workflow objects. Illustration plates run larger than controls so the material identity shows; tables, forms, and navigation hold strict alignment.

### Hierarchy

Fraunces in substantial optical sizes for display; IBM Plex Sans for UI; IBM Plex Mono for numeric and asset metadata. Priority is signalled by ink weight, wash opacity, and a rare accent splatter rather than many colours.

### Density

Medium density with generous breathing room around illustration and analysis panels. Data can be compact, but every group keeps at least 24px internal padding so paper grain and wash texture stay perceptible.

### Signature

Every UI state is a glaze — a transparent wash at 0.06-0.18 opacity stacked over reserved white. Cards use layered ::before/::after pigment stains; selection uses a masked dry-brush dashed stroke; emphasis uses one restrained splatter cluster and soft bloom halos; illustration plates use negative-space wash masks.

## Layout

### Grid

Desktop uses a max-width 1320px grid with 24px gutters; the workspace splits into a 280px pigment sidebar, a central review canvas, and a 300px inspector column. Tablet stacks the inspector below the canvas. Mobile is one column with 16px gutters and horizontal scroll only inside the data table.

### Whitespace

Whitespace behaves like untouched paper: important content is framed by open white margins, while washes sit behind content as translucent zones rather than filled blocks.

### Density

Medium editorial density: spacious presentation areas with compact but legible operational controls. The texture needs room, so avoid edge-to-edge packed cards.

### Responsive

Every artifact renders well from ~390px mobile to 2560px+ ultra-wide; minmax(0,1fr) columns and min-width:0 children keep grids from blowing out. Only the full-bleed hero spans 100vw on ultra-wide; contained content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone**: 480px
- **Tablet**: 768px
- **Tablet Lg**: 1024px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Guidance

### Do

- Use pure #FFFFFF as the base paper and add texture through subtle overlays, not tinted backgrounds.
- Build colour through transparent wash layers at 0.06-0.18 opacity so underlying typography stays crisp.
- Reserve the cerulean accent for primary actions and active states; let black ink carry most hierarchy.
- Apply -0.02em tracking globally; use Fraunces for expressive headings and artwork titles.
- Keep radii on the strict 16/24/9999 scale; use 16px for most cards and controls.
- Make texture functional: dry-brush strokes for selection, bloom halos for emphasis, paper grain for surface continuity.
- Explicitly style every form control; wrap dense tables in an overflow container with zebra wash rows on mobile.
- Render the settled state with no JavaScript; layer motion on top behind a class the script sets.

### Don't

- Do not use gradient buttons, rainbow washes, or glossy glow cards.
- Do not use pastel panel backgrounds as the identity; watercolor texture layers over white paper.
- Do not scatter splatters; more than one cluster per panel reads as messy.
- Do not use random radii such as 8px, 12px, 20px, or 32px.
- Do not box the nav in a floating pill bar or nest cards.
- Do not give a card an accent/highlight edge stripe.
- Do not rely on default select, checkbox, radio, or button styling.
- Do not use symbol glyphs in copy; use SVG primitives.

### Accessibility

Maintain WCAG AA by placing text on white or near-white regions, never on dense pigment. Focus states use a cerulean ring plus a soft wash halo. Touch targets are at least 44px; disabled states reduce opacity while preserving labels; motion is short with no parallax or flashing texture and respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

lavis

### Summary

Subjects rendered in layered transparent watercolor glazing — translucent granulated mineral-pigment washes over bright white archival paper, soft wet-on-wet blooms, crisp dry-brush edges, and fine black ink contour lines, with one restrained splatter cluster.

### Subjects

- estuary and tidal landscapes
- moored sailing boats
- marsh reeds and shorelines
- atmospheric skies
- brand illustration plates

### Usage

Full-bleed luminous hero with a luminous open area for a masked white-paper reserve overlay; feature and avatar shots are single centred subjects filling the frame. No text, letters, or logos in the image.

---
version: "alpha"
name: "Glaze"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FFFFFF"
  surface: "#FFFFFF"
  text: "#14130F"
  muted: "#6E6A5E"
  border: "#D8D1C2"
  accent: "#1F6A8C"
  on_accent: "#FFFFFF"
  primary: "#14130F"
  secondary: "#14506B"
  success: "#3F7A52"
  warning: "#B87524"
  error: "#A33A32"
  info: "#1F6A8C"
  pigment_blue: "#1F6A8C"
  pigment_blue_deep: "#14506B"
  pigment_ochre: "#C8862E"
  pigment_rose: "#C66A5E"
  paper_fiber: "#D8D1C2"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  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"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  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-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-pigment_blue:
    backgroundColor: "{colors.pigment_blue}"
  color-reference-pigment_blue_deep:
    backgroundColor: "{colors.pigment_blue_deep}"
  color-reference-pigment_ochre:
    backgroundColor: "{colors.pigment_ochre}"
  color-reference-pigment_rose:
    backgroundColor: "{colors.pigment_rose}"
  color-reference-paper_fiber:
    backgroundColor: "{colors.paper_fiber}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    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"
---

# Glaze

## Overview

Glaze is a watercolor material system: colour is built from translucent mineral-pigment glazes layered over bright white archival paper, never opaque fills, so every interface state reads as one more wash laid down. Hand-made evidence sits inside a strict editorial grid, so the craft never costs precision. It is built for brand-illustration tools, editorial dashboards, and creative-workflow products that need warmth without losing rigour.

### Values

- {"name":"Transparency as structure","explanation":"Colour is built from low-opacity layers rather than opaque fills, echoing watercolor glazing and making states feel additive instead of heavy."}
- {"name":"Paper as the surface","explanation":"A subtle grain texture sits across every panel and the page, so the surface feels fibrous and absorbent while staying legible."}
- {"name":"Controlled bloom","explanation":"Wet-on-wet effects appear as soft feathered halos around priority areas, never as uncontrolled decorative gradients."}
- {"name":"Pigment restraint","explanation":"Mostly black ink, white paper, and one mineral-blue accent, with rare warm ochre and rose splatter for emphasis."}
- {"name":"Readable craft","explanation":"Typography and spacing stay crisp, editorial, and digital; hand-made texture never compromises accessibility or interaction clarity."}

### Anti-Values

- No pastel-template softness: no candy backgrounds, lavender cards, or mint panels.
- No gradient buttons or glossy glow; translucency is simulated with layered washes and texture masks.
- No messy art-board clutter: splatters and blooms are sparse annotations tied to hierarchy.
- No default browser UI; every control feels printed and deliberately placed on paper.

## 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 | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#14130F` |
| muted | `#6E6A5E` |
| border | `#D8D1C2` |
| accent | `#1F6A8C` |
| on_accent | `#FFFFFF` |
| primary | `#14130F` |
| secondary | `#14506B` |
| success | `#3F7A52` |
| warning | `#B87524` |
| error | `#A33A32` |
| info | `#1F6A8C` |
| pigment_blue | `#1F6A8C` |
| pigment_blue_deep | `#14506B` |
| pigment_ochre | `#C8862E` |
| pigment_rose | `#C66A5E` |
| paper_fiber | `#D8D1C2` |

## Typography

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

### Grid

Desktop uses a max-width 1320px grid with 24px gutters; the workspace splits into a 280px pigment sidebar, a central review canvas, and a 300px inspector column. Tablet stacks the inspector below the canvas. Mobile is one column with 16px gutters and horizontal scroll only inside the data table.

### Whitespace

Whitespace behaves like untouched paper: important content is framed by open white margins, while washes sit behind content as translucent zones rather than filled blocks.

### Density

Medium editorial density: spacious presentation areas with compact but legible operational controls. The texture needs room, so avoid edge-to-edge packed cards.

### Responsive

Every artifact renders well from ~390px mobile to 2560px+ ultra-wide; minmax(0,1fr) columns and min-width:0 children keep grids from blowing out. Only the full-bleed hero spans 100vw on ultra-wide; contained content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone**: 480px
- **Tablet**: 768px
- **Tablet Lg**: 1024px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(20,19,15,0.06), 0 8px 24px rgba(31,106,140,0.06)
- **Md**: 0 1px 0 rgba(20,19,15,0.08), 0 18px 44px rgba(31,106,140,0.10)
- **Lg**: 0 2px 0 rgba(20,19,15,0.10), 0 30px 80px rgba(31,106,140,0.14)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: White surfaces with translucent mineral wash blooms, visible paper grain, uneven pigment edges, and a single sparse splatter cluster for emphasis.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Thin ink-and-paper rules, paired with masked dry-brush dashed strokes for selection — texture without losing UI precision.

## Components

### Composition

A disciplined editorial grid under tactile watercolor layers: white paper fields, compact ink typography, and wash panels clustered around real workflow objects. Illustration plates run larger than controls so the material identity shows; tables, forms, and navigation hold strict alignment.

### Hierarchy

Fraunces in substantial optical sizes for display; IBM Plex Sans for UI; IBM Plex Mono for numeric and asset metadata. Priority is signalled by ink weight, wash opacity, and a rare accent splatter rather than many colours.

### Density

Medium density with generous breathing room around illustration and analysis panels. Data can be compact, but every group keeps at least 24px internal padding so paper grain and wash texture stay perceptible.

### Signature

Every UI state is a glaze — a transparent wash at 0.06-0.18 opacity stacked over reserved white. Cards use layered ::before/::after pigment stains; selection uses a masked dry-brush dashed stroke; emphasis uses one restrained splatter cluster and soft bloom halos; illustration plates use negative-space wash masks.

## 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-019ef885-f371-7bf2-be14-d2da54eb8823/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 pure #FFFFFF as the base paper and add texture through subtle overlays, not tinted backgrounds.
- Do Build colour through transparent wash layers at 0.06-0.18 opacity so underlying typography stays crisp.
- Do Reserve the cerulean accent for primary actions and active states; let black ink carry most hierarchy.
- Do Apply -0.02em tracking globally; use Fraunces for expressive headings and artwork titles.
- Do Keep radii on the strict 16/24/9999 scale; use 16px for most cards and controls.
- Do Make texture functional: dry-brush strokes for selection, bloom halos for emphasis, paper grain for surface continuity.
- Do Explicitly style every form control; wrap dense tables in an overflow container with zebra wash rows on mobile.
- Do Render the settled state with no JavaScript; layer motion on top behind a class the script sets.
- Don't Do not use gradient buttons, rainbow washes, or glossy glow cards.
- Don't Do not use pastel panel backgrounds as the identity; watercolor texture layers over white paper.
- Don't Do not scatter splatters; more than one cluster per panel reads as messy.
- Don't Do not use random radii such as 8px, 12px, 20px, or 32px.
- Don't Do not box the nav in a floating pill bar or nest cards.
- Don't Do not give a card an accent/highlight edge stripe.
- Don't Do not rely on default select, checkbox, radio, or button styling.
- Don't Do not use symbol glyphs in copy; use SVG primitives.

### Accessibility

Maintain WCAG AA by placing text on white or near-white regions, never on dense pigment. Focus states use a cerulean ring plus a soft wash halo. Touch targets are at least 44px; disabled states reduce opacity while preserving labels; motion is short with no parallax or flashing texture and respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

lavis

### Summary

Subjects rendered in layered transparent watercolor glazing — translucent granulated mineral-pigment washes over bright white archival paper, soft wet-on-wet blooms, crisp dry-brush edges, and fine black ink contour lines, with one restrained splatter cluster.

### Subjects

- estuary and tidal landscapes
- moored sailing boats
- marsh reeds and shorelines
- atmospheric skies
- brand illustration plates

### Usage

Full-bleed luminous hero with a luminous open area for a masked white-paper reserve overlay; feature and avatar shots are single centred subjects filling the frame. No text, letters, or logos in the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glaze",
  "type": "registry:theme",
  "title": "Glaze shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#14130F",
      "card": "#FFFFFF",
      "card-foreground": "#14130F",
      "popover": "#FFFFFF",
      "popover-foreground": "#14130F",
      "primary": "#14130F",
      "primary-foreground": "#ffffff",
      "secondary": "#14506B",
      "secondary-foreground": "#ffffff",
      "muted": "#6E6A5E",
      "muted-foreground": "#14130F",
      "accent": "#1F6A8C",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A32",
      "border": "#D8D1C2",
      "input": "#D8D1C2",
      "ring": "#1F6A8C",
      "chart-1": "#14130F",
      "chart-2": "#14506B",
      "chart-3": "#1F6A8C",
      "chart-4": "#3F7A52",
      "chart-5": "#B87524",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#14130F",
      "sidebar-primary": "#14130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F6A8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D1C2",
      "sidebar-ring": "#1F6A8C",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14130F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#1F6A8C",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#1F6A8C",
      "chart-1": "#14130F",
      "chart-2": "#14506B",
      "chart-3": "#1F6A8C",
      "chart-4": "#3F7A52",
      "chart-5": "#B87524",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F6A8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#1F6A8C",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef885-f371-7bf2-be14-d2da54eb8823",
    "slug": "glaze",
    "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",
        "muted",
        "on_accent",
        "paper_fiber",
        "pigment_blue",
        "pigment_blue_deep",
        "pigment_ochre",
        "pigment_rose",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "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"
      ]
    }
  }
}
```