# Creating and Styling Kendo Projects in ThemeBuilder
Use the workflow below to go from a base Kendo theme to precise component-level styling.
Workflow at a glance:
1. Select a base Kendo theme and swatch.
2. Optional: Generate a starting theme with AI.
3. Define reusable variables and adjust global Kendo variables.
4. Create component configurations for your design templates.
5. Use **Advanced Edit** to refine component parts and states.
## Start with a Base Theme and Swatch
When you create a new ThemeBuilder project, select the Kendo theme that matches your product. After the project is created, choose a color swatch from the **STYLES** pane to set a visual baseline for the theme. Swatches are predefined color variations for each Kendo theme and provide a fast way to align the overall palette with your design.
To select a swatch, use the dedicated drop-down button in the **STYLES** pane.
## Optional: Import Styles from Figma
If your design system lives in Figma, you can import styles and variables with the ThemeBuilder plugin for Figma. The plugin exports styles, color and number variables, SVG icons, and components so you can continue the workflow directly in ThemeBuilder. See the [ThemeBuilder Plugin for Figma Overview](https://www.telerik.com/themebuilder/documentation/plugin/overview) for details.
## Optional: Generate a Theme with AI
If you want a fast starting point, use the **Generate** tab to create a custom theme from a natural-language prompt. This option is available for projects based on Kendo Theme Q2 2025 or later. For details, see [Generate Custom Kendo Themes with AI](https://www.telerik.com/themebuilder/documentation/working-with-kendo/creating-themes-with-ai).
## Define Reusable Variables
Use variables instead of hard-coded values to keep styling consistent and easy to change.
For example, if you need to change the background colors for all components that have a `selected` state, you can create a variable called `selected-state-background` and use this variable wherever necessary.
If the design changes later, you can update the variable once instead of revisiting every component.
## Add Custom Fonts with Typography Variables
Add a custom font to the project first so it becomes available in the **Font Family** drop-down. You can manage fonts from the [Custom Fonts](https://www.telerik.com/themebuilder/documentation/building-visual-styles/managing-custom-fonts) flow and then use them across components. For detailed instructions, see [Using Custom Fonts](https://www.telerik.com/themebuilder/documentation/building-visual-styles/using-custom-fonts).
To make font updates easier to scale, create a typography variable and apply it across components.
To use a custom typeface with a variable:
1. (Optional) Add a new variable in the **Typographies** section of **THEME STYLES** by using the **+** button.
2. Select **Advanced Edit**.
3. Select the UI component that you will style.
4. In the **COMPONENTS PARTS** pane, select the part that contains text.
5. In the **PROPERTIES** pane, go to the **Text** section and select your typography variable.
## Modify Global Kendo Variables
When working with any Kendo theme, the **STYLES** pane contains predefined groups with exposed Kendo variables. These variables show the default values defined in the theme. Because all variables are editable, you can override global Kendo styles to match your design requirements.
For example, you can change the value of the `$kendo-color-primary` variable to update the primary color across all components.
To access Kendo variables:
1. Locate the variable from a selected category in the **STYLES** pane and click it.
OR
1. Open a component template in **Advanced Edit** mode.
2. Toggle on the **Component Variables Only** switch in the **STYLES** pane to access more specific component variables.
Learn more about the variable structure and usage in the following articles:
* [Supported Variable Types in ThemeBuilder](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types)
* [Working with Variables in ThemeBuilder](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables)
* [Creating Variable Modes in ThemeBuilder](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-modes)
* [Variables in Kendo Default](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/theme-variables/)
* [Variables in Kendo Bootstrap](https://www.telerik.com/design-system/docs/themes/kendo-themes/bootstrap/theme-variables/)
* [Variables in Kendo Material](https://www.telerik.com/design-system/docs/themes/kendo-themes/material/theme-variables/)
* [Variables in Kendo Fluent](https://www.telerik.com/design-system/docs/themes/kendo-themes/fluent/theme-variables/)
* [Variables in Kendo Classic](https://www.telerik.com/design-system/docs/themes/kendo-themes/classic/theme-variables/)
## Create Component Configurations
By default, ThemeBuilder lists base components with their properties set to `Default` and the base component variation selected. Styling the default template generates styles that apply globally to all instances of that component. This is useful for broad adjustments, but it is not ideal when you need specific variants that follow your design templates.
Component configurations let you create variants based on built-in Kendo properties and features (such as size, theme color, fill mode, and rounded). When you style a configuration, ThemeBuilder generates a more specific selector that targets only that configuration.
To add a component configuration:
1. In ThemeBuilder, select **Advanced Edit**.
2. Hover over the drill-down container with the desired component and select the **...** button (more options).
3. Select **Add Configuration**.
4. In the **ADD CONFIGURATION** popup:
* Enter a name for the new component variant, for example, `Primary Large Button`.
* Select the desired options from the drop-downs.
5. Select **Add Configuration** to add the new component variant.
The new configuration appears next to the default one. Use the **...** menu and **See Configuration** to review the applied options.
[Learn more about creating component configurations and duplicates](https://www.telerik.com/themebuilder/documentation/working-with-kendo/component-variants).
## Apply Advanced Customizations
After you have created the required component configurations, use **Advanced Edit** to modify the component styles. This mode turns the components pane into an infinite canvas where you can inspect and edit all UI components and their variants.
1. Select the component configuration and drill down into the template.
2. Use the **COMPONENT PARTS** pane to select the part you want to style.
3. Use the **INTERACTIVE STATES** pane to select the state (or a combination of states).
4. Use the **PROPERTIES** pane or the **STYLES EDITOR** to apply your changes.
[Learn more about using Advanced Edit](https://www.telerik.com/themebuilder/documentation/building-visual-styles/apply-advanced-customizations).
## Use Project Versioning
ThemeBuilder enables you to create a project snapshot through the versioning feature. Keeping dedicated project versions is a good practice and allows you to revert a batch of unwanted changes by quickly loading a saved snapshot.
[Learn more about creating and using project versions](https://www.telerik.com/themebuilder/documentation/basic-project-operations/manage-versions).
## Related Articles
* [Exporting and using the custom theme in your project](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package)
* [Automated Mapping of Variables from Figma](https://www.telerik.com/themebuilder/documentation/plugin/mapping-figma-varibles-to-themebuilder)
* [Fine-tuning while using declarative CSS with Styles Editor](https://www.telerik.com/themebuilder/documentation/building-visual-styles/styles-editor)
* [Demo: Creating a Button Configuration](https://www.telerik.com/themebuilder/documentation/working-with-kendo/tutorials/unique-look-button)
* [Demo: Creating a TextBox Configuration](https://www.telerik.com/themebuilder/documentation/working-with-kendo/tutorials/unique-look-textbox)
* [Demo: Modifying a Button](https://www.telerik.com/themebuilder/documentation/knowledge-base/setting-button-background)
* [Demo: Reversing a Button Icon](https://www.telerik.com/themebuilder/documentation/knowledge-base/reverse-button-icon)