Theme

Themes and token foundations: colour, typography, spacing, radii, shadows, semantic planes, component recipes, and documented texture behavior.

themes

primitive and semantic colour

Primitive scales stay available for inspection. Components use semantic tokens so light and dark themes are a token flip.

vellum

--vellum-50

--vellum-100

--vellum-200

--vellum-300

--vellum-400

--vellum-500

--vellum-600

--vellum-700

--vellum-800

--vellum-900

ocean

--ocean-50

--ocean-100

--ocean-200

--ocean-300

--ocean-400

--ocean-500

--ocean-600

--ocean-700

--ocean-800

--ocean-900

accent

--beacon-300

--beacon-400

--beacon-500

--beacon-600

--ember-300

--ember-400

--ember-500

--ember-600

--rust-500

--moss-500

--gold-500

--bgpage plane

--bg-elevatedraised plane

--bg-sunkeninset plane

--fg

--fg-muted

--fg-subtle

--border

--border-strong

--primary

--primary-fg

--accenteditorial emphasis

--accent-fg

--beaconinteraction

--ring

--success

--warning

--destructive

relationships

primitive token to semantic alias

Primitive tokens name raw scales. Semantic aliases and references carry product meaning, then components consume those semantic relationships.

primitive token--vellum-* / --ocean-*

semantic alias--background / --foreground

reference--bg / --fg

base semantic referencepage canvas, prose, controls

primitive token--vellum-100 / --ocean-600

semantic alias--card / --card-foreground

reference--bg-elevated

raised surface pairCard, Surface content, inventory rows

primitive token--vellum-100 / --ocean-600

semantic alias--popover / --popover-foreground

referenceui-overlay-surface

overlay surface pairDropdownMenu, Select, Combobox, Tooltip, AlertDialog

primitive token--ocean-500 / --vellum-50

semantic alias--primary / --primary-fg

reference--primary-foreground

primary control pairButton default, brand emphasis

primitive token--ember-500 / --vellum-50

semantic alias--accent / --accent-fg

reference--accent-foreground

emphasis paireditorial emphasis, focused menu items

primitive token--beacon-500

semantic alias--beacon / --ring

reference--ring

interaction referencelinks, focus, live UI

type

fonts and scale

The default reading face carries prose and headings. The mono face carries identity, dates, code, labels, and numeric texture.

cooper corbett

A drafting-board interface with visible construction.

The sans face carries prose and headings. The mono face is reserved for dates, labels, code, numerals, and the site identity.

10 Jun 2026v0.1.0--font-mono

--text-xs

Aa0.75rem / captions, kbd, footnotes

--text-sm

Aa0.875rem / small UI, table cells

--text-base

Aa1rem / body

--text-md

Aa1.125rem / wordmark, deck

--text-lg

Aa1.375rem / sub-headings

--text-xl

Aa1.75rem / section headings

--text-2xl

Aa2.25rem / page headings

--text-3xl

Aa3rem / post titles

--text-4xl

Aa4.5rem / display only

--leading-tight

1.1display

--leading-snug

1.25headings, compact UI

--leading-normal

1.5body and decks

--tracking-display

-0.03emdisplay

--tracking-tight

-0.01emheadings

--tracking-normal

0body

--tracking-loose

0.04emmono labels, kbd, wordmark

.type-display

Design system

display / sans / tight leading / display tracking

.type-page-title

A drafting-board interface with visible construction.

page-title / sans / responsive title scale

.type-section-title

Primitive token to semantic alias

section-title / sans / snug leading

.type-subheading

Overlay surface pair

subheading / sans / compact panel headings

.type-lead

Themes and token foundations stay inspectable without becoming route-local utility piles.

lead / sans / normal leading

.type-body

Role classes own family, size, line-height, weight, and tracking while tone remains separate.

body / sans / normal leading

.type-body-small

Dense catalogue notes remain readable without local type utility piles.

body-small / sans / dense descriptions

.type-label

Email address

label / sans / form and control labels

.type-caption

caption / source path / package export

caption / mono / loose tracking

.mono-label

Foundations

mono-label / uppercase / catalogue eyebrows

.code

--text-4xl--line-height

code / mono / compact technical identifiers

composite token anatomy

Typography roles are composite tokens: each role binds family, size, line-height, weight, and tracking while tone stays separate.

.type-display

--type-display-font-family--type-display-font-size--type-display-line-height--type-display-font-weight--type-display-letter-spacing

Hero and design-system introduction titles.

.type-page-title

--type-page-title-font-family--type-page-title-font-size--type-page-title-line-height--type-page-title-font-weight--type-page-title-letter-spacing

Route titles, post headers, and long page headings.

.type-body

--type-body-font-family--type-body-font-size--type-body-line-height--type-body-font-weight--type-body-letter-spacing

Default prose, page copy, and route explanations.

.mono-label

--mono-label-font-family--mono-label-font-size--mono-label-line-height--mono-label-font-weight--mono-label-letter-spacing

Eyebrows, source labels, dates, and technical metadata.

responsive specimen

A deliberately long route title that has to wrap without touching the next line of copy.

page-title / narrow frame / balanced wrap

dense example

source pathCompact catalogue text stays legible at control density.

package exportCompact catalogue text stays legible at control density.

statesCompact catalogue text stays legible at control density.

mono-label + body-small + caption

long code stress

--type-page-title-letter-spacing remains readable beside captions, labels, and dense metadata.

captionmonocode

spacing

spacing, radii, and shadows

The system favors a 4px spacing ladder, small architectural radii, and hairlines before elevation.

--space-0

--space-1

0.25rem

--space-2

0.5rem

--space-3

0.75rem

--space-4

1rem

--space-5

1.5rem

--space-6

2rem

--space-7

3rem

--space-8

4rem

--space-9

6rem

--space-10

8rem

--radius-none0

--radius-xs2px / chips, kbd, tags, favicon

--radius-sm4px / buttons, inputs

--radius-md6px / cards

--radius-lg8px / dialogs, popovers

--shadow-hairline

--shadow-hairline-strong

--shadow-inset-line

--shadow-soft

--shadow-pop

surfaces

semantic planes, texture, and route art

Primitive color inputs feed semantic roles. Surface recipes choose those roles; paper texture is restricted to the feature specimen. Route-owned art remains outside the package API and closes the homepage without entering the reading surface.

tone="canvas"

Flat page canvas. This role establishes the quiet background and never receives texture.

tone="base"

Ordinary content plane for unframed route sections. It remains quiet in both themes.

tone="raised"

Standalone panel with a tonal step and hairline boundary, without decorative texture.

tone="inset"

Contained secondary plane for dense metadata, code, and secondary information.

tone="overlay"

Opaque interactive plane for menus, dialogs, and other floating UI. Texture is not allowed.

tone="feature" texture="paper"

Rare editorial plane. Paper is a decorative layer behind content, removed for print and stronger-contrast modes.

--surface-canvasflat page canvas; no texturevar(--surface-canvas)

--surface-baseordinary content plane; no texturevar(--surface-base)

--surface-raisedstandalone panel; no texturevar(--surface-raised)

--surface-insetcontained secondary plane; no texturevar(--surface-inset)

--surface-overlayfloating interactive plane; no texturevar(--surface-overlay)

--surface-featurerare editorial plane; paper texture allowedvar(--surface-feature)

--bg

quiet page canvas

--bg-elevated

raised panels and cards

--bg-sunken

code, loading, inset states

composites

composite token recipes

Composite tokens are repeated token relationships: surface, overlay, control, and feature recipes that combine related decisions.

surface

semantic tone + border + foreground

--surface-raised--border--foreground

Ordinary panels and catalogue specimens; no texture.

overlay

popover pair + border-strong + shadow-pop + z-index layer

--popover--popover-foreground--border-strong--shadow-pop

Popup menus, selects, comboboxes, tooltips, and dialogs.

control

control fill + control foreground + focus ring + compact radius

--primary--primary-fg--ring--radius-sm

Buttons, triggers, and compact command surfaces.

feature

feature tone + paper pseudo-layer + readable content

--surface-feature--surface-texture-paper--surface-texture-opacity-paper

Documented /design specimen only; never ordinary cards or controls.