Foundation / Mobile

Gesture Pattern Library

Interaction patterns for touch surfaces. Every gesture has a defined threshold, a color-semantic response, and a haptic signal. These patterns apply to treasury dashboards, approval queues, and agent notification feeds on mobile.

Quick Reference

Gesture Thresholds

Swipe dismiss

40% width or 120px

Swipe action reveal

72px displacement

Pull-to-refresh trigger

64px downward pull

Long press

500ms, <8px movement

Pinch zoom activate

±10% scale change

Touch target minimum

44×44px

Rule

44×44px minimum touch target (WCAG 2.5.5). All interactive elements on mobile must meet this minimum. The DS enforces this via @media (pointer: coarse) in tokens/responsive.css.

Gesture Patterns

Interaction Specifications

Anti-Patterns

What Not to Do

Gesture ambiguity

ProblemTwo gestures on the same element trigger on overlapping conditions (e.g., swipe-dismiss and swipe-action both active at 72px)

FixPick one swipe pattern per element. Swipe-dismiss is for full removal; swipe-action is for contextual operations. Never both.

Silent dismissal

ProblemSwipe-dismiss deletes without undo, giving users no recovery path in an approval queue or transaction feed

FixAlways buffer dismiss actions with a 5s undo toast using the DS Toast component. Never immediate delete.

Competing scroll and swipe

ProblemHorizontal swipe on a row inside a horizontal scroll container — gesture conflict causes accidental scrolling instead of action

FixSwipe-to-action must only live in vertically-scrolling lists. Never inside a horizontal scroll container.

Pinch on text

ProblemIntercepting pinch-zoom on text content fights the OS native zoom, which is an accessibility requirement

FixOnly intercept pinch in designated zoomable chart/data containers. Allow native zoom everywhere else.

No haptic at threshold

ProblemUser must rely solely on visual feedback to know a gesture has crossed a threshold — poor experience in bright sunlight or distracted contexts

FixUse navigator.vibrate() at every gesture threshold crossing. Map to haptic types per the DS Haptic Feedback guide.