Design tokens
Each project holds its colours, type and spacing as design tokens and serves them from the API. An app that reads them at runtime shows a rebrand once the new tokens are published.
One token document per project
The tokens are a single document in the W3C Design Tokens format. Each token is one named value, such as color.brand.primary. The kinds are colours, font families, font weights, font sizes, line heights, letter spacing, composite typography, spacing, corner radii, shadows and borders. Buttons, cards, layout grids, breakpoints and motion are outside it.
References between tokens
A token can reference another by its path, so changing one value updates everything that points at it. References are resolved on the server before the tokens are served. A document with a reference cycle, an unknown reference, a type mismatch or an unsupported type is refused when it is saved, and the error names the token's path.
Draft and published
An edit goes to a draft, whether you make it in the console, under designTokens in your config file or through the API. The live site keeps serving the last published set until a release publishes the draft. To preview unpublished tokens, a request sends the draft channel header with a key that holds the drafts read scope.
Reading tokens in your app
The GraphQL query returns flat, resolved arrays for each kind of token, plus source, the raw W3C document for build tools. An app that reads tokens from the API at runtime picks up a published change without a deploy. An app that bakes them in at build time still rebuilds.
Read the detail
The design tokens guide covers the token kinds, the ways to edit them and how the draft is published.