Atoms - Circuit design system

Interaction

Description

The Interaction category focuses on the foundational elements that enable user engagement within our digital interfaces. These components, such as buttons, links, and other basic interactive elements, play a crucial role in navigation and usability. This section ensures that all interaction elements are intuitive, accessible, and aligned with DEHN's brand identity to enhance the overall user experience.

General Rules

To maintain consistency and accessibility across all interactive elements, adhere to the following guidelines:

  1. Focus Visibility:
    All interactive elements must be focusable and display a visible focus state using the designated focus color: --dehn-selectyellow (#FEBC39). This ensures users navigating via keyboard or assistive technologies can easily identify their current position.

  2. Keyboard Accessibility:
    Ensure that all elements are fully operable via keyboard, following a logical tab order and using standard keys (e.g., Enter or Space for activation).

  3. Click and Tap Areas:
    Interactive elements must have a minimum touch target size of 32x32 pixels. Ensure sufficient spacing around such small touch targets to reduce the likelihood of accidental activation.

  4. Semantic HTML:
    Use proper HTML elements for interaction:

    • Buttons (<button>) for actions like submitting forms or triggering events.
    • Links (<a>) for navigation.

  5. Accessible Names:
    Provide clear and descriptive text or aria-label attributes for all interactive elements to ensure compatibility with screen readers.

  6. Hover and Active States:
    Define distinct hover and active states for all interactive components to give users clear feedback on their actions.

Clickable Surface Indication

To enhance the perception of clickable areas, use the designated interaction color DEHN off white (--dehn-offwhite, #F9F8F6). This color is applied to fully interactive surfaces such as clickable table rows, cards, and other touchable areas. By consistently using Off-White for these elements, users can intuitively recognize them as interactive components, improving usability and reinforcing visual hierarchy. Ensure that these areas also provide clear hover, focus, and active states to maintain accessibility and feedback consistency.

Content