Documenting Design Tokens

For the latest Knapsack features related to managing Design tokens, check out Editing & Managing Color Tokens

Because documentation in Knapsack is so close to code, documenting design tokens and keeping the information up-to-date is made very easy.

When you add a Design Tokens block to any documentation, you can use the block settings to select only the tokens you want to document, then use display styles to present them in a meaningful way.

Start by narrowing down the selection of tokens you want to document by selecting a Design Token Category. The design tokens tags list will update to provide some quick sub-category toggles that you can select from next. Finally, you can use the Design Token Name Filter to filter the remaining tokens by any string value.

Once the list is displaying the tokens you want to document, apply a Display Style to determine how the tokens are rendered.

Pro Tip: A lot of the Display Styles provide click-to-copy token names and values, which makes using grabbing the tokens quick and easy when you need them.