Token blocks

Display design tokens in your documentation.

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.

Design tokens - menu

Add a design tokens block


Design tokens - empty

To add a design tokens block to your documentation:

  1. Select Design tokens from the block menu.
  2. In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
  3. Select the token type first.
Design tokens - selection
  1. 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.
  2. 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 theme token to either be displayed beside the base token value, or override it. See Displaying theme tokens for more.
  • Select which token properties you want to display in the block in the Token properties section.
Design tokens - property panel