Add Key ThemeBuilder Features (#2427)

* Add key ThemeBuilder features

* Add relevant links

Author: yordan-mitev

styling-and-themes/themebuilder.md

@@ -8,15 +8,51 @@ published: True
 position: 20
 ---
 
-# ThemeBuilder
+# Progress ThemeBuilder
 
-The [ThemeBuilder is an online tool](https://themebuilderapp.telerik.com) that enables you to create custom themes and instantly preview how the components will look. The tool generates a [CSS file that you can use in your Blazor app]({%slug themes-customize%}#loading-custom-themes) instead of a built-in theme.
+[ThemeBuilder](https://themebuilderapp.telerik.com) is a SaaS tool that enables you to create custom themes and instantly preview how they affect the appearance of the components. The tool generates a [CSS file that you can use in your Blazor app]({%slug themes-customize%}#loading-custom-themes) instead of a built-in theme.
+
+## Key Procedures
 
 Visit the [ThemeBuilder documentation](https://docs.telerik.com/themebuilder) to learn how to:
 
-* [Create a custom theme](https://docs.telerik.com/themebuilder/get-started/first-steps-theme-builder)
-* Migrate custom themes to new component versions [automatically](https://docs.telerik.com/themebuilder/web-app/automatic-migrations) or [manually](https://docs.telerik.com/themebuilder/web-app/migrating-projects)
-* [Export and use a theme in your Blazor app](https://docs.telerik.com/themebuilder/exported-package)
+* [Create a custom theme](https://docs.telerik.com/themebuilder/get-started/first-steps-theme-builder).
+* Migrate custom themes to new component versions [automatically](https://docs.telerik.com/themebuilder/web-app/automatic-migrations) or [manually](https://docs.telerik.com/themebuilder/web-app/migrating-projects).
+* [Export and use a theme in your Blazor app](https://docs.telerik.com/themebuilder/exported-package).
+
+## Key Features
+
+Whether you're developing a custom design system or applying a consistent look and feel across your applications, ThemeBuilder streamlines the process. Its features reduce the complexity of manual CSS/SASS adjustments and enable easy collaboration.
+
+### Atomic Customization
+
+ThemeBuilder gives you full control over your components' styles. From high-level settings such as color schemes and typography to detailed adjustments for specific elements and states, you can [fine-tune the look of every UI component and its parts](https://docs.telerik.com/themebuilder/building-visual-styles/apply-advanced-customizations). This flexibility ensures that your components not only look great but also match your brand's guidelines.
+
+### Custom SASS/CSS Variables
+
+Simplify your workflow with ThemeBuilder’s support for SASS and CSS variables. Create and manage multiple variables as a single source of truth for your styles—adjusting one variable updates the appearance of multiple components across your project. This ensures consistency and saves time by eliminating repetitive editing.
+
+### Custom HTML Support
+
+In ThemeBuilder, you can work not only with Telerik and Kendo UI components but also with [custom HTML elements](https://docs.telerik.com/themebuilder/building-visual-styles/custom-components). This flexibility lets you style entire web UIs, ensuring a consistent look across projects that combine your own components with the Telerik and Kendo UI controls.
+
+### Figma Integration
+
+ThemeBuilder’s [Figma integration](https://docs.telerik.com/themebuilder/plugin/installation) allows you to export Figma variables directly to SASS/CSS variables including colors, typography, metrics, and more. Designers can now collaborate seamlessly with developers, ensuring that the design intent translates perfectly into the final product.
+
+### Theme Modes and Built-In Themes
+
+ThemeBuilder comes with five built-in themes—Material, Bootstrap, Fluent, Default, and Classic—that provide a solid foundation for your design. You can also switch between [light and dark modes](https://docs.telerik.com/themebuilder/building-visual-styles/variables), enabling quick implementation of modern UI practices.
+
+Importing and mapping of Figma variables to ThemeBuilder modes is also supported.
+
+### Custom Fonts and Iconography
+
+ThemeBuilder also enables you to upload and use [custom fonts](https://docs.telerik.com/themebuilder/building-visual-styles/using-custom-fonts) and icons, making it easy to apply your brand's unique visual identity.
+
+### Project Sharing, Version Control, and Collaboration
+
+ThemeBuilder’s features such as [project sharing](https://docs.telerik.com/themebuilder/basic-project-operations/sharing-a-project), version control, and user access rights make it easy for multiple users to work together without overwriting each other’s changes. Every project can be versioned, enabling you to roll back to earlier designs and maintain a detailed history of your progress.
 
 ## See Also