All tokens

The full token surface in one place. Search by name, CSS variable, value, or group. Filter by kind (colors, radii, shadows, motion, layout, spacing, typography, density) or source (matter / brand). Every CSS variable is a click — copies to your clipboard with the canonical peach-ring affordance.

The token data is generated at build time from packages/tokens/src/index.ts and packages/brand/src/tokens/*.ts. A change in the source propagates to this page on the next build — there's no hand-authored token data anywhere on this site.

How to consume tokens

Three canonical ways to read a token, in order of preference:

1. CSS variable — color: var(--fg-muted);. Always-correct, theme-aware, zero JS cost. Reach for this first.
2. Tailwind preset utility — class="text-fg-muted". Composes the same CSS variable via the @matter/presets-tailwind preset. Use inside Tailwind-driven surfaces.
3. TypeScript token export — import { fgMuted } from "@matter/tokens";. Use only for token computations (color manipulation, animation interpolation) — not for runtime styling, since you lose theme reactivity.

Never inline a raw hex value. The drift gate fails CI on raw color literals in MDX, and the same rule applies in source — every color should reach for the token, not the hex.

What's in each kind

Adding a new token

The token catalogue is the canonical surface — adding a token here is a brand-level decision, not a per-feature one.

1. Add the value to packages/tokens/src/index.ts (or packages/brand/src/tokens/*.ts for brand-specific tokens).
2. Add the matching CSS variable to packages/brand/src/styles/tokens.css. The drift-guard test fails CI if these disagree.
3. Run bun run --filter @repo/brand test and bun run --filter design generate:tokens locally to verify.
4. The token surfaces here on the next build.

For agents

The full token catalogue is exposed at /design-system.json:

curl -s https://design.mattermode.com/design-system.json | jq '.tokens.colors[] | select(.name | startswith("fg"))'

Schema: /design-system.schema.json. The version field mirrors packages/tokens/package.json#version — pin against it for stable agent behaviour.