Color

Foreground

Body text reaches for --fg, headings for --fg, secondary text for --fg-muted. Captions use --fg-soft-aa (the AA-safe sibling).

Surface

Page is --bg. Cards, sheets, and modals lift to --bg-elev (sometimes --bg-2 for a warmer paper tone).

Lines

Hairline divides cards. Strong hairline is for emphasized rules.

Accent

The accent is ink, not orange. Orange lives in the brand layer (see Brand tokens).

Accent state ramp

The ink accent darkens, not lightens, under interaction. Hover slides toward the soft #2A2A2A; press lands at pure #000000. Bind these at the component layer — primary buttons, action chips, primary links — not at callsites.

Surface variations

Beyond --bg and --bg-elev, three surface primitives extend the paper grammar. --paper-warm is the warmest panel (a tone deeper than --bg-2) and powers receipt envelopes, founder-doc headers, and the marketing site's quiet bands. The brand layer adds --surface-inverse for dark sheets, --surface-code for code blocks against the dark theme, and --neutral-150 as a neutral-cool counterpart to the warm stone ramp.

Semantic ring

Authors reach for the semantic ring at callsites, not primitives:

Text — semantic ramp

The brand layer publishes a six-stop text ramp keyed to role, not contrast level. Headings reach for --text-heading; body copy for --text-body; secondary captions for --text-muted; near-disabled hints for --text-faint. --text-inverse and --text-on-brand cover the dark-sheet and orange-button cases.

Borders — semantic ramp

Three border primitives, two solids and one alpha. --border-hair is the 6 % ink alpha used wherever a divider must layer cleanly over a tinted panel. --border-glass is the rendered glass-card edge — the alpha is calibrated for the bloom-veil stack.

Stone ramp — neutral primitives

The stone ramp is the underlying neutral primitive surface. Eleven stops from --stone-50 (near-white) to --stone-900 (near-black). Authors don't reach for stone directly in product code — the semantic ramp (--text-body → --stone-600, --surface-mute → --stone-200, etc.) is the supported entry point. Stone is the brand layer's back room.

Bloom palette — extended stops

The four bloom families each publish a four-stop ramp at the primitive layer. The hero presentation (gradient class plus optional veil) lives at /foundations/bloom; the discrete stops below are the back-room values the gradients compose. Stops 1 and 2 are tints (sit behind text); stops 3 and 4 are saturated (decorative panels only, never with text).

Peach

Amber — Create surface

The amber stops compose the Create-phase gradient. Amber doesn't ship with a .bloom-amber-veil class; the gradient renders directly under display headlines, not body text.

Lavender — Manage surface, AI tints

Sage — Exit surface

Status palette — primitive tokens

The status pills documented at /foundations/status resolve through a --status-* / --status-*-text pair per state. The dot uses the lighter sibling; the text uses the deeper sibling. Authors reach for the .status-* utility classes; these primitives are the back room those classes resolve to.

Semantic state colors

A generic four-stop semantic ramp (success / warning / error / info) sits beside the domain status palette. The status palette is the preferred surface for product flows; semantic state is for generic UI affordances — toast notifications, validation hints, form errors — where the underlying state isn't a Matter domain state.

Lifecycle phase colors

The Create / Manage / Exit lifecycle has its own token family — used by phase chips, sidebar headings, and dynamic-card badges to keep the three phases visually distinct across the dashboard, docs, and MCP catalog. Each phase publishes a saturated *-base and a soft *-bg.

HTTP method and status — primitive tokens

The HTTP method badge documented at /foundations/status and the response-status chip used in the docs API playground both resolve through these primitives. The --method-*-base tokens are the saturated text colors; the --http-status-* family covers ok (2xx), redirect (3xx), and error (4xx + 5xx) with a base / bg / ring triple per band.

Brand accent — orange and cyan

The Matter orange lives in the brand layer; the canonical accent is ink. The orange family publishes a hover and press state, a tint for soft grounds, and a focus ring tuned to the same hue. --matter-cyan is a single high-energy accent reserved for marketing animations and the brand mark's interactive states — never for product chrome.

Brand-extended accents

The brand layer also publishes a few non-orange accents for marketing surfaces and category chips on the docs site. green resolves into the success ramp and the sage backdrop; indigo is the Manage phase's marketing-side companion; rose is reserved for legal-document badges and the v2 marketing site's quiet warning states.

Key-set dot — agent token affordance

A single token pair used by the agent-token UI to flag the currently active key set in dropdowns and the topbar. Green-leaning, ring-only — no fill — to distinguish from status dots.