Foundations
Haptics
The same event vocabulary as Sound, expressed as touch. Each event maps to the platform's native generator — never hand-rolled vibration on platforms that have semantic APIs.
Tokens
Bars show the web vibration pattern to scale (vibrate / pause milliseconds).
tap
Selection change, focus move
click
Button press, toggle, confirm
open
Dialog, sheet, panel in
close
Dialog, sheet, panel out
success
Publish, sync done
warning
Caution before destructive step
error
Validation error, rejected action
This device has no Vibration API (desktop or iOS Safari) — the pulse animation stands in for the pattern.
Platform mapping
| Event | iOS | Android | watchOS | Web |
|---|---|---|---|---|
| tap | UISelectionFeedbackGenerator | EFFECT_TICK | .click | [10] |
| click | UIImpactFeedbackGenerator(.light) | EFFECT_CLICK | .click | [18] |
| open | UIImpactFeedbackGenerator(.medium) | EFFECT_HEAVY_CLICK | .start | [12, 40, 24] |
| close | UIImpactFeedbackGenerator(.light) | EFFECT_CLICK | .stop | [24, 40, 12] |
| success | UINotificationFeedbackGenerator(.success) | EFFECT_DOUBLE_CLICK | .success | [12, 60, 24] |
| warning | UINotificationFeedbackGenerator(.warning) | EFFECT_HEAVY_CLICK | .retry | [30, 40, 30] |
| error | UINotificationFeedbackGenerator(.error) | waveform [50, 60, 50] | .failure | [50, 60, 50] |
Android values are VibrationEffect predefined constants;
web values are navigator.vibrate() patterns (unsupported on iOS Safari — fail silently).
Rules
- — Haptics accompany visual feedback, never replace it.
- — Use the platform's semantic generator, not raw vibration, wherever one exists — it respects system intensity settings.
- — Fire the haptic with its matching sound when both are on; one event, one moment.
- — Honor reduced-motion and system haptic settings; expose one in-app toggle.
- — Rarity is the point: reserve
success/warning/errorfor moments that matter, or they stop meaning anything.
Markdown for agents: /design/haptics.md · spec: /design.md