> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Design Tokens and Variables

## Overview

Knapsack is dedicated to helping you streamline and enhance your design system through the effective use of design tokens and customizable themes. Design tokens serve as a bridge between designers and developers, translating visual styles into reusable, consistent values that ensure a cohesive user interface across all platforms. With Knapsack's robust Design Tokens engine, you can effortlessly manage these tokens, customize themes, and integrate them into your development workflow.

This section includes detailed guides on managing tokens using Knapsack's user-friendly interface, importing existing tokens from external tools, configuring the Design Token engine to generate reusable assets, and utilizing variables to create dynamic themes. By leveraging these powerful tools, you can ensure consistent styling, simplify updates, and foster collaboration between design and development teams.

### Tokens vs Variables

#### Tokens

A token is a basic building block that represents a specific, unchanging value. Think of it as a 1:1 pairing between a name and a value, like assigning a label to a fixed attribute. For example, the brand's primary color or a set of predefined colors (like shades of purple ranging from 100 to 800) would be considered tokens. These are foundational elements and typically form the first level of a token architecture.

#### Variables

A variable is more flexible and context-specific than a token. It can either link to a single token or map to multiple values depending on the situation. For example, a variable like color.text.primary might be assigned the brand's primary color token, but it can adapt or change based on the context (mode) in which it's used. Variables allow for more dynamic application while still referencing the foundational tokens.

#### [Managing Tokens in the UI](/design-tokens/adding-tokens-through-ui)

Easily add and manage design tokens through Knapsack's intuitive interface. Input and organize tokens directly within Knapsack, streamlining the process without needing to dive into code.

#### [Importing Tokens](/design-tokens/importing-tokens)

Bring your existing Style Dictionary tokens into Knapsack seamlessly. This guide shows you how to import your tokens JSON into Knapsack for further management and usage.

#### [Configuring Token Engine](/design-tokens/token-engine-configuration)

Learn how to configure Knapsack's Token Engine to transform your design tokens, such as colors, typography, and spacing, into reusable code and assets. This section covers generating design tokens in various file formats, ensuring they integrate smoothly into diverse development platforms and workflows.

#### [Variables](/design-tokens/variables)

Explore how to use variables to create collections, modes, and themes that enhance the flexibility of your design system.

#### [Using Tokens in Projects](/design-tokens/using-tokens-in-projects)

Learn how to use Variables within your workspace.