Documenting Design 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.

New Design Token Block

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.

Filtered Design Token Block

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

Design Token Block with Display Style

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.