Interaction

A type of level to support an alternative visual treatment for when a user interacts with an element in the interface.

Examples

button.hovered.bgColor
card.grabbed.borderColor

In the above examples, the second level in each token (hovered, grabbed) describes a user interaction which is expected to modify the final presentation of the experience. This assumes that tokens for the unactivated elements’ properties also exist and are first applied.

This addition is useful when organizations require very specific presentations for when these user interactions occur.