Structuring Design Tokens for Interactive States

Exploring two different approaches to defining interactive state tokens: property-specific and semantic group tokens

In modern design systems, design tokens are crucial in maintaining consistency, scalability, and flexibility. One of the most critical aspects of token structuring is handling interactive states, such as hover, focus, active, and disabled. These states impact multiple UI elements—buttons, links, inputs, and more—making it essential to structure tokens in a way that balances clarity, maintainability, and adaptability.

We explore two primary approaches to defining interactive state tokens: property-specific and semantic group tokens. Each one has its advantages and challenges, and selecting the best structure depends on the needs of the design system.

Approach 1: Property-Specific Tokens

One method of defining interactive states is to create separate tokens for each UI property that can change due to user interaction. These include background color, border color, and text color.

Example Token Structure

• color-background-primary-hover

• color-border-primary-hover

• color-text-primary-hover

• color-back…