Tokens

Every token in tokens.json. Each is a CSS custom property in tokens.css; components read the semantic tokens, never the palette directly. The transparent state fills and the motion values are in styles.css only.

Palette

The ramps hold one value in both themes.

Token	Value	Usage
`--parchment-50`	`#faf6ee`	Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps. Page, lightest.
`--parchment-100`	`#f4eee0`	Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps.
`--parchment-200`	`#eae1cd`	Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps.
`--parchment-300`	`#dacdb2`	Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps. Hairline on light, disabled.
`--stone-400`	`#938770`	Stone neutral ramp. Components reference the semantic aliases, not the ramps. Darkened from #a99c84 so marks and control edges hold 3:1 on parchment and white.
`--stone-500`	`#766955`	Stone neutral ramp. Components reference the semantic aliases, not the ramps. Darkened from #857863 so it holds 4.5:1 as muted text on every light ground.
`--stone-600`	`#5f5645`	Stone neutral ramp (muted and secondary text). Components reference the semantic aliases, not the ramps.
`--ink-700`	`#3a342a`	Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps.
`--ink-800`	`#262019`	Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps. Raised dark surface.
`--ink-900`	`#17130e`	Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps. Near-black, warm — primary text & dark bg.
`--racing-900`	`#0a2a1f`	British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps.
`--racing-800`	`#0e3a2b`	British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps.
`--racing-700`	`#14503b`	British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps. Primary brand.
`--racing-500`	`#1e6e4f`	British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps.
`--racing-300`	`#6fa98e`	British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps. On-dark tint.
`--oxblood-800`	`#4a141a`	Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps.
`--oxblood-600`	`#6e1f27`	Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. Secondary brand.
`--oxblood-400`	`#9a4048`	Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps.
`--oxblood-300`	`#c4767e`	Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. On-dark oxblood solids — dots, rules, brand-alt.
`--oxblood-200`	`#d79aa1`	Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. On-dark oxblood text — see note in dark theme.
`--cognac-700`	`#8a4a22`	Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps.
`--cognac-500`	`#a95f2e`	Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps.
`--cognac-300`	`#c98a55`	Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps.
`--brass-600`	`#886421`	Brass ramp, the text-weight gilt: labels, link hover, focus ring in light. Components reference the semantic aliases, not the ramps. Darkened from #9a7534 for 4.5:1 on parchment.
`--brass-500`	`#b8894b`	Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps.
`--brass-400`	`#c99e5e`	Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps.
`--brass-300`	`#dec088`	Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps. On-dark gilt.
`--navy-800`	`#16283a`	Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps.
`--navy-600`	`#24425e`	Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps.
`--navy-400`	`#4a6c8c`	Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps.
`--signal-600`	`#a81f26`	Signal red ramp, alarms only. Components reference the semantic aliases, not the ramps.
`--signal-500`	`#c4292f`	Signal red ramp, alarms only. Components reference the semantic aliases, not the ramps.

Semantic colours

Semantic colours change with the theme. Set data-theme="dark" on any element to switch it.

Backgrounds

Token	Light	Dark	Usage
`--bg-page`	`parchment-50` #faf6ee	`#15110b`	Page ground. Text: text-primary, text-secondary.
`--bg-surface`	`#ffffff`	`#1f1810`	Card on parchment.
`--bg-sunken`	`parchment-100` #f4eee0	`#0f0c07`	Sunken wells; hover wash on ghost and quiet elements.
`--bg-inverse`	`ink-900` #17130e	`#0b0906`	Dark sections, code, terminal.
`--bg-inverse-2`	`ink-800` #262019	`#151009`	Raised surface inside inverse sections.

Text

Token	Light	Dark	Usage
`--text-primary`	`ink-900` #17130e	`#f1eadb`	Primary text, on bg-page, bg-surface and bg-sunken.
`--text-secondary`	`stone-600` #5f5645	`#b7ac93`	Secondary text, on bg-page, bg-surface and bg-sunken (6.3:1 or more in light).
`--text-muted`	`stone-500` #766955	`#8e826b`	Muted captions and placeholders, on bg-page, bg-surface and bg-sunken (4.6:1 or more in both themes).
`--text-on-dark`	`parchment-100` #f4eee0	`parchment-100` #f4eee0	Text on bg-inverse.
`--text-on-dark-muted`	`#9e937c`	`#9e937c`	Muted text on bg-inverse.

Brand, accents and chrome

Token	Light	Dark	Usage
`--brand`	`racing-700` #14503b	`racing-300` #6fa98e	Principal brand colour: primary fills, links, checked controls.
`--brand-strong`	`racing-900` #0a2a1f	`#8fc0a6`	Deepened brand for hover and strong fills.
`--brand-alt`	`oxblood-600` #6e1f27	`oxblood-300` #c4767e	Secondary seal: deny actions, destructive dialogs.
`--accent`	`brass-600` #886421	`brass-400` #c99e5e	Brass accent as text: link hover. Bright gilt fills and keylines use brass-500 directly.
`--accent-on-dark`	`brass-300` #dec088	`brass-300` #dec088	Brass accent on dark grounds.
`--leather`	`cognac-500` #a95f2e	`cognac-300` #c98a55	Cognac leather accent.
`--info`	`navy-600` #24425e	`navy-400` #4a6c8c	Informational tone.
`--label-engraved`	`brass-600` #886421	`brass-300` #dec088	Eyebrow/legend label colour.
`--edge-gilt`	`rgba(154,117,52,0.55)`	`rgba(222,192,136,0.38)`	The 1px gilded book-edge that seams dark sections into light pages.
`--scrim`	`rgba(23,19,14,0.50)`	`rgba(6,4,2,0.66)`	Dialog / palette backdrop.
`--nav-bg`	`bg-page` #faf6ee	`bg-page` #15110b	Sticky nav ground: opaque, over a hairline. Never translucent or blurred.
`--code-inline-bg`	`parchment-200` #eae1cd	`#241c12`	Inline code background.
`--code-inline-fg`	`oxblood-600` #6e1f27	`cognac-300` #c98a55	Inline code text, on code-inline-bg.

Borders and focus

Token	Light	Dark	Usage
`--border-hairline`	`parchment-300` #dacdb2	`#2c2417`	1px rules on light.
`--border-strong`	`#a99c84`	`#463a26`	Decorative rules: table headers and totals, dashed separators, hollow rings. Not for control edges; use border-control.
`--border-control`	`stone-400` #938770	`#736650`	Edges of form controls and outline buttons: inputs, selects, textareas, checkboxes, radios. Holds 3:1 on every surface in both themes.
`--border-control-hover`	`stone-500` #766955	`text-muted` #8e826b	Hovered control edge; one step stronger than border-control in both themes.
`--border-on-dark`	`rgba(222,192,136,0.22)`	`rgba(222,192,136,0.22)`	Gilt hairline on ink.
`--focus-ring`	`brass-600` #886421	`brass-400` #c99e5e	Border colour of a focused control; pairs with focus-shadow.

Status

Token	Light	Dark	Usage
`--status-success`	`racing-500` #1e6e4f	`racing-300` #6fa98e	Status mark for a success OUTCOME.
`--status-success-bg`	`#e4eee6`	`#16281e`	Tint fill behind success status.
`--status-success-fg`	`racing-700` #14503b	`#7fb79a`	Text/icon on status-success-bg.
`--status-warning`	`cognac-500` #a95f2e	`cognac-300` #c98a55	Status mark for a warning OUTCOME.
`--status-warning-bg`	`#f4e6d5`	`#2c1e10`	Tint fill behind warning status.
`--status-warning-fg`	`cognac-700` #8a4a22	`#d19a66`	Text/icon on status-warning-bg.
`--status-danger`	`signal-500` #c4292f	`signal-500` #c4292f	Status mark for a danger OUTCOME.
`--status-danger-bg`	`#f5e0df`	`#2e1414`	Tint fill behind danger status.
`--status-danger-fg`	`signal-600` #a81f26	`#e08789`	Text/icon on status-danger-bg.
`--status-info`	`navy-600` #24425e	`navy-400` #4a6c8c	Status mark for an info OUTCOME.
`--status-info-bg`	`#e1e8ee`	`#152430`	Tint fill behind info status.
`--status-info-fg`	`navy-600` #24425e	`#8fb0cb`	Text/icon on status-info-bg.

Token	Light	Dark	Usage
`--tag-bg`	`bg-surface` #ffffff	`#221b12`	Tag fill (default).
`--tag-fg`	`text-secondary` #5f5645	`text-secondary` #b7ac93	Tag text (default), on tag-bg.
`--tag-bd`	`border-hairline` #dacdb2	`border-hairline` #2c2417	Tag border (default).
`--tag-brand-bg`	`#eaf0ec`	`#16281e`	Tag fill (brand).
`--tag-brand-fg`	`racing-700` #14503b	`#7fb79a`	Tag text (brand), on tag-brand-bg.
`--tag-brand-bd`	`rgba(20,80,59,.30)`	`rgba(111,169,142,.30)`	Tag border (brand).
`--tag-gilt-bg`	`#f6efdf`	`#2a2110`	Tag fill (gilt).
`--tag-gilt-fg`	`brass-600` #886421	`brass-300` #dec088	Tag text (gilt), on tag-gilt-bg.
`--tag-gilt-bd`	`rgba(184,137,75,.40)`	`rgba(222,192,136,.30)`	Tag border (gilt).
`--tag-oxblood-bg`	`#f5e7e7`	`#2a1416`	Tag fill (oxblood).
`--tag-oxblood-fg`	`oxblood-600` #6e1f27	`oxblood-200` #d79aa1	Tag text (oxblood), on tag-oxblood-bg.
`--tag-oxblood-bd`	`rgba(110,31,39,.28)`	`rgba(154,64,72,.35)`	Tag border (oxblood).

Workflow states

Token	Light	Dark	Usage
`--state-queued`	`stone-400` #938770	`stone-400` #938770	Workflow state queued: dot/rule colour.
`--state-queued-bg`	`parchment-100` #f4eee0	`#221b12`	Workflow state queued: chip tint.
`--state-queued-fg`	`stone-600` #5f5645	`text-secondary` #b7ac93	Workflow state queued: chip text, on state-queued-bg.
`--state-queued-bd`	`border-hairline` #dacdb2	`border-hairline` #2c2417	Workflow state queued: chip border.
`--state-running`	`racing-500` #1e6e4f	`racing-300` #6fa98e	Workflow state running: dot/rule colour.
`--state-running-bg`	`tag-brand-bg` #eaf0ec	`#16281e`	Workflow state running: chip tint.
`--state-running-fg`	`racing-700` #14503b	`#7fb79a`	Workflow state running: chip text, on state-running-bg.
`--state-running-bd`	`tag-brand-bd` rgba(20,80,59,.30)	`rgba(111,169,142,.30)`	Workflow state running: chip border.
`--state-needs-input`	`brass-600` #886421	`brass-400` #c99e5e	Workflow state needs-input: dot/rule colour (3:1 or more on the page grounds).
`--state-needs-input-bg`	`tag-gilt-bg` #f6efdf	`#2a2110`	Workflow state needs-input: chip tint.
`--state-needs-input-fg`	`brass-600` #886421	`brass-300` #dec088	Workflow state needs-input: chip text, on state-needs-input-bg.
`--state-needs-input-bd`	`tag-gilt-bd` rgba(184,137,75,.40)	`rgba(222,192,136,.30)`	Workflow state needs-input: chip border.
`--state-needs-review`	`oxblood-600` #6e1f27	`oxblood-300` #c4767e	Workflow state needs-review: dot/rule colour. Dark: -400 fails 3:1 on dark; see ramp note.
`--state-needs-review-bg`	`tag-oxblood-bg` #f5e7e7	`#2a1416`	Workflow state needs-review: chip tint.
`--state-needs-review-fg`	`oxblood-600` #6e1f27	`oxblood-200` #d79aa1	Workflow state needs-review: chip text, on state-needs-review-bg.
`--state-needs-review-bd`	`tag-oxblood-bd` rgba(110,31,39,.28)	`rgba(154,64,72,.35)`	Workflow state needs-review: chip border.
`--state-done`	`stone-500` #766955	`stone-500` #766955	Workflow state done: dot/rule colour.
`--state-done-fg`	`text-muted` #766955	`text-muted` #8e826b	Workflow state done: chip text, on state-done-bg.
`--state-done-bd`	`border-hairline` #dacdb2	`border-hairline` #2c2417	Workflow state done: chip border.
`--state-failed`	`signal-500` #c4292f	`signal-500` #c4292f	Workflow state failed: dot/rule colour.
`--state-failed-bg`	`status-danger-bg` #f5e0df	`#2e1414`	Workflow state failed: chip tint.
`--state-failed-fg`	`signal-600` #a81f26	`#e08789`	Workflow state failed: chip text, on state-failed-bg.
`--state-failed-bd`	`rgba(196,41,47,.30)`	`rgba(224,135,137,.32)`	Workflow state failed: chip border.

Decisions

Token	Light	Dark	Usage
`--decision-pending`	`state-needs-input` #886421	`state-needs-input` #c99e5e	Approval decision pending: dot colour.
`--decision-pending-bg`	`state-needs-input-bg` #f6efdf	`state-needs-input-bg` #2a2110	Approval decision pending: chip tint.
`--decision-pending-fg`	`state-needs-input-fg` #886421	`state-needs-input-fg` #dec088	Approval decision pending: chip text, on decision-pending-bg.
`--decision-pending-bd`	`state-needs-input-bd` rgba(184,137,75,.40)	`state-needs-input-bd` rgba(222,192,136,.30)	Approval decision pending: chip border.
`--decision-approved`	`state-running` #1e6e4f	`state-running` #6fa98e	Approval decision approved: dot colour.
`--decision-approved-bg`	`state-running-bg` #eaf0ec	`state-running-bg` #16281e	Approval decision approved: chip tint.
`--decision-approved-fg`	`state-running-fg` #14503b	`state-running-fg` #7fb79a	Approval decision approved: chip text, on decision-approved-bg.
`--decision-approved-bd`	`state-running-bd` rgba(20,80,59,.30)	`state-running-bd` rgba(111,169,142,.30)	Approval decision approved: chip border.
`--decision-denied`	`state-needs-review` #6e1f27	`state-needs-review` #c4767e	Approval decision denied: dot colour.
`--decision-denied-bg`	`state-needs-review-bg` #f5e7e7	`state-needs-review-bg` #2a1416	Approval decision denied: chip tint.
`--decision-denied-fg`	`state-needs-review-fg` #6e1f27	`state-needs-review-fg` #d79aa1	Approval decision denied: chip text, on decision-denied-bg.
`--decision-denied-bd`	`state-needs-review-bd` rgba(110,31,39,.28)	`state-needs-review-bd` rgba(154,64,72,.35)	Approval decision denied: chip border.
`--decision-expired`	`stone-400` #938770	`stone-400` #938770	Approval decision expired: dot colour.
`--decision-expired-fg`	`text-muted` #766955	`text-muted` #8e826b	Approval decision expired: chip text, on decision-expired-bg.
`--decision-expired-bd`	`border-hairline` #dacdb2	`border-hairline` #2c2417	Approval decision expired: chip border.

Type

Families

Token	Specimen	Stack
`--font-display`	Equestrianism stirrup 0123456789	`'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif`
`--font-mono`	Equestrianism stirrup 0123456789	`'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace`
`--font-sans`	Equestrianism stirrup 0123456789	`'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

Display

Provider invocation logs

.display-1 76px/1.04 · 600 · -0.01em. Hero masthead. Cormorant, upright, sentence case.

Provider invocation logs

.display-2 56px/1.04 · 600 · -0.01em. Secondary masthead.

Provider invocation logs

.heading-1 42px/1.2 · 600. Page heading. Upright, one weight and colour; names its content.

Provider invocation logs

.heading-2 32px/1.2 · 600. Section heading.

Provider invocation logs

.heading-3 24px/1.2 · 600. Sub-section heading.

Documentation

Provider invocation logs

.heading-4-mono 19px/1.2 · 600. Mono H4: a command or literal used as a heading.

Provider invocation logs

.body-lg 17px/1.62 · 400. Lede copy on documentation and marketing pages.

Provider invocation logs

.body-md 15px/1.62 · 400. Documentation and marketing body text: mono at 1.62.

Provider invocation logs

.body-sm 13.5px/1.62 · 400. Secondary body text and metadata lines.

Provider invocation logs

.caption-label 12px · 500. Sentence-case caption label in label-engraved; labels a block of data or a card, never above a section heading.

Provider invocation logs

.table-header 10.5px · 600 · 0.06em. Table and column headers, uppercase: the one UI place uppercase is used.

Interface

Provider invocation logs

.ui-text 13.5px/1.5 · 400. Application chrome: nav, form labels, card metadata. Sans at lh-ui.

Provider invocation logs

.ui-row 13.5px/1.35 · 400. Anything in a fixed-height row: table cells, badges, lane headers, nav items.

Provider invocation logs

.ui-caption 12px/1.5 · 400. Hints and helper text in the application register.

Spacing

Token	Value	Usage
`--space-0`	`0`	No gap.
`--space-1`	`4px`	Hairline gaps; icon-to-text.
`--space-2`	`8px`	Tight gaps inside controls.
`--space-3`	`12px`	Gaps between related items.
`--space-4`	`16px`	Panel and rail padding.
`--space-5`	`20px`	Section spacing in cards.
`--space-6`	`24px`	Page padding (app).
`--space-8`	`32px`	Empty-state padding; large gaps.
`--space-10`	`40px`	Between page sections.
`--space-12`	`48px`	Between page sections.
`--space-16`	`64px`	Editorial whitespace.
`--space-20`	`80px`	Editorial whitespace.
`--space-24`	`96px`	Hero spacing.
`--space-32`	`128px`	Hero spacing.
`--app-topbar-h`	`52px`	App shell top bar height.
`--app-rail-w`	`220px`	App shell nav rail width.
`--control-h`	`34px`	Shared control height so mixed rows (input beside button) align.
`--control-h-sm`	`28px`	Small control height.
`--control-px`	`10px`	Control horizontal padding.
`--app-gap`	`12px`	Between lanes, cards, form fields.
`--app-pad`	`16px`	Panel / card padding.
`--app-page-pad`	`24px`	Main column padding.

Radii

Token	Value	Usage
`--radius-xs`	`2px`	Checkboxes, inline code, small marks.
`--radius-sm`	`4px`	Buttons, inputs, chips, banners.
`--radius-md`	`6px`	Cards, dialogs.
`--radius-lg`	`10px`	Large panels.
`--radius-pill`	`999px`	Status dots and tags only.

Shadows

Token	Light	Dark	Usage
`--shadow-xs`			Hairline lift.
`--shadow-sm`			Cards: sit on a hairline and this.
`--shadow-md`			Sticky bars and popovers.
`--shadow-lg`			Overlays and dialogs only.
`--shadow-inset`			Inset "pressed leather" for sunken wells.
`--keyline-brass`			Gilt keyline: the luxury elevation motif; marks the single most important card or active item.
`--focus-shadow`			Solid 2px brass focus ring on :focus-visible (4.6:1 or more on every surface in both themes).

Font sizes

Token	Value	Usage
`--text-display-1`	`76px`	Hero masthead.
`--text-display-2`	`56px`	Secondary masthead size; the display-2 type style.
`--text-h1`	`42px`	Page heading size; the heading-1 type style.
`--text-h2`	`32px`	Section heading size; the heading-2 type style.
`--text-h3`	`24px`	Sub-section heading size; the heading-3 type style.
`--text-h4`	`19px`	Mono H4 size; the heading-4-mono type style. Also dialog titles.
`--text-body-lg`	`17px`	Lede copy size; the body-lg type style.
`--text-body`	`15px`	Documentation and marketing body size; the body-md type style.
`--text-body-sm`	`13.5px`	Secondary body and application chrome size; the body-sm, ui-text and ui-row type styles.
`--text-caption`	`12px`	Captions, hints and metadata; the caption-label and ui-caption type styles.
`--text-micro`	`10.5px`	Engraved plate labels; table headers.

Font weights

Token	Value	Usage
`--fw-light`	`300`	Light numerals in reports.
`--fw-regular`	`400`	Body text.
`--fw-medium`	`500`	Caption labels, buttons.
`--fw-semibold`	`600`	Headings, table headers.
`--fw-bold`	`700`	Strong emphasis.

Line heights

Token	Value	Usage
`--lh-tight`	`1.04`	Mastheads and display lines.
`--lh-snug`	`1.2`	Headings and titles.
`--lh-normal`	`1.62`	Documentation body, mono.
`--lh-relaxed`	`1.75`	Long-form reading.
`--lh-ui`	`1.5`	Application chrome.
`--lh-ui-tight`	`1.35`	Fixed-height rows: table cells, badges, lane headers, nav items.

Letter spacing

Token	Value	Usage
`--tracking-tight`	`-0.01em`	Display sizes and serif titles: display-1, display-2, card titles and the wordmark.
`--tracking-normal`	`0`	Default tracking for sentence-case labels; buttons and the wordmark.
`--tracking-wide`	`0.06em`	Lightly tracked mono labels: the table-header type style, tags, field and lane labels, decision buttons.
`--tracking-wider`	`0.14em`	Uppercase micro labels: badges, table headers, the transcript type column and role and completed chips.
`--tracking-plate`	`0.22em`	Seal inscription only; not for UI labels.

Numerals

Token	Value	Usage
`--numeric-tabular`	`tabular-nums`	Any figure in a column, updating in place, or compared against another: money, counts, durations, percentages.
`--numeric-proportional`	`proportional-nums`	Figures in running prose.

Layout

Token	Value	Usage
`--measure`	`68ch`	max reading width for mono body
`--container`	`1180px`	content max-width
`--container-wide`	`1360px`	Wide content max-width.
`--gutter`	`32px`	Grid gutter.

Border widths

Token	Value	Usage
`--border-width`	`1px`	Default 1px edge.
`--border-width-heavy`	`1.5px`	Heavier rule.

Tokens

Palette

Semantic colours

Backgrounds

Text

Brand, accents and chrome

Borders and focus

Status

Tags

Workflow states

Decisions

Type

Families

Display

Documentation

Interface

Spacing

Radii

Shadows

Font sizes

Font weights

Line heights

Letter spacing

Numerals

Layout

Border widths