Matter Design System

matter

Tokens, components, and recipes — one source for designers, developers, and agents.

Pick your entry

designersFoundations

Copy tokens, alphas, bloom, focus, and the AA contract. Deep-link to Figma.

developersComponents

Every export from @matter/components and @repo/brand at every state × theme × density.

agentsManifest

Structured design-system.json, flat llms-design.txt, JSON Schema.

Sections

Brand

Mark, wordmark, lockup, tagline, brand tokens.

Foundations

Color, alphas, bloom, status, focus, token architecture, the AA contract.

Type

Scale, display emphasis, body ramp.

Spacing

Spacing scale, radii, shadows, rhythm.

Surfaces

Glass, blooms, sheets, code, dark theme.

Components

One page per export — hero, props, states, density, theme, tokens consumed, source.

Patterns

Composite recipes — tabs, blooms, sections, cards, tables, search, API blocks, warnings.

Recipes

Full-bleed app screens — docs corpus, doc detail, board, equity, API.

Usage

Authoring rules, motion grammar, voice, accessibility contract, density, live patterns.

Nothing here is hand-authored token data. Token tables read from @matter/tokens at build time, component manifests from @matter/components. A change in source propagates automatically on next build. The drift gate fails CI when something falls out of sync.

Authoring contracts

Every page on this site follows a contract. Two of them matter most:

The component-page rubric — every /components/<name> page has the same fifteen sections in the same order. Readers move between pages without re-learning where to look; agents parse pages predictably.
The authoring rules — the voice rule that applies everywhere: never compare Matter to other products. Describe what Matter does plainly and self-contained. Factual references to standards (WAI-ARIA roles, RFC 7807, OAuth 2.1) are fine; framing Matter's design as a comparison to a named competitor is not.

For agents

curl -s https://design.mattermode.com/design-system.json | jq '.tokens.colors[0]'
curl -s https://design.mattermode.com/llms-design.txt   | head -40

Schema lives at /design-system.schema.json. The version field mirrors packages/tokens/package.json#version so an agent can pin against the same release the consuming code is on.

Matter Design System

Pick your entry

Sections

Authoring contracts

For agents

On this page