# Voice-First 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.

- Nickname: Talk-to-it UI
- Also called: Voice UI, VUI, Conversational multimodal
- Category: Interaction‑led
- Moods: Friendly, Techy, Dreamy, Calm
- Industries: AI Products, Healthcare, Education, Fitness & Wellness, SaaS
- Style page: https://uilingo.dev/styles/voice-first-multimodal/

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

## Audit
Passed after 3 rounds · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Voice-First Multimodal" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark

## The style in one line
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: voice orb, live waveform, big live captions, pulse halo rings, listening state, “try saying” chips, oversized tap targets, coral-to-violet glow.

## Visual language
A deep plum night (#120E1F) with one living light source: a gradient voice orb — warm peach through coral-pink to violet — ringed by soft pulse halos that breathe while it listens. Beneath it a gradient waveform and large, calm captions show exactly what was heard and what is being said back. Visual UI exists to support the conversation: rounded answer cards, quoted 'try saying' chips, and oversized pill controls (56px minimum, 84px mic) that work with a thumb when speaking is not possible. Friendly Lexend type, generous spacing, nothing tiny.

## Signature details (must be visible)
- Voice orb: 168–176px circle filled with conic-gradient(#FFB36B, #FF7AA2, #C86BFF, #8E7DFF) plus a peach specular highlight top-left; halo box-shadows 0 0 0 18px rgba(255,122,162,.30) and 0 0 0 40px rgba(255,122,162,.12), outer glow 0 0 120px 30px rgba(200,107,255,.35)
- States: idle = slow 2.4s breathe (scale 1→1.06); listening = waveform bars animate scaleY; thinking = orb gradient rotates; speaking = halos pulse with the audio level. The static landing hero orb shows the idle breathe state; listening (waveform) and speaking (caption) are demonstrated in the product mock below it. Sound cues and haptics belong to the app, not the landing page
- Two waveform sizes, both a fixed list of bar heights (e.g. 12,20,32,18,40,26,14,36,22,10…) so no JS is needed: hero/featured waveform = 28 bars, 5px wide, 4px gap, heights 8–44px, one peach→pink→violet gradient across the whole set; mini waveform in pills, eyebrows, quote marks and section labels = 10 bars, 3px wide, 2px gap, heights 6–20px. Never squeeze the big waveform into a small slot. One gradient across the bars = each bar gets background: linear-gradient(90deg,#FFB36B,#FF7AA2,#8E7DFF) with background-size: <total row width> 100% and background-position: calc(var(--i) * -9px) 0 (5px bar + 4px gap), or draw the whole row as one SVG/mask. Only the hero eyebrow mini waveform and the mock's 28-bar caption waveform animate (scaleY, 1.1s, inside prefers-reduced-motion: no-preference); testimonial and section-label waveforms stay static
- Captions: 'You said' label in muted 1rem, then the transcript at 1.4–1.55rem weight 500 with the key phrase highlighted in pink
- Touch targets: every control ≥ 56px (64px large buttons, 84px mic), inputs 56px, chips 48px, list rows 72px, switches 60×36; FAQ toggles are 56px round surface buttons
- Primary actions use a gradient pill (accent → primary → secondary) with text #1E0712 and a pink glow shadow. Glow budget: only the orb, the mic and primary buttons glow; cards and steps get no coloured glow
- Type and icons: no mono font in this style; use Lexend with font-variant-numeric: tabular-nums for numerals and Arabic digits in step discs. Inline SVG icons (1.75px stroke, round caps) are allowed for mic, keyboard and close

## Design tokens — use these exact values
Colours (dark mode):
  - background #120E1F
  - surface #1D1731
  - surface-2 #181329
  - text #F6F3FF
  - text-muted #B6ADD1
  - primary #FF7AA2 (text on it #1E0712)
  - secondary #8E7DFF (text on it #0D0820)
  - accent #FFB36B
  - border rgba(214,200,255,0.16)
  - success #5EE0A8 · warning #FFC46B · danger #FF7A7A
  - chart series #FF7AA2, #8E7DFF, #FFB36B, #5EE0E0, #F6F3FF
Radius: sm 12px, md 18px, lg 26px, xl 34px, pill 999px
Border width: 1px
Shadows: sm `0 2px 8px rgba(8,4,20,0.3)`, md `0 14px 40px -12px rgba(8,4,20,0.6)`, lg `0 30px 80px -20px rgba(255,90,150,0.35)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1.15 density
Motion: 300ms cubic-bezier(.3,1.4,.5,1)

## Typography (Latin + Thai)
- Headings: Lexend 500/600 with Thai fallback Mitr 500/600
- Body: Lexend 300/400/500 with Thai fallback IBM Plex Sans Thai Looped 400/500
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600&family=Mitr:wght@500;600&family=IBM+Plex+Sans+Thai+Looped:wght@400;500&display=swap
- CSS stacks: heading `"Lexend", "Mitr", system-ui, sans-serif`; body `"Lexend", "IBM Plex Sans Thai Looped", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.6rem, 5.6vw, 4.6rem), heading weight 600, heading tracking -0.02em (Latin only), sentence-case labels.
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Mitr’s rounded, sturdy forms echo Lexend’s friendly geometry for headings, while looped IBM Plex Sans Thai gives captions the most legible Thai letterforms at a glance.

## Components
- Primary button: 56px pill, gradient #FFB36B → #FF7AA2 → #8E7DFF, text #1E0712, glow 0 10px 30px -10px; 3px amber focus ring with 3px offset
- Mic button: 84px orb-filled circle, white mic icon, 10px pink halo, breathing
- Secondary/round icon buttons: 56px surface circles with hairline lavender border (keyboard fallback, close)
- Eyebrow 'status pill': surface pill containing the mini waveform (10 bars, 3px wide) then the label
- Answer card: 26px radius surface card with a status badge, title, meta and a full-width primary action; detail rows inside the answer card are 56px (72px applies to standalone list rows)
- Landing hero mock: a caption card ('You said' + the transcript with the key phrase in pink + the 28-bar waveform) beside an answer card with a full-width gradient button, two 'try saying' chips and a control row (keyboard 56px, mic 84px, close 56px)
- Try-saying chips: 48px outline pills with the prompt in pink quotation marks
- Inputs: 56px, 18px radius, sunken plum; the dashboard search ends in a small orb (tap to speak)
- Steps: orb-filled 56px number discs with no halo or coloured glow
- Mobile tab bar: floating capsule; active tab icon sits in a 52px orb disc

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → features → steps → testimonials → faq → cta. Feature section as grid.
Centered hero: the orb sits above the headline with its halos, an eyebrow pill with a live waveform, a large caption-style lead (1.3rem Lexend 300 for Latin; the Thai lead uses IBM Plex Sans Thai Looped 400 at line-height 1.8, because the Thai face has no 300) and gradient pill CTAs; the product mock follows below as a conversation, not a chart: caption card on the left, answer card, chips and control row on the right. Sections are spacious: feature cards with 48px round icons tinted primary at 14% on the surface, with a 1px primary-30% inner ring and NO glow, steps with orb numerals, testimonials set as captions with a waveform mark, a FAQ with 56px round surface toggles and a CTA panel crowned by a small orb. Dashboards keep the large targets: 52px pill nav items, 18px-padded table rows, and a voice orb in the search field.

## Content
Use realistic product copy (fictional brand) suited to: Voice assistants and AI agents. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## 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
- Audio-only answers with no captions or text
- Small 32–40px controls or dense lists
- A quiet text-only screen with no orb — that is Zero Interface
- Typed chat bubbles as the primary pattern — that is AI-Native UI
- Full-page colour ribbons in the background — keep the glow concentrated in the orb
- Auto-starting the microphone or an orb that animates hard while idle

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Voice-First Multimodal" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```