Adding / Changing Design Tokens

Design tokens are atomic design properties - a color, font, border radius, or some combination of these sorts of properties - expressed as a source variable that can be combined, translated and consumed across an entire digital ecosystem.

Adding design tokens to your Knapsack workspace can help your team define, document, and distribute color, typography, and other core styling properties to your design system users. 

Knapsack supports Style Dictionary formatting from Amazon. If you are already using Style Dictionary, you don’t have to adjust your design token format to work with Knapsack. Otherwise, you might need to reformat your existing design tokens to Style Dictionary standards.

Note: To make these changes to your workspace, you must be logged in and have either Admin or Editor permissions.

Add design token data

In the preconfigured repository, design token data is stored in the /src/design-tokens/ directory, with a single .js file for each category of token. You’ll see a number of token files in the repo by default, with syntax for denoting Tags, Comments, Names and Values, each of which map to display settings and filters in the Design Tokens Content Block, per the diagram below.

To add your own design tokens, you can start by modifying and adding to the values in the existing files, and creating corresponding files for additional token categories. Values you enter will be immediately available in the Design Tokens content block in the Knapsack Cloud UI.

Note: If you’d like to customize the source location or formatting for design token data within your Workspace, contact us at help@knapsack.cloud.

See also: Documenting Design Tokens