Design token keys
Look up the keys of the tokens object you pass to registerDesignTokens, and what each key takes. You need it when you write the object and aren't sure which group a value belongs to. For the options argument, see Choose how strict the Design tab is.
The example on this page is the Blog project. It registers colorTokens, spaceTokens, size and typography tokens.
Global design tokens
| Global token | Where it appears in the Design tab |
|---|---|
colorTokens | The color controls of Typography, Background, Border and Shadow. |
spaceTokens | Spacing margin and padding, and the Layout gap. |
spaceTokens don't appear in the Size controls. For those, use size.tokens. TypeScript requires a unit on every length, such as 8px or 0.5rem.
Section design tokens
Section tokens cover twelve groups. Register only the groups your design system defines.
| Section | What it takes |
|---|---|
size | width, height, minWidth, minHeight, maxWidth, maxHeight, and tokens to set all six at once. |
spacing | margin, padding, tokens for both, and style presets that set margin and padding together. |
position | zIndex and position. |
visibility | opacity as a percentage. |
layout | gap. |
typography | color, fontWeight as numbers, fontSize, lineHeight, letterSpacing, and style presets that can include a fontFamily. |
background | color, and style presets: solid color, linear gradient, radial gradient or image. |
shadow | color, and style presets with x, y, blur, spread, color and inset. Studio builds the CSS value. |
effects | filter. |
border | color, radius and style presets. |
transform | style presets. |
overflow | style presets. |
To register tokens with these keys, see Register design tokens.