Design tokens

Every visual decision in the system lives in one file: theme.css. Swap that file and the entire UI reskins — buttons, cards, shadows, type, spacing — without touching a line of component CSS.

How tokens work

Tokens are plain CSS custom properties declared on :root. Components read them with var(--token), so a single stylesheet swap cascades everywhere. No build step is required to consume them — drop the file in, and the browser does the rest.

Each shipped theme emits :root, :root[data-theme="name"], so a single file dropped in as your theme.css applies with no markup change. The library's own defaults are emitted under :where(:root) at zero specificity, so any theme — or any token you set from your own :root — outranks them regardless of load order.

/* theme.css — the one file you swap */
:root {
  --paper:         #F7F3EA;
  --ink:           #2A241E;
  --ai:            #1F3A5F;
  --radius-md:     3px;
  --shadow-md:     0 4px 18px rgba(42,36,30,.08);
}

/* any consumer — base, component, or your own CSS */
.button {
  background: var(--paper-raised);
  color:      var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

Palette

Color tokens split into three intents: neutrals (paper & ink), brand (indigo, vermilion, ochre), and status (success / warning / error / info). Every swatch below reads live from the active theme — pick a new theme and the whole grid reskins.

Each swatch shows the token name plus the resolved CSS value. Open the ThemePicker (the floating disc, lower-right) and pick a different theme — the chips and values rewrite live, no reload required.

Neutrals

--paper

--paper-raised

--paper-sunk

--paper-glass

--ink

--ink-soft

--ink-faint

--graphite

--muted

--hair

--hair-soft

--guide

--guide-soft

Brand

--brand-primary

--brand-primary-hover

--ai

--ai-ink

--ai-wash

--shu

--shu-wash

--ochre

--ochre-wash

Action (semantic primary)

--action-primary-default

--action-primary-hover

--action-primary-active

--action-primary-wash

Status

--success-default

--success-subtle

--success-text

--warning-default

--warning-subtle

--warning-text

--error-default

--error-subtle

--error-text

--info-default

--info-subtle

--info-text

Surfaces

--surface-default

--surface-raised

--surface-sunk

--surface-subtle

--surface-muted

--surface-emphasis

--surface-glass

/* Consume any color token the same way */
.card {
  background: var(--surface-raised);
  color:      var(--text-primary);
  border:     1px solid var(--border-default);
}

Typography

Four font stacks cover the whole system: a chunky display serif, a reading serif, a handwritten script for accents, and a mono for code. A sans stack anchors the body. Size, weight, and line-height live in their own slots so themes can retune the whole rhythm.

--font-displayDraft & revise.

--font-serifReading text sits in a warm serif, patient and honest.

--font-sans / --font-primaryThe default body font — crisp, quiet, does its job.

--font-scripthandwritten marginalia

--font-monoconst paper = '#F7F3EA';

body {
  font-family: var(--font-primary);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-normal);
}

h1 { font-family: var(--font-display); }
code { font-family: var(--font-mono); }

Type scale

Themes declare --font-size-base, --line-height-normal, and --font-weight-medium as the canonical hooks. Scale steps are computed from the base so the whole system stays proportional. Each line below renders at the size resolved from the active theme.

--font-size-base (body)