Foolscap

# Foolscap

## Philosophy

Foolscap is a planning easel, not a feed. Every piece of work is a torn-paper slip held in a colour-spined lane on a dark slate-green board. Each lane wears one marker ink down its spine, so you read status by colour before you read a word; depth comes from paper and shadow, meaning from which lane a slip sits in. It is an independent reimagining of the sticky-note planning idea — lanes and stacks instead of scattered pins on light cork.

### Values

- Work is physical — every container is a torn-paper slip with a soft drop-shadow
- Colour is a lane — three marker inks down the spine carry status before the words do
- Stacked, not scattered — slips press edge to edge in disciplined lanes, no tilt chaos
- Movement is the record — slide a slip between lanes and it keeps its history
- Bright paper on a dark easel — the slate carries depth, the paper carries reading

### Anti-Values

- Scattered tilted notes on a light cork ground (that is the refinement's lane, not this one)
- A single coloured accent edge on a card, or any grey SaaS border
- An accent ink flooding a whole surface instead of marking a spine
- Pure white or pure black surfaces, glassmorphism, gradients, or browser-default controls

### Visual Character

- A deep charcoal slate-green easel ground with faint vertical paper-grain and a soft raking-light vignette, so the board reads like a lit studio chalkboard at night.
- Warm foolscap-paper slips with torn deckled top and bottom edges (one shared CSS mask) and a soft paper drop-shadow, stacked edge to edge inside recessed dark lanes.
- A coloured torn-paper spine down the left edge of each slip and lane in one of three marker inks — marigold, teal, coral — used as a lane system, never a single-edge accent border.
- Hierarchy from stationery artifacts that mean something: a thumbtack only where pinned, a strip of cream washi tape only to attach a featured slip, a hand-drawn marker underline under section heads.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#1B2320` |
| bg_2 | `#161D1A` |
| surface | `#F2EBDC` |
| surface_2 | `#E7DDC8` |
| on_dark | `#EDE6D6` |
| text | `#20262A` |
| muted | `#877F6E` |
| muted_dark | `#A9A292` |
| border | `rgba(32,38,42,0.12)` |
| accent | `#F2A114` |
| on_accent | `#20262A` |
| accent_teal | `#16B6C2` |
| accent_coral | `#F2553D` |
| success | `#4F9163` |
| warning | `#E0A21A` |
| error | `#D2492F` |
| info | `#2E91A6` |

### Typography

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

### Radii

- **None**: 0
- **Card**: 16px
- **Full**: 9999px

### Shadows

- **Strip**: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 7px rgba(0,0,0,.34)
- **Strip Hi**: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 22px rgba(0,0,0,.42)
- **Pin**: 1px 2px 4px rgba(0,0,0,.5)

### Spacing

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

### Surfaces

- **Treatment**: Dark slate-green easel ground with vertical paper-grain and a raking-light vignette; warm foolscap-paper slips stacked in recessed dark lanes.
- **Card Style**: Torn-paper slip: foolscap/kraft paper, deckled top+bottom mask, soft paper drop-shadow, a coloured spine down the left edge. Never bordered, never nested.
- **Bg Pattern**: Faint 5px vertical paper-grain plus a soft corner vignette behind the lanes.

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px; use a coloured torn-paper spine as its own system, never a single-edge accent border
- **Style**: none
- **Character**: No card borders; depth comes from paper drop-shadow. Hairline ink rules (1px) only inside the ledger table.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.7,.3,1.1)
- **Philosophy**: Slips lift off their stack on hover and settle on drop; sections rise into place on scroll. The settled state is the default and renders with no JavaScript; prefers-reduced-motion disables it.

## Rules

### Composition

Build screens as a planning easel: recessed dark lanes holding stacks of torn-paper slips pressed edge to edge, not independent cards on a page. Anchor a scene with one oversized slip or a four-lane wall; cluster slips tightly inside lanes and let broad slate show between lanes.

### Hierarchy

Each lane wears one marker-ink spine and you read status by colour first; an oversized slip carries the open decision; the single primary action is a marigold pill on the slip; pinned slips carry both a pin and a label; Space Mono metadata (slip number, lane count, timestamp) sits small but never below 12px.

### Density

High density inside lanes (8-16px gaps between stacked slips) released by broad exposed slate between lanes; a full wall signals a productive week. Slips stack straight — no tilt — so long titles stay readable.

### Signature

- Colour-spined lane: a recessed dark column of torn-paper slips stacked edge to edge, each slip and the lane head carrying one marker-ink spine down the left edge.
- Torn-paper slip: warm foolscap/kraft paper with a deckled top and bottom edge (one shared CSS mask) and a soft paper drop-shadow, so the stack reads as physical paper.
- Three marker inks (marigold #F2A114, teal #16B6C2, coral #F2553D) used as the lane/spine system and as pins, chips, marker underlines, and meter fills — highlighters, never floods, and they recolour on palette swap.
- Stationery artifacts that mean something: a thumbtack pin only where pinned, a cream washi-tape strip only to attach a featured slip, a hand-drawn marker underline (inline SVG) under section heads.
- Bright paper on a dark slate easel: the slate ground carries depth and the warm paper carries the reading, the inverse of a light-cork board.

## Layout

### Grid

Desktop contains to ~1180-1240px; the board is a 4-lane grid (minmax(0,1fr)), the dashboard a 236px lane-index sidebar plus a fluid overview, the landing a 100vw hero over a contained body.

### Whitespace

24px page padding, 12-16px gaps between stacked slips inside a lane, 24-48px pauses between lanes and sections; broad slate fields separate major groups.

### Density

High inside lanes, generous between them — a busy wall that still scans.

### Responsive

Renders from ~390px mobile to 2560px+; tablet drops to two lanes, mobile stacks to a single lane, hides non-essential nav and table columns, and removes any tilt; only the landing hero spans 100vw.

### Breakpoints

- **Mobile**: <= 560px
- **Tablet**: 561px - 900px
- **Desktop**: >= 901px

## Guidance

### Do

- Read status by lane and spine colour; keep warm paper for reading and the slate ground for depth.
- Stack slips straight in lanes; use a pin only where pinned and tape only to attach a featured slip.
- Keep the three marker inks as highlighters — a spine, a pin, an underline, a chip, a meter fill — never a full-bleed flood.
- Style every control as a paper object: foolscap inputs, teal focus inset, custom check/toggle/select, no native chrome.

### Don't

- Do not scatter tilted notes on a light cork ground — that is the refinement's idea, not this one.
- Do not give a slip a single coloured accent edge instead of the spine system, and never a grey border.
- Do not flood a surface with an ink, use gradients or glass, or drop below 12px metadata / 17px body.
- Do not present the embodiment as a generic component catalogue — it is a working planning board.

### Accessibility

Dark ink on foolscap paper and warm paper on the slate ground both clear 4.5:1. Colour is always paired with a lane, a label, or a pin — never the sole signal. Focus is a 2px teal inset ring. Motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

pasteup

### Summary

Pasteup handmade torn-and-cut paper collage: many overlapping layers of solid matte construction and kraft paper, each shape casting a soft paper drop-shadow, deckled torn edges with visible fiber, confident felt-marker outlines, a few cream washi-tape seams and pressed thumbtack dimples. Apply to planning and material subjects, never to the apparatus itself.

### Subjects

- a studio planning easel of stacked torn-paper strip-lanes
- a wall of overlapping paper slips with colour index tabs
- a desk of cut-paper shapes pinned in columns
- a torn-paper still life of stationery

### Usage

The landing hero is a wide paper-collage of the colour-spined lanes on a dark ground, with the dark left side carrying a legible overlay; the studio swaps the hero via --hero-image.

---
version: "alpha"
name: "Foolscap"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#1B2320"
  bg_2: "#161D1A"
  surface: "#F2EBDC"
  surface_2: "#E7DDC8"
  on_dark: "#EDE6D6"
  text: "#20262A"
  muted: "#877F6E"
  muted_dark: "#A9A292"
  accent: "#F2A114"
  on_accent: "#20262A"
  accent_teal: "#16B6C2"
  accent_coral: "#F2553D"
  success: "#4F9163"
  warning: "#E0A21A"
  error: "#D2492F"
  info: "#2E91A6"
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: "Archivo"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  card: "16px"
  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-bg_2:
    backgroundColor: "{colors.bg_2}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-on_dark:
    backgroundColor: "{colors.on_dark}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-muted_dark:
    backgroundColor: "{colors.muted_dark}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_teal:
    backgroundColor: "{colors.accent_teal}"
  color-reference-accent_coral:
    backgroundColor: "{colors.accent_coral}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Foolscap

## Overview

Foolscap is a planning easel, not a feed. Every piece of work is a torn-paper slip held in a colour-spined lane on a dark slate-green board. Each lane wears one marker ink down its spine, so you read status by colour before you read a word; depth comes from paper and shadow, meaning from which lane a slip sits in. It is an independent reimagining of the sticky-note planning idea — lanes and stacks instead of scattered pins on light cork.

### Values

- Work is physical — every container is a torn-paper slip with a soft drop-shadow
- Colour is a lane — three marker inks down the spine carry status before the words do
- Stacked, not scattered — slips press edge to edge in disciplined lanes, no tilt chaos
- Movement is the record — slide a slip between lanes and it keeps its history
- Bright paper on a dark easel — the slate carries depth, the paper carries reading

### Anti-Values

- Scattered tilted notes on a light cork ground (that is the refinement's lane, not this one)
- A single coloured accent edge on a card, or any grey SaaS border
- An accent ink flooding a whole surface instead of marking a spine
- Pure white or pure black surfaces, glassmorphism, gradients, or browser-default controls

### Visual Character

- A deep charcoal slate-green easel ground with faint vertical paper-grain and a soft raking-light vignette, so the board reads like a lit studio chalkboard at night.
- Warm foolscap-paper slips with torn deckled top and bottom edges (one shared CSS mask) and a soft paper drop-shadow, stacked edge to edge inside recessed dark lanes.
- A coloured torn-paper spine down the left edge of each slip and lane in one of three marker inks — marigold, teal, coral — used as a lane system, never a single-edge accent border.
- Hierarchy from stationery artifacts that mean something: a thumbtack only where pinned, a strip of cream washi tape only to attach a featured slip, a hand-drawn marker underline under section heads.

## 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 | `#1B2320` |
| bg_2 | `#161D1A` |
| surface | `#F2EBDC` |
| surface_2 | `#E7DDC8` |
| on_dark | `#EDE6D6` |
| text | `#20262A` |
| muted | `#877F6E` |
| muted_dark | `#A9A292` |
| accent | `#F2A114` |
| on_accent | `#20262A` |
| accent_teal | `#16B6C2` |
| accent_coral | `#F2553D` |
| success | `#4F9163` |
| warning | `#E0A21A` |
| error | `#D2492F` |
| info | `#2E91A6` |

## 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**: Archivo, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space Mono, 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

Desktop contains to ~1180-1240px; the board is a 4-lane grid (minmax(0,1fr)), the dashboard a 236px lane-index sidebar plus a fluid overview, the landing a 100vw hero over a contained body.

### Whitespace

24px page padding, 12-16px gaps between stacked slips inside a lane, 24-48px pauses between lanes and sections; broad slate fields separate major groups.

### Density

High inside lanes, generous between them — a busy wall that still scans.

### Responsive

Renders from ~390px mobile to 2560px+; tablet drops to two lanes, mobile stacks to a single lane, hides non-essential nav and table columns, and removes any tilt; only the landing hero spans 100vw.

### Breakpoints

- **Mobile**: <= 560px
- **Tablet**: 561px - 900px
- **Desktop**: >= 901px

## Elevation & Depth

### Shadows

- **Strip**: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 7px rgba(0,0,0,.34)
- **Strip Hi**: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 22px rgba(0,0,0,.42)
- **Pin**: 1px 2px 4px rgba(0,0,0,.5)

## Shapes

### Rounded

- **None**: `0px`
- **Card**: `16px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Dark slate-green easel ground with vertical paper-grain and a raking-light vignette; warm foolscap-paper slips stacked in recessed dark lanes.
- **Card Style**: Torn-paper slip: foolscap/kraft paper, deckled top+bottom mask, soft paper drop-shadow, a coloured spine down the left edge. Never bordered, never nested.
- **Bg Pattern**: Faint 5px vertical paper-grain plus a soft corner vignette behind the lanes.

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px; use a coloured torn-paper spine as its own system, never a single-edge accent border
- **Style**: none
- **Character**: No card borders; depth comes from paper drop-shadow. Hairline ink rules (1px) only inside the ledger table.

## Components

### Composition

Build screens as a planning easel: recessed dark lanes holding stacks of torn-paper slips pressed edge to edge, not independent cards on a page. Anchor a scene with one oversized slip or a four-lane wall; cluster slips tightly inside lanes and let broad slate show between lanes.

### Hierarchy

Each lane wears one marker-ink spine and you read status by colour first; an oversized slip carries the open decision; the single primary action is a marigold pill on the slip; pinned slips carry both a pin and a label; Space Mono metadata (slip number, lane count, timestamp) sits small but never below 12px.

### Density

High density inside lanes (8-16px gaps between stacked slips) released by broad exposed slate between lanes; a full wall signals a productive week. Slips stack straight — no tilt — so long titles stay readable.

### Signature

- Colour-spined lane: a recessed dark column of torn-paper slips stacked edge to edge, each slip and the lane head carrying one marker-ink spine down the left edge.
- Torn-paper slip: warm foolscap/kraft paper with a deckled top and bottom edge (one shared CSS mask) and a soft paper drop-shadow, so the stack reads as physical paper.
- Three marker inks (marigold #F2A114, teal #16B6C2, coral #F2553D) used as the lane/spine system and as pins, chips, marker underlines, and meter fills — highlighters, never floods, and they recolour on palette swap.
- Stationery artifacts that mean something: a thumbtack pin only where pinned, a cream washi-tape strip only to attach a featured slip, a hand-drawn marker underline (inline SVG) under section heads.
- Bright paper on a dark slate easel: the slate ground carries depth and the warm paper carries the reading, the inverse of a light-cork board.

## 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-019efb6b-0028-7243-b185-caec664fef8e/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 Read status by lane and spine colour; keep warm paper for reading and the slate ground for depth.
- Do Stack slips straight in lanes; use a pin only where pinned and tape only to attach a featured slip.
- Do Keep the three marker inks as highlighters — a spine, a pin, an underline, a chip, a meter fill — never a full-bleed flood.
- Do Style every control as a paper object: foolscap inputs, teal focus inset, custom check/toggle/select, no native chrome.
- Don't Do not scatter tilted notes on a light cork ground — that is the refinement's idea, not this one.
- Don't Do not give a slip a single coloured accent edge instead of the spine system, and never a grey border.
- Don't Do not flood a surface with an ink, use gradients or glass, or drop below 12px metadata / 17px body.
- Don't Do not present the embodiment as a generic component catalogue — it is a working planning board.

### Accessibility

Dark ink on foolscap paper and warm paper on the slate ground both clear 4.5:1. Colour is always paired with a lane, a label, or a pin — never the sole signal. Focus is a 2px teal inset ring. Motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

pasteup

### Summary

Pasteup handmade torn-and-cut paper collage: many overlapping layers of solid matte construction and kraft paper, each shape casting a soft paper drop-shadow, deckled torn edges with visible fiber, confident felt-marker outlines, a few cream washi-tape seams and pressed thumbtack dimples. Apply to planning and material subjects, never to the apparatus itself.

### Subjects

- a studio planning easel of stacked torn-paper strip-lanes
- a wall of overlapping paper slips with colour index tabs
- a desk of cut-paper shapes pinned in columns
- a torn-paper still life of stationery

### Usage

The landing hero is a wide paper-collage of the colour-spined lanes on a dark ground, with the dark left side carrying a legible overlay; the studio swaps the hero via --hero-image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "foolscap",
  "type": "registry:theme",
  "title": "Foolscap shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#1B2320",
      "foreground": "#20262A",
      "card": "#F2EBDC",
      "card-foreground": "#20262A",
      "popover": "#F2EBDC",
      "popover-foreground": "#20262A",
      "primary": "#20262A",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#877F6E",
      "muted-foreground": "#20262A",
      "accent": "#F2A114",
      "accent-foreground": "#ffffff",
      "destructive": "#D2492F",
      "border": "rgba(32,38,42,0.12)",
      "input": "rgba(32,38,42,0.12)",
      "ring": "#F2A114",
      "chart-1": "#20262A",
      "chart-2": "#f4f4f5",
      "chart-3": "#F2A114",
      "chart-4": "#4F9163",
      "chart-5": "#E0A21A",
      "sidebar": "#F2EBDC",
      "sidebar-foreground": "#20262A",
      "sidebar-primary": "#20262A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E91A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(32,38,42,0.12)",
      "sidebar-ring": "#F2A114",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#20262A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F2A114",
      "accent-foreground": "#ffffff",
      "destructive": "#D2492F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F2A114",
      "chart-1": "#20262A",
      "chart-2": "#f4f4f5",
      "chart-3": "#F2A114",
      "chart-4": "#4F9163",
      "chart-5": "#E0A21A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#20262A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F2A114",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F2A114",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb6b-0028-7243-b185-caec664fef8e",
    "slug": "foolscap",
    "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_coral",
        "accent_teal",
        "bg",
        "bg_2",
        "border",
        "error",
        "info",
        "muted",
        "muted_dark",
        "on_accent",
        "on_dark",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "card",
        "full",
        "none"
      ],
      "shadows": [
        "pin",
        "strip",
        "strip_hi"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```