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.

Apply the most appropriate token types by considering their intended purpose. When working with components, choose the component-specific 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.

Use the right component-specific tokens. The intended use of each token is defined by its name.
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.