Glossa

# Glossa

## Philosophy

A reading-record language. Knowledge accrues down a single ruled column kept by lamplight; the outer margin holds the dates, the glosses, and the ink-blots you leave behind. A commonplace book on a warm-dark ground, where emphasis is something you can feel.

### Values

- A page is a surface you return to, not a database you fill
- Emphasis you can feel — markers overshoot like real ones, never floods
- The rail keeps time; the column keeps the work
- Warm-dark walnut ground, ink-light text; one violet ink for every action
- The settled, hand-kept page is the default; motion is brief and meaningful

### Anti-Values

- Flooding a region with a marker ink instead of a translucent local pass
- A bright daytime cream planner spread or dot-grid two-page surface (that is a sibling language)
- Heavy drop shadows or floating chrome — a book lies open under a lamp, it does not float
- Boxed pill navigation or nested cards
- The oversized italic-serif or upright/italic-serif headline swap

### Visual Character

- Lamplit ink-stained walnut ground (#16120E) with parchment ink-light text and hairline rules; a margin rail down every surface.
- Hand-kept artifacts: dated gloss-ticks colored by the day's temperature, an opening violet ink-blot, rotated monospace folio stamps, gutter glosses on a gilt guide line.
- Translucent violet/gilt highlighter passes that overshoot the word and wavy pen-stroke underlines; a single oxblood blot for the line argued with.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#16120E` |
| surface | `#1F1A14` |
| surface_2 | `#262019` |
| leaf_edge | `#0F0C09` |
| text | `#F3EAD9` |
| muted | `#A9997F` |
| faint | `#6E614C` |
| border | `rgba(243,234,217,0.13)` |
| rule | `rgba(243,234,217,0.20)` |
| grid | `rgba(243,234,217,0.045)` |
| accent | `#B79CE8` |
| accent_deep | `#9B7AD4` |
| gilt | `#E0B250` |
| oxblood | `#C25B4E` |
| on_accent | `#16120E` |
| success | `#8FB07A` |
| warning | `#E0B250` |
| error | `#C25B4E` |
| info | `#B79CE8` |

### Typography

- **Base Size**: 17px
- **Body Font**: Spectral, Georgia, serif
- **Heading Font**: Fraunces, Georgia, serif
- **Mono Font**: Spline Sans Mono, ui-monospace, monospace
- **Heading Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.018em
- **Scale Ratio**: 1.25
- **Line Height Base**: 1.65
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Spline+Sans+Mono:wght@400;500&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 2px rgba(0,0,0,0.5)
- **Md**: 0 10px 34px rgba(0,0,0,0.55)
- **Stamp**: 1px 1px 0 rgba(0,0,0,0.45)

### Spacing

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

### Surfaces

- **Leaf**: #1F1A14 walnut leaf over #16120E lamplit desk, with a faint radial-gradient dot grid
- **Rail**: a hairline vertical rule on the outer edge carrying dated gloss-ticks and an opening violet ink-blot
- **Note**: #262019 inset gloss panel on a thin gilt guide line, near-flat shadow, no gradient
- **Highlight**: translucent violet (rgba(183,156,232,.26)) / gilt (rgba(224,178,80,.24)) marker passes that overshoot the word
- **Stamp**: monospace folio in a hairline rect, rotated 1-2 degrees, with a near-flat stamp shadow

### Borders

- **Color**: rgba(243,234,217,0.13)
- **Rule**: rgba(243,234,217,0.20)
- **Width**: 1px
- **Style**: solid; hairline rules define sections, never heavy boxes

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: brief and meaningful; the settled hand-kept page is the default, reveals layered behind a .pe class, respects prefers-reduced-motion

## Rules

### Composition

Content sits in a single justified reading column with a fixed margin rail on the outer edge (the rail becomes a horizontal date strip on mobile). Entries are append-only and dated, newest at the foot. Generous margins; sections are defined by whitespace and hairline rules, never heavy boxes. Stacking order: leaf surface, column content, gutter glosses, then ink-blots and folio stamps.

### Hierarchy

Fraunces display headings and folio stamps establish primary hierarchy through size and weight. Highlighter marks create secondary emphasis without changing font properties. Italic gutter glosses on a gilt guide are tertiary. Violet marks every actionable element; muted graphite carries secondary content; gilt and oxblood are emphasis markers only.

### Density

Medium-to-rich — a working commonplace book, structured but readable (line-height 1.65). The reading column and ledger tables are the densest; gloss margins breathe more. Never crowd past comfortable reading measure.

### Signature

The margin rail: a hairline vertical rule with dated, temperature-colored gloss-ticks and an opening violet ink-blot, beside a single justified column; translucent overshooting violet/gilt highlighter passes; gutter glosses on a thin gilt guide; rotated monospace folio stamps; a reading-year field of week-marks.

## Layout

### Grid

A fixed margin rail (~64px) plus a single justified reading column; the rail carries the dates and blots, the column carries the work

### Whitespace

Generous outer and column margins; a kept page breathes — sections separated by whitespace and hairline rules, not boxes

### Density

medium

### Responsive

On mobile the rail collapses to a horizontal date strip above the column and everything stacks to one column; tables drop non-essential columns; contained content caps and centres on ultra-wide while only the hero spans 100vw; no horizontal overflow

### Breakpoints

- **Mobile**: 0-639px single column, rail as a top date strip
- **Tablet**: 640-979px column with a slim rail
- **Desktop**: 980px+ full margin rail and justified column, max content ~1180-1320px centered

## Guidance

### Do

- Run the margin rail down every surface; hang dated gloss-ticks and an opening ink-blot on it
- Keep the reading column single, justified, append-only, newest at the foot
- Use violet for every action: buttons, focus, links, primary data
- Treat gilt and oxblood as emphasis markers only — citation and the one argued line
- Overshoot highlighter passes and pair them with weight or a wavy pen-stroke underline
- Stamp temporal markers as rotated monospace folio numbers in hairline rectangles
- Keep the warm-dark walnut ground and the printed-book type pairing (Fraunces / Spectral / Spline Sans Mono)
- Define sections with whitespace and hairline rules, not heavy boxes
- Make one button clearly primary in violet; keep the rest quieter

### Don't

- Never flood a region with a marker ink — emphasis is translucent and local
- Do not build a daytime cream planner spread or a dot-grid two-page surface (that is a sibling language)
- Never use heavy drop shadows — a book lies open under a lamp, it does not float
- Avoid in-between border-radii — corners are 0, 16, 24, or full
- Do not box navigation into a floating pill bar or nest cards
- Do not use the oversized italic-serif or upright/italic-serif headline swap

### Accessibility

Parchment #F3EAD9 on walnut #16120E clears WCAG AA comfortably (>11:1). Marker emphasis is always paired with font weight or a pen-stroke underline, never colour alone. Every control has an explicit violet focus ring; faults use oxblood plus a message. Touch targets >= 44px. Motion reduces to none under prefers-reduced-motion.

## Imagery Direction

### Pairs With

wisteria

### Summary

Layered fountain-pen ink linework over diluted watercolor washes blooming into absorbent paper, here on a warm DARK walnut ground — luminous violet-and-gilt pigment feathering across a lamplit leaf, with translucent highlighter passes and faint graphite under-sketch. Subjects are kept-by-hand reading objects.

### Subjects

- an open commonplace book under a reading lamp
- an ink bottle and a fountain pen
- a margin rail of dated notes
- a single watercolor bloom on a dark leaf
- pressed wisteria on an annotated page

### Usage

Full-viewport hero of a lamplit commonplace book with calm dark negative space for the overlay; feature slots use single kept-by-hand objects in the wisteria technique on a warm dark ground. No text or logos in the imagery.

---
version: "alpha"
name: "Glossa"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#16120E"
  surface: "#1F1A14"
  surface_2: "#262019"
  leaf_edge: "#0F0C09"
  text: "#F3EAD9"
  muted: "#A9997F"
  faint: "#6E614C"
  accent: "#B79CE8"
  accent_deep: "#9B7AD4"
  gilt: "#E0B250"
  oxblood: "#C25B4E"
  on_accent: "#16120E"
  success: "#8FB07A"
  warning: "#E0B250"
  error: "#C25B4E"
  info: "#B79CE8"
typography:
  headline-lg:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.018em"
  headline-md:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.018em"
  body-md:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.018em"
  label-md:
    fontFamily: "Spline Sans Mono, ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  sm: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "4px"
  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-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-leaf_edge:
    backgroundColor: "{colors.leaf_edge}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_deep:
    backgroundColor: "{colors.accent_deep}"
  color-reference-gilt:
    backgroundColor: "{colors.gilt}"
  color-reference-oxblood:
    backgroundColor: "{colors.oxblood}"
  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"
---

# Glossa

## Overview

A reading-record language. Knowledge accrues down a single ruled column kept by lamplight; the outer margin holds the dates, the glosses, and the ink-blots you leave behind. A commonplace book on a warm-dark ground, where emphasis is something you can feel.

### Values

- A page is a surface you return to, not a database you fill
- Emphasis you can feel — markers overshoot like real ones, never floods
- The rail keeps time; the column keeps the work
- Warm-dark walnut ground, ink-light text; one violet ink for every action
- The settled, hand-kept page is the default; motion is brief and meaningful

### Anti-Values

- Flooding a region with a marker ink instead of a translucent local pass
- A bright daytime cream planner spread or dot-grid two-page surface (that is a sibling language)
- Heavy drop shadows or floating chrome — a book lies open under a lamp, it does not float
- Boxed pill navigation or nested cards
- The oversized italic-serif or upright/italic-serif headline swap

### Visual Character

- Lamplit ink-stained walnut ground (#16120E) with parchment ink-light text and hairline rules; a margin rail down every surface.
- Hand-kept artifacts: dated gloss-ticks colored by the day's temperature, an opening violet ink-blot, rotated monospace folio stamps, gutter glosses on a gilt guide line.
- Translucent violet/gilt highlighter passes that overshoot the word and wavy pen-stroke underlines; a single oxblood blot for the line argued with.

## 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 | `#16120E` |
| surface | `#1F1A14` |
| surface_2 | `#262019` |
| leaf_edge | `#0F0C09` |
| text | `#F3EAD9` |
| muted | `#A9997F` |
| faint | `#6E614C` |
| accent | `#B79CE8` |
| accent_deep | `#9B7AD4` |
| gilt | `#E0B250` |
| oxblood | `#C25B4E` |
| on_accent | `#16120E` |
| success | `#8FB07A` |
| warning | `#E0B250` |
| error | `#C25B4E` |
| info | `#B79CE8` |

## Typography

- **Headline-Lg**: Fraunces, Georgia, serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, Georgia, serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Spectral, Georgia, serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, ui-monospace, monospace, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Grid

A fixed margin rail (~64px) plus a single justified reading column; the rail carries the dates and blots, the column carries the work

### Whitespace

Generous outer and column margins; a kept page breathes — sections separated by whitespace and hairline rules, not boxes

### Density

medium

### Responsive

On mobile the rail collapses to a horizontal date strip above the column and everything stacks to one column; tables drop non-essential columns; contained content caps and centres on ultra-wide while only the hero spans 100vw; no horizontal overflow

### Breakpoints

- **Mobile**: 0-639px single column, rail as a top date strip
- **Tablet**: 640-979px column with a slim rail
- **Desktop**: 980px+ full margin rail and justified column, max content ~1180-1320px centered

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(0,0,0,0.5)
- **Md**: 0 10px 34px rgba(0,0,0,0.55)
- **Stamp**: 1px 1px 0 rgba(0,0,0,0.45)

## Shapes

### Rounded

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

### Surfaces

- **Leaf**: #1F1A14 walnut leaf over #16120E lamplit desk, with a faint radial-gradient dot grid
- **Rail**: a hairline vertical rule on the outer edge carrying dated gloss-ticks and an opening violet ink-blot
- **Note**: #262019 inset gloss panel on a thin gilt guide line, near-flat shadow, no gradient
- **Highlight**: translucent violet (rgba(183,156,232,.26)) / gilt (rgba(224,178,80,.24)) marker passes that overshoot the word
- **Stamp**: monospace folio in a hairline rect, rotated 1-2 degrees, with a near-flat stamp shadow

### Borders

- **Color**: rgba(243,234,217,0.13)
- **Rule**: rgba(243,234,217,0.20)
- **Width**: 1px
- **Style**: solid; hairline rules define sections, never heavy boxes

## Components

### Composition

Content sits in a single justified reading column with a fixed margin rail on the outer edge (the rail becomes a horizontal date strip on mobile). Entries are append-only and dated, newest at the foot. Generous margins; sections are defined by whitespace and hairline rules, never heavy boxes. Stacking order: leaf surface, column content, gutter glosses, then ink-blots and folio stamps.

### Hierarchy

Fraunces display headings and folio stamps establish primary hierarchy through size and weight. Highlighter marks create secondary emphasis without changing font properties. Italic gutter glosses on a gilt guide are tertiary. Violet marks every actionable element; muted graphite carries secondary content; gilt and oxblood are emphasis markers only.

### Density

Medium-to-rich — a working commonplace book, structured but readable (line-height 1.65). The reading column and ledger tables are the densest; gloss margins breathe more. Never crowd past comfortable reading measure.

### Signature

The margin rail: a hairline vertical rule with dated, temperature-colored gloss-ticks and an opening violet ink-blot, beside a single justified column; translucent overshooting violet/gilt highlighter passes; gutter glosses on a thin gilt guide; rotated monospace folio stamps; a reading-year field of week-marks.

## 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-019efb6e-a1f3-7703-b2cf-2f5557c25ac6/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 Run the margin rail down every surface; hang dated gloss-ticks and an opening ink-blot on it
- Do Keep the reading column single, justified, append-only, newest at the foot
- Do Use violet for every action: buttons, focus, links, primary data
- Do Treat gilt and oxblood as emphasis markers only — citation and the one argued line
- Do Overshoot highlighter passes and pair them with weight or a wavy pen-stroke underline
- Do Stamp temporal markers as rotated monospace folio numbers in hairline rectangles
- Do Keep the warm-dark walnut ground and the printed-book type pairing (Fraunces / Spectral / Spline Sans Mono)
- Do Define sections with whitespace and hairline rules, not heavy boxes
- Do Make one button clearly primary in violet; keep the rest quieter
- Don't Never flood a region with a marker ink — emphasis is translucent and local
- Don't Do not build a daytime cream planner spread or a dot-grid two-page surface (that is a sibling language)
- Don't Never use heavy drop shadows — a book lies open under a lamp, it does not float
- Don't Avoid in-between border-radii — corners are 0, 16, 24, or full
- Don't Do not box navigation into a floating pill bar or nest cards
- Don't Do not use the oversized italic-serif or upright/italic-serif headline swap

### Accessibility

Parchment #F3EAD9 on walnut #16120E clears WCAG AA comfortably (>11:1). Marker emphasis is always paired with font weight or a pen-stroke underline, never colour alone. Every control has an explicit violet focus ring; faults use oxblood plus a message. Touch targets >= 44px. Motion reduces to none under prefers-reduced-motion.

## Imagery Direction

### Pairs With

wisteria

### Summary

Layered fountain-pen ink linework over diluted watercolor washes blooming into absorbent paper, here on a warm DARK walnut ground — luminous violet-and-gilt pigment feathering across a lamplit leaf, with translucent highlighter passes and faint graphite under-sketch. Subjects are kept-by-hand reading objects.

### Subjects

- an open commonplace book under a reading lamp
- an ink bottle and a fountain pen
- a margin rail of dated notes
- a single watercolor bloom on a dark leaf
- pressed wisteria on an annotated page

### Usage

Full-viewport hero of a lamplit commonplace book with calm dark negative space for the overlay; feature slots use single kept-by-hand objects in the wisteria technique on a warm dark ground. No text or logos in the imagery.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glossa",
  "type": "registry:theme",
  "title": "Glossa shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#16120E",
      "foreground": "#F3EAD9",
      "card": "#1F1A14",
      "card-foreground": "#F3EAD9",
      "popover": "#1F1A14",
      "popover-foreground": "#F3EAD9",
      "primary": "#F3EAD9",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#A9997F",
      "muted-foreground": "#F3EAD9",
      "accent": "#B79CE8",
      "accent-foreground": "#ffffff",
      "destructive": "#C25B4E",
      "border": "rgba(243,234,217,0.13)",
      "input": "rgba(243,234,217,0.13)",
      "ring": "#B79CE8",
      "chart-1": "#F3EAD9",
      "chart-2": "#f4f4f5",
      "chart-3": "#B79CE8",
      "chart-4": "#8FB07A",
      "chart-5": "#E0B250",
      "sidebar": "#1F1A14",
      "sidebar-foreground": "#F3EAD9",
      "sidebar-primary": "#F3EAD9",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#B79CE8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(243,234,217,0.13)",
      "sidebar-ring": "#B79CE8",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F3EAD9",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B79CE8",
      "accent-foreground": "#ffffff",
      "destructive": "#C25B4E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B79CE8",
      "chart-1": "#F3EAD9",
      "chart-2": "#f4f4f5",
      "chart-3": "#B79CE8",
      "chart-4": "#8FB07A",
      "chart-5": "#E0B250",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F3EAD9",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#B79CE8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B79CE8",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb6e-a1f3-7703-b2cf-2f5557c25ac6",
    "slug": "glossa",
    "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_deep",
        "bg",
        "border",
        "error",
        "faint",
        "gilt",
        "grid",
        "info",
        "leaf_edge",
        "muted",
        "on_accent",
        "oxblood",
        "rule",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height_base",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "sm"
      ],
      "shadows": [
        "md",
        "sm",
        "stamp"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "highlight",
        "leaf",
        "note",
        "rail",
        "stamp"
      ],
      "borders": [
        "color",
        "rule",
        "style",
        "width"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```