Voice-First Multimodal

Stylegeneral

Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition. Best for Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps.

Voice UI multimodal audio feedback conversational hands-free ambient contextual speech recognition

#FAFAFA

#6B8FAF

#9B8FBB

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Voice-First Multimodal

Keywords: Voice UI, multimodal, audio feedback, conversational, hands-free, ambient, contextual, speech recognition
Primary colours: Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB
Secondary colours: Audio waveform colors, status indicators (listening/processing/speaking), success/error tones
Effects & animation: Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions
Best for: Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps
Do not use for: Visual-heavy content, data entry, complex forms, noisy environments

## Prompt keywords
Design a voice-first multimodal interface. Use: voice waveform visualization, listening state indicator, speaking animation, minimal visible UI, audio feedback cues, hands-free optimized, conversational flow, ambient design.

## CSS / technical
Web Speech API integration, canvas for waveform, animation: pulse for listening, status indicators (color change), audio visualization (Web Audio API), minimal chrome, large touch targets

## Implementation checklist
☐ Voice recognition works, ☐ Visual feedback clear, ☐ Listening state obvious, ☐ Speaking animation smooth, ☐ Fallback UI provided, ☐ Accessibility excellent

## Design system variables
--listening-color: #6B8FAF, --speaking-color: #22C55E, --waveform-height: 60px, --pulse-duration: 1.5s, --indicator-size: 24px, --voice-accent: #9B8FBB

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source