Design Tokens & Theming
Connect brand decisions to style implementation in product UIs, ensuring a cohesive brand experience across your portfolio. Empower non-technical users to safely contribute to themes using Variables, Collections, and Modes in Knapsack with role-based permissions and Git backing.
Design Token & Theme Manager
Centralized management of design tokens, Variables, Collections, and Modes through Knapsack lets you manage multiple themes in one place.
Explore Design Token Management
Figma import
Import styles and themes from Figma using Variables, Collections, and Modes, maintaining all groupings and associations
Explore Knapsack's Figma Plugin
CI/CD integration
Leverage automation and AI tools to ensure theme and token changes flow directly into engineering workflows, making development faster and easier.
Real-Time Rendering
See changes to themes rendered on production code components as you make them, allowing designers to iterate faster and accelerate digital production timelines.
Ready to learn how Knapsack can help your team create a central source of truth?
.avif)
We’ve been experimenting with the token structure in Knapsack, and it’s been really helpful for maintaining consistency across our design system. The way Knapsack handles tokens makes it easier to implement changes across the board.
Lead User Experience Designer, Digital Design
.avif)
The token structure is something we’ve been leveraging a lot, especially as we scale. It’s flexible enough for us to manage different brand guidelines within the same system, which is crucial for our team.
Senior Product Manager
.avif)
Tokens are a key part of our workflow, and Knapsack’s approach has streamlined the way we manage and apply them across our design system. It’s made things more consistent and easier to update.
VP, Senior Design Systems Engineering Manager
.svg)
.svg)
See Knapsack in action with a guided, interactive tour
Design Tokens and Theming
Design Tokens and Theming
Variables | Demo 2.0 | Knapsack
lj-walnutPublish Changes
Variables
Import Figma VariablesCreate Collection
| Collection | Modes | Vars | |
|---|---|---|---|
| density | cozy, compact | 7 | |
| theme | arcadiaLight, arcadiaDark, basisLight, basisDark | 13 |
Variable Usage
Use the dropdowns below to select the mode for each collection. Then use the body data attributes to use the variables in your codebase.
density
Select an option...cozycompact theme
Select an option...arcadiaLightarcadiaDarkbasisLightbasisDark
<body
data-collections-density="cozy"
data-collections-theme="arcadiaLight"
>
<!-- your components here -->
</body>
Variables
Import Figma VariablesCreate Collection
| Collection | Modes | Vars | |
|---|---|---|---|
| density | cozy, compact | 7 | |
| theme | arcadiaLight, arcadiaDark, basisLight, basisDark | 14 |
Variable Usage
Use the dropdowns below to select the mode for each collection. Then use the body data attributes to use the variables in your codebase.
density
Select an option...cozycompact theme
Select an option...arcadiaLightarcadiaDarkbasisLightbasisDark
<body
data-collections-density="cozy"
data-collections-theme="arcadiaLight"
>
<!-- your components here -->
</body>
Theme | Variables | Demo 2.0 | Knapsack
Theme | Variables | Demo 2.0 | Knapsack
lj-walnutPublish Changes
| Name | arcadiaLight | arcadiaDark | basisLight | basisDark | |
|---|---|---|---|---|---|
| action | collections.theme.brand.color | collections.theme.brand.color | collections.theme.brand.color | collections.theme.brand.color | |
| color.white | color.white | color.white | color.white | color.white | |
| background | |||||
| brand | |||||
| text |
Welcome to Design Tokens and Theming in Knapsack
Knapsack design token and theming capabilities allow teams to connect their brand decisions directly to styling implementation within their product while also creating a collaborative management environment and dynamic documentation.
Let's start