Interaction
Consistent interaction patterns build user confidence. This page defines hover, focus, and active states, touch target sizes, gesture conventions, and keyboard navigation rules.
Interactive States
Every interactive element must express all five states below. Never suppress hover or focus styles — doing so breaks keyboard navigation and assistive technology.
defaulthoveractivefocusdisabledHover
--surface-hoverApplied on cursor enter. Transition at 150ms ease-out. Use background fill, not border change.
Active / Pressed
--surface-raisedApplied on mousedown or touchstart. Often a slight scale reduction (scale: 0.97) for buttons.
Focus (keyboard)
--nav-active-color3px ring at 33% opacity. Never use outline: none without a custom focus style. WCAG 2.2 requires visible focus.
Disabled
opacity: 0.45Reduces opacity — do not change the colour of individual elements. The element must still be visible enough to understand what it was.
Touch Targets
WCAG 2.2 requires a 24×24px minimum touch target for all interactive elements; Sitka sets 44×44px as the baseline. If the visual element is smaller (e.g. an icon), expand the hit area invisibly using padding or a pseudo-element.
/* Expand hit area without affecting layout */
.icon-button {
padding: 10px; /* visual icon 24px → hit area 44px */
min-width: 44px; min-height: 44px;
}
Gesture Patterns (iOS)
Use platform-native gestures for their established meanings. Inventing custom gestures increases cognitive load and removes discoverability.
| Gesture | Use for |
|---|---|
| Tap | Activate buttons, links, toggles |
| Long press | Context menus, selection mode on list items |
| Swipe left | Reveal destructive actions (delete, archive) |
| Swipe right | Reveal secondary actions (reply, star) |
| Pull to refresh | Reload content in scrollable lists only |
| Pinch | Zoom — images and maps only |
| Drag | Reorder only — avoid for navigation |
Keyboard Navigation
All interactive functionality must be reachable by keyboard alone. Implement the keyboard shortcuts below consistently across all products.
| Key | Action |
|---|---|
| Tab / Shift+Tab | Move focus forward / backward through interactive elements |
| Enter / Space | Activate the focused button or link |
| Escape | Close modals, drawers, dropdowns, and popovers |
| Arrow keys | Navigate within a component (radio group, tabs, menu) |
| Home / End | Jump to first / last item in a list or menu |
| Ctrl+K / ⌘K | Open the command palette |
Principles
Predictable, not surprising
Interactive elements behave the way users have learned to expect. Reserve creative interactions for the edges of the interface, not the core tasks.
Feedback within 100ms
Users perceive responses under 100ms as instantaneous. Hover and active states must appear immediately. Loading states should appear within 300ms.
No interaction-only affordances
If an element is interactive, it must look interactive. Don't rely on hover to reveal that something is clickable.