token graph· tokens.graph.json · 279 nodes · 20 categories · 11 edges
every token is a node; every reference is an edge
the brand publishes tokens.json as the source of truth. the build emits four artefacts: tokens.css, tokens.ts/js, dtcg.json (W3C DTCG v1.0), and tokens.graph.json — the explicit dependency graph. the graph captures every node (279 entries), every category (20 buckets), and every cross-reference (11 edges). it's the machine-readable answer to "what does this token mean and what does it depend on?"
as of
00 · liveclick any node · see its value, swatch, and edges · the same payload an MCP client receiveswalk the graph yourself
as of
01 · schemazero.tokens.graph.v1 · two record types · pinnedthe graph format · documented, then enforced
| type | field | description |
|---|---|---|
| node | id | dotted-path identifier · e.g. color.amber |
type | inferred kind · color · string · ref · number · … | |
value | the literal value (hex, oklch, scalar, var() reference) | |
category | top-level bucket from tokens.json | |
path | array of segments before flattening · used for nested categories | |
| edge | from | source node id · the referencing token |
to | target node id · the referenced token | |
kind | relationship kind · today only css-var-ref |
why a graph and not a flat list
a flat list answers "what tokens exist?" the graph also answers "what depends on amber?" and "if I change --font-mono, what re-renders?" downstream tools (Tokens Studio, Style Dictionary v4, custom inspectors) can walk the edges instead of re-parsing the source. the CI gate keeps node count drift inside ±5%.as of
02 · totalslive numbers from tokens.graph.jsoncounts that the build actually emitted
279
115% of the per-category budget total
20
17 ADR-009 + 2 metadata buckets (version · license)
11
today: typography family aliases. growth is opt-in per ADR.
as of
03 · categoriesper-category counts · sorted descendingwhere the tokens live
color59material59motion20space19fontSize17opacity13z12radius10shadow10lineHeight9fontWeight9type7breakpoint7blur7letterSpacing6layout6hair4gradient3version1license1
as of
04 · sample12 representative nodes · including the two brand colorswhat a node looks like
| id | type | value | category |
|---|---|---|---|
color.ink.0 | color | #0a0907 | color |
color.bone.1 | color | #e2d7bb | color |
space.4 | dimension | 16 | space |
lineHeight.body | string | 1.55 | lineHeight |
motion.breath | dimension | 1200ms | motion |
breakpoint.md | dimension | 768px | breakpoint |
as of
05 · mcpzero://tokens/graph · the same graph is queryable by every coding agentthe graph is the brand's dependency contract
how this surfaces in the MCP server
@zero/mcp-server exposes zero://tokens/graphas a JSON resource. an agent reading it gets the same payload this page renders. the CI gate (scripts/check-token-graph.mjs) validates schema, drift bounds, and category coverage on every commit. the graph is non-decorative: it's how downstream tools discover the brand's dependencies without re-parsing source files.| field | value |
|---|---|
| $schema | zero.tokens.graph.v1 |
| generatedAt | 2026-05-14T18:07:28.915Z |
| source | packages/tokens/tokens.json + skins/*.contract.json |
| version | 1.0.0 |
| file | packages/tokens/dist/tokens.graph.json |
graph livemcp-queryable
◆ tg001a