Design Tokens

A design token replaces a static value with a human-readable name and keeps the visual language in sync.

Usage Guidelines

This article presents the best practices for using design tokens and helps you to avoid some of the most common mistakes.

Use Global Design Tokens Cautiously

The purpose of the global design tokens is to set the base of the design language. Instead of providing a specific context for their intended use, they relate to the nature of the visual property that they represent.

Telerik and Kendo UI design tokens usage guidelines.
Apply the most appropriate token types by considering their intended purpose. When working with components, choose the component-specific design tokens.
Telerik and Kendo UI usage guidelines for avoiding bad practices when working with the design tokens.
Avoid using a global design token if component-specific tokens are available.

Select the Right Component-Specific Tokens

Always use the component-specific design tokens as suggested by the token's name.

Proper usage of the Telerik and Kendo UI design tokens.
Use the right component-specific tokens. The intended use of each token is defined by its name.
Do not use Telerik and Kendo UI design tokens, inteded for a specific component, in another component.
Avoid replacing component-specific tokens for one component with tokens that are intended for use in other components. For example, using the $kendo-flat-button-hover-opacity token in the secondary button can lead to unexpected results.
Feedback