> 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. # Variables **Only available on certain plans.** Reach out to a Knapsack sales representative to enable this feature. ## Getting Started Head to the Design settings to toggle on Enable Variables. Once on, you'll see some additional options you can chose to adjust: ![Screenshot 2024-08-15 at 4.17.37 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/6bc44c2f2fb058d60cfbc92c55588983a808c8ac1623875a7d906b14fe44ffdd/docs/assets/images/634fc561-screenshot-2024-08-15-at-41737-pm-qmgyz3xchapng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211405Z&X-Amz-Expires=604800&X-Amz-Signature=47b22bff4f35a14fa65f45f68edd8bde3be61305e82e0fa786be04cc0332b17b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) **Collections Parent Key** This is the top level key that all variables will contain when they are distributed. Example: `collectionsParentKey.groupName.variableName` **Enabled Renderers** By default Knapsack enables theming for all renderers within your workspace. You can choose to disable any that aren't ready for theming. When a renderer is enabled, a **Theme** drop down will appear on the template stage allowing users to switch between the themes you create. *** ## Collections and groups Collections and groups are used to organize variables for easier parsing and more precise variable naming. A collection is a set of variables and modes. Use collections to organize related variables together. For example, use one collection for spacing values, and another collection for theme colors. ![Screenshot 2024-08-15 at 4.25.07 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/5291320da25623415af790239ec8c51a559d7532b1ec0e9284914ce18b893b5e/docs/assets/images/3d5aeb15-screenshot-2024-08-15-at-42507-pm-zmjccdpj3cpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211405Z&X-Amz-Expires=604800&X-Amz-Signature=71a2ac72f985ff7888e06d09bb43509bcb55a3bac0e4c5e98bb4330810b71bba&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) Use groups within a collection to further organize your variables. For example, use one group for text colors, and another for fill colors. *** ## Variables Variables are a set of tokens that change their value based on different modes, such as light and dark. **Supported variable types** * Color * Dimension * Duration * Font Weight * String * Number * Boolean ![Screenshot 2024-08-15 at 4.27.09 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/027fbb5ea71c5f724f63467b2c9dec7be895deccc267df6d365eb2b00cc45c8e/docs/assets/images/f827c643-screenshot-2024-08-15-at-42709-pm-1tmbrp4fogpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211405Z&X-Amz-Expires=604800&X-Amz-Signature=254d61511362ad809bd50ff60437d8b9140d68676355dd4ecbe5014051814369&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) *** ## Variable modes Modes are where token values are defined. Modes allow creating complex sets of tokens that can handle many situations such as basic light and dark modes, or support for multiple brands. For example, you might have a text color variable that has a black value in light mode, and a white value in dark mode. ### Adding new modes By default a collection starts with a single variable mode. You can add additional modes, by clicking the 'Add Mode' button in the top right of the collection view. ![Screenshot 2024-08-15 at 4.31.33 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/ac0506a8d3e05cdb2d9e77e0faa8682700dfb096f844ce7387eb7db3b3aeb830/docs/assets/images/6b013e57-screenshot-2024-08-15-at-43133-pm-2wkx-gvp9png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211405Z&X-Amz-Expires=604800&X-Amz-Signature=6b6e31a232d33c21a928cf827456aa054a7b50c8c8f83d2bae2e26b52c8a36d5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) ### Managing existing modes #### **Renaming modes** Simply update the name of the mode inline. If the mode is already in use in your system, you'll need to update any existing data attributes associated to that mode name. #### **Reorder modes** Use the mode actions menu to move a mode left or right to make finding them easier. The first variable mode will always be treated as the default value for the variable. #### **Delete existing modes** Use the mode actions menu to delete a mode. This will remove all related variable values and cannot be undone. *** ## Up next: Using Tokens in Projects #### [Using Tokens in Projects](/design-tokens/using-tokens-in-projects)