Handling hover and pressed states in design systems

In design systems, hover and pressed states are essential for signaling interaction, enhancing the user experience, and guiding behavior.

You'll need four additional tokens to account for hover and pressed states across light and dark modes, for every element. This can quickly balloon the number of tokens needed in our design system.

However, managing these states across different element types - such as prominent, soft, and transparent - alongside various color schemes can quickly turn into a complex task.

We need a unified strategy to minimize the number of tokens without sacrificing clarity or consistency.

Read at Medium