In design systems, hover and pressed states are essential for signaling interaction, enhancing the user experience, and guiding behavior.
They offer immediate feedback when users interact with buttons, links, and other elements, making the interface feel intuitive and responsive.
However, managing these states across different element types — such as prominent, soft, and transparent — alongside various color schemes (neutral and semantic) and modes (light and dark) can quickly turn into a complex task.
You’ll find yourself creating multiple color tokens for each variant, adding unnecessary complexity.
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.
We need a unified strategy to minimize the number of tokens without sacrificing clarity or consistency.
In this guide, we’ll show you how to reduce the number of hover and pressed state tokens to just six, while ensuring every interactive element gets the proper feedback.
Leave a Reply