Design Language
Interaction
⚠️

WIP - Dummy content

Interaction

Interaction States

🔄

Purpose: The Interaction States section explores the different interaction states that exist within the design system. It provides an overview of states such as normal, hover, focus, active, disabled, and more. This section explains the purpose of each state, how they communicate information to users, and how they can be combined with each other.

References:

State Tokens

🔑

Purpose: The State Tokens section focuses on the integration of state information into token names within the design system. It explains how state tokens can be used to define styles and behaviors specific to different interaction states. This section may provide examples of state tokens and their naming conventions.

References:

  • No specific references provided.

Aria-labels

Purpose: The Aria-labels section highlights the relevance of Aria-labels in conveying information to assistive technologies for different interaction states. It emphasizes the importance of providing appropriate Aria-labels for accessible interactions and provides guidelines or examples for implementing them effectively.

References:

Input Methods/Interfaces

💡

Purpose: The Input Methods/Interfaces section identifies the different interfaces through which users can interact with the products. It covers touch, keyboard, mouse, voice, motion detection, and more. For each input method, this section explains user expectations and how interactions such as hover, pressing tab, and others should be handled.

References:

Gestures

🤙

Purpose: The Gestures section focuses on non-standard or alternative interactions supported by the design system. It defines the gestures that the system supports and provides guidance on when to use each gesture. It also discusses when to use gestures instead of more "standard" interactions and may include examples or guidelines for implementing gestures effectively.

References:

Motion

🎬

Purpose: The Motion section addresses the use of motion within the design system. It provides guidance on when and where to use motion, different types of animations used, and their intended communication purposes. This section may also cover easing and duration considerations, motion token logic and structure, and any accessibility concerns related to motion.

References: