# Variable Types

ThemeBuilder enables you to create and use variables and organize them in categories to simplify your design process. The variables are separated into five major sections based on the values they store:

* [Font Families](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types#font-families)
* [Metrics](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types#metrics)
* [Typographies](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types#typographies)
* [Colors](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types#colors)
* [Effects](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types#effects)

![Variable sections by value type](https://www.telerik.com/themebuilder/documentation/assets/254045ba3bca2118105807e7a654e918/variable-types-main-sections.png)

By default, each section contains a number of predefined Kendo variables organized in subcategories named with a "Kendo" prefix. These variables store the default Kendo values for a number of exposed styles for the selected Kendo theme flavor. Additionally, you can create custom categories and [add, edit, or map variables](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables) in all categories. Variables imported from Figma through the dedicated plugin will appear in subcategories named with a "Figma" prefix.

Once a variable is created in ThemeBuilder, you can assign it to the desired styling template to modify the targeted Kendo or custom component.

## Font Families

The "Font Families" section enables you to create variables that define a font or a number of fonts as a comma-separated string.

![Creating a font family variable](https://www.telerik.com/themebuilder/documentation/assets/f11b195905d74b1bb49a7c5ba9d61c10/variable-types-font-family.png)

## Metrics

The "Metrics" section enables you to create variables that define various metric values like height, spacing, width, size, radius, etc. The supported units are `px`, `pt`, `rem`, `em`, and `%`.

![Creating a metrics variable](https://www.telerik.com/themebuilder/documentation/assets/3f1f6de4c3211d243d8af460a9f568e3/variable-types-metrics.png)

## Typographies

The "Typographies" section enables you to create variables that define multiple typography values including font-family, font-size, line-height, letter-spacing, text-transform (none, capitalize, lowercase, uppercase), font-style (italic), and text-decoration (underline and line-through).

![Creating a typography variable](https://www.telerik.com/themebuilder/documentation/assets/a08862db9c39a7cd1cd4106a92ca612b/variable-types-typographies.png)

## Colors

The "Colors" section enables you to create variables that define a specific solid color (through HEX or RGB values) or a gradient (through CSS gradient values).

![Creating a color variable](https://www.telerik.com/themebuilder/documentation/assets/ff74c2489e70232d3638a700be02e3d0/variable-types-colors.png)

To create a gradient, use a valid CSS gradient value. An example based on the following linear gradient value:

```css
linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
```

![Creating a gradient variable](https://www.telerik.com/themebuilder/documentation/assets/5ac1c1ed15f9e07a534e6ba22b1f91fc/variable-types-gradient.png)

## Effects

The "Effects" section enables you to create variables that define effects like drop shadow, inner shadow, layer blur, and background blur. The supported units for the metrics-related effect properties are `px`, `pt`, `rem`, and `em`.

![Creating an effect variable](https://www.telerik.com/themebuilder/documentation/assets/e917737809182e0458bb6f93bea283c5/variable-types-effects.png)

## Using Kendo Variables

A ThemeBuilder project based on any Kendo theme flavor contains a number of predefined Kendo variables (for example, "Kendo Colors Primary" or "Kendo Typographies"). These variables show the default values used in the selected Kendo theme and color swatch. All exposed Kendo variables are accessible and can be modified and reused in your ThemeBuilder project.

[Learn more about using Kendo Variables in ThemeBuilder here...](https://www.telerik.com/themebuilder/documentation/working-with-kendo/kendo-variables)

[Learn more about the Kendo Theme Variables here...](https://www.telerik.com/design-system/docs/themes/get-started/introduction/)

## Using Figma Variables

The [ThemeBuilder plugin for Figma](https://www.telerik.com/themebuilder/documentation/plugin/overview) enables you to import styles and variables (color and number variables) from Figma. All imported variables will appear in dedicated Figma categories. The Figma variables will be distinguished by their **"figma-"** prefix (this prefix is configurable through the **Settings** screen).

You can reuse the Figma variables by mapping them to other custom or Kendo variables or by directly assigning them as values through the "Advanced Edit" option.

> tip Note that the imported Figma variables are read-only in ThemeBuilder. The idea is that the source of truth remains in the hands of the Figma designers and any changes should be propagated directly from Figma through re-export. Re-exported Figma variables are automatically updated in ThemeBuilder.

[Learn more about the ThemeBuilder plugin for Figma here...](https://www.telerik.com/themebuilder/documentation/plugin/overview)

## Reusing the ThemeBuilder Variables in End Projects

Apart from using the ThemeBuilder variables in the project, you can also reuse the variables in your end projects. However, note that most Kendo themes (including Default, Classic, Material, and Bootstrap) expose the variables only as SCSS variables, which means that they will be available as tokens only if you are using the Sass npm package. By design, all custom variables will be available in the generated SCSS files through the **tb-** prefix (the prefix is configurable through the **Settings** screen).

For example, a variable called `$my-hotpink` will be included as `$tb-my-hotpink` in the generated SCSS files.

![Variables availability in SCSS files](https://www.telerik.com/themebuilder/documentation/assets/31fdc91a0d608ca23d2918577c1c55f2/variable-types-end-project-prefixes.png)

The only exception to that rule is the **Kendo Fluent** theme, which supports CSS variables. A ThemeBuilder project based on Kendo Fluent will also contain your custom (or imported Figma) variables as CSS variables.

![Variable availability in the compiled CSS for Kendo Fluent](https://www.telerik.com/themebuilder/documentation/assets/9690ca34b04dd576ace371f99e43f225/variable-types-end-project-prefixes-fluent.png)

## Related Articles

* [Using Variables](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables)
* [Using Variable Modes](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-modes)
* [How to Manage Color Palettes](https://www.telerik.com/themebuilder/documentation/building-visual-styles/tutorials/manage-color-palettes)