Interface Sound
Treat short interface sounds like motion design: purposeful, stateful, and restrained.
The Velvet UI demo asks what interface sound would feel like if handled with the same care as motion. The useful pattern is not "add audio everywhere"; it is a design-system primitive: a small set of sounds for confirmation, warning, transition, and completion, tuned to the product's interaction rhythm. Source: Velvet UI, 2026-06-24
Routing Summary
Use interface sound only as a restrained sensory polish layer after the core interaction is correct. Route design through design-engineering-polish and implementation through elevenlabs-sfx / @web-kits/audio when sounds need to be generated or played in-app.
Design Rule
Use sound only when it clarifies state, reduces uncertainty, or makes completion legible without forcing visual attention. It belongs with haptics and motion in the polish layer, not with notification spam.
Moment Vocabulary
Velvet's useful contribution is an event grammar for interface audio: state on/off, arrival, confirmation, and failure, each rendered through a consistent product voice. The demo exposes three voice directions -- Signature as balanced/quiet, Velvet as warm/soft, and Crisp as sharp/precise -- so the design decision is brand tone first, not random per-control effects. Source: Velvet UI, 2026-07-03 review
| Moment | Design intent |
|---|---|
| State on/off | Make toggles and mode changes legible without making sound the only signal. |
| Arrival | Confirm that a notification or surface appeared, without announcement spam. |
| Confirmation | Make commitment feel settled, especially after booking, saving, or completing. |
| Failure | Inform without punishment; pair with visible recovery state. |
Rules
The first exposed rule is voluntary sound: mute is visible, persistent, and remembered. Treat generated sound as a bonus layer, never the message; the UI must still work silently. Source: Velvet UI, 2026-07-03 review
X Artifact
- Local demo media: thumbnail; video remains available in the original tweet/enriched source record.
Timeline
- 2026-07-03 | Deep-reviewed the local Velvet UI thumbnail and live demo. Added moment vocabulary for state, arrival, confirmation, and failure sounds, plus the opt-in/mute rule for silent-safe interaction design. Source: Velvet UI; Source: local artifact review, 2026-07-03
- 2026-06-24 | Captured Velvet UI interface-sound demo and promoted it as a design-system primitive. Source: X/@eledure, 2026-06-24