Token blocks are dynamic content blocks populated with data from your design system. There are currently three types of token blocks to choose from: Design tokens, color ramps, and accessibility color grid.
Add a design tokens block
To add a design tokens block to your documentation:
- Select Design tokens from the block menu.
- In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
- Select the token type first.
- You can then choose to add either a token group, or individual tokens (you can't add both). Search and select the tokens you'd like to use for the block in the selection dialog. The tokens will be shown in the same order in your published documentation.
- Click Save selection.
In the property panel to the right of the screen, you can do the following:
- Change the token in the block by clicking Change selection.
- Choose a layout to display 1 or 2 swatches of tokens.
- Apply themes to tokens swatches to override their value. See Displaying theme tokens for more.
- Select which token properties you want to display in the block in the Token properties section.