Color Swatch
The Color Swatch is a foundational element of the Color System, providing a structured framework for managing color variable groups throughout the theme.
Simply put, all themes have swatches, which are color variations of the theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different.
A swatch consists of colors that belong to several color variable groups. Each variable group includes ten distinct colors that are tailored for particular usage scenarios, ensuring a consistent application. Swatches are designed to adapt and align with your desired aesthetic, enabling you to manage the theme's appearance and feel precisely to match your style preferences.
The color variable groups below are applicable to multiple themes. The specific color values serve as an example and belong specifically to the Telerik and Kendo UI Default theme.
Core Variable Groups
The Core variable group are the foundational color variables that define the distinctive character and tone of the Telerik and Kendo UI Default theme. These variable groups are the essential building blocks for creating an intuitive, accessible, and visually engaging user experience.
Main Variable Group
The Main variable group is a collection of colors that form the backbone of your application's visual design. It includes versatile hues for the application's background, text, component chrome areas, and borders, each selected to create a cohesive and intuitive user interface.
The colors for the Main variable group are taken from the Gray Palette and consist of the following colors:
Below is a detailed description of each variable:
app-surface—The background color of the application (the background color of the<body>element).on-app-surface—The text color of the application.subtle—A subtle text color.surface—The background color of the components' chrome area (also: the non-client area).surface-alt—The alternative background color of the components' chrome area (also: the non-client area).border—Тhe border color used in the application.border-alt—The alternative border color used in the application (predominantly used for border color in hover state).
Base Variable Group
The Base variable group in the Telerik and Kendo UI Default theme is used for components with a fixed, single-color scheme that form the core of the user interface and provide a uniform background. This monochromatic base, when contrasted with vibrant primary actions, helps to direct the user's focus. It creates a clear visual hierarchy that differentiates between the neutral and accent elements within the user interface, improving user interaction and the overall coherence of the design.
The colors for the Base variable group are taken from the Gray Palette.
Primary Variable Group
The Primary variable group in the Telerik and Kendo UI Default theme reflects the theme's identity and provides the accent color of the theme. This variable group is used sparingly to guide the eye and highlight important bits such as buttons, links, and active states.
The colors for the Primary variable group are taken from the Coral Palette.
Secondary Variable Group
The Secondary variable group in the Telerik and Kendo UI Default theme uses colors that are fully desaturated. This allows you to combine it with any other color or group.
The colors for the Secondary variable group are taken from the Gray Palette.
Tertiary Variable Group
The Tertiary variable group in the Telerik and Kendo UI Default theme is used less frequently than the Primary and Secondary variable groups. It indicates independent, less pronounced, common actions throughout the user interface.
The colors for the Tertiary variable group are taken from the Sky Blue Palette.
Light Variable Group
The Light variable group in the Telerik and Kendo UI Default theme presents a spectrum of bright, yet gentle colors, ideal for light theme modes. These hues provide a clean and understated background, enhancing the overall user interface by complementing, rather than overshadowing, the primary design elements.
The colors for the Light Variable Group are taken from the Gray Palette.
Dark Variable Group
The Dark variable group in the Telerik and Kendo UI Default theme offers a selection of deep, rich colors ideal for dark theme modes. These shades create a striking background that adds depth and contrast to the interface, emphasizing primary elements while ensuring readability and visual comfort in low-light environments.
The colors for the Dark variable group are taken from the Gray Palette.
Inverse Variable Group
The Inverse variable group in the Telerik and Kendo UI Default theme is designed to automatically switch between black and white, ensuring optimal contrast in varying design contexts.
The colors for the Inverse variable group are taken from the Gray Palette.
Informational Variable Groups
The Telerik and Kendo UI Default theme features four informational variable groups—Error, Info, Success, and Warning. These variable groups use color to convey specific meaning and play a crucial role in enhancing user comprehension and interaction.
Info Variable Group
The Info variable group in the Telerik and Kendo UI Default theme is designated to convey informational messages and elements within the interface. Its distinct hue draws attention to alerts, notifications, and other informative components.
The colors for the Info variable group are taken from the Blue Palette.
Success Variable Group
The Success variable group in the Telerik and Kendo UI Default theme features colors that signify successful actions or confirmations in the interface, effectively communicating positive outcomes and feedback to users.
The colors for the Success variable group are taken from the Green Palette.
Warning Variable Group
The Warning variable group in the Telerik and Kendo UI Default theme uses a distinct color to highlight warnings or cautionary notices, ensuring users are immediately aware of potential issues or important considerations within the interface.
The colors for the Warning variable group are taken from the Yellow Palette.
Error Variable Group
The Error variable group in the Telerik and Kendo UI Default theme employs a prominent color to clearly indicate errors or problems within the interface, drawing immediate attention to areas that require user action or correction.
The colors for the Error variable group are taken from the Red Palette.
DataViz Variable Groups
The DataViz variable group present a collection of six colors, which are specifically tailored for data visualization purposes and for seamless integration with the Telerik and Kendo UI Default theme's overall color scheme. These swatches offer an expanded variety of colors that enhance the clarity and readability of charts and graphs, making it an essential tool for effective data presentation.
Series A Variable Group
The colors for the Series A variable group are taken from the Coral Palette.
Series B Variable Group
The colors for the Series B variable group are taken from the Lemon Yellow Palette.
Series C Variable Group
The colors for the Series C variable group are taken from the Spring Green Palette.
Series D Variable Group
The colors for the Series D variable group are taken from the Royal Blue Palette.
Series E Variable Group
The colors for the Series E variable group are taken from the Lavender Purple Palette.
Series F Variable Group
The colors for the Series F variable group are taken from the Flamingo Pink Palette.
Theme-Specific Variables
For specific information about the color system, refer to the theme-specific variables list:
