Voice-First Multimodal
Also called: Voice UI, VUI, Conversational multimodal
A glowing voice orb and live waveform at the centre, big captions of what was heard, and thumb-sized buttons so speaking, tapping and reading all work.
Design keywords
Say these words to ask for this style.
Voice-First Multimodal designs for talking first and touching second. The hero of every screen is a gradient voice orb — coral to pink to violet — ringed by pulse halos that react while it listens, with a waveform beneath and large live captions that show what was heard and said. Visual UI supports the voice: answer cards, suggestion chips (“Try saying…”), and oversized 56px+ tap targets for when speaking is not possible. Deep plum backgrounds keep the orb luminous, and Lexend keeps captions effortless to read. Sound cues and haptics pair with every state change.
Best for
- Voice assistants and AI agents
- Hands-busy contexts: cooking, driving, field work
- Accessibility-first and older-user products
- Language learning and pronunciation apps
Avoid for
- Quiet shared spaces where speaking is awkward
- Dense data entry and spreadsheets
- Products with no speech backend (an orb that does nothing is a lie)
✓ Do
- Always show captions for what was heard and what is said back
- Keep every touch target ≥ 56px and offer a keyboard fallback
- Give each state a distinct orb motion (idle breathe, listening waveform, thinking rotate, speaking halo pulse), paired with a sound cue and haptic in the app
✕ Don't
- Don’t rely on audio alone — every answer must be readable
- Don’t auto-start the microphone without a clear tap
- Don’t animate the orb at full intensity when idle
Not to be confused with
On mobile
The orb and a big mic button own the home screen; captions sit right under the orb at 20px+. Every control is at least 56px, with haptic + sound on listen/stop. Reduce orb shaders to a CSS gradient and two halo rings on low-end phones.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.