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.

“Talk-to-it UI”Interaction‑ledEra: 2023 → today (realtime voice AI)FriendlyTechyDreamyCalm

Open full screen ↗

voice-first-multimodal / landingEN

voice-first-multimodal / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm12pxRadius md18pxRadius lg26pxRadius xl34pxDensity×1.15Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

voice orblive waveformbig live captionspulse halo ringslistening state“try saying” chipsoversized tap targetscoral-to-violet glow

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

Zero Interface →Zero Interface is quiet text on paper with one input; Voice-First makes a luminous orb, waveform and big captions the centre of the screen.AI-Native UI →AI-Native UI is a typed chat transcript with prompt bar and agent cards; Voice-First is built around speaking, listening states and captions.Aurora UI →Aurora UI spreads colour ribbons across the whole background; Voice-First concentrates its glow into one reactive orb.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinLexend · 500/600

The quick brown fox

Heading · ThaiMitr · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLexend · 300/400/500

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai Looped · 400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 12px · md 18px · lg 26px · xl 34px · pill 999px`
Border	`1px`
Shadow	`0 14px 40px -12px rgba(8,4,20,0.6)`
Display	`clamp(2.6rem, 5.6vw, 4.6rem)`
Motion	`300ms cubic-bezier(.3,1.4,.5,1)`
Density	`×1.15`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Voice-First Multimodal (voice-first-multimodal) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 26px;
  --background: #FBF8FF;
  --foreground: #1B1530;
  --card: #FFFFFF;
  --card-foreground: #1B1530;
  --popover: #FFFFFF;
  --popover-foreground: #1B1530;
  --primary: #C2185B;
  --primary-foreground: #FFFFFF;
  --secondary: #5B44E0;
  --secondary-foreground: #FFFFFF;
  --muted: #F3EEFF;
  --muted-foreground: #5D5578;
  --accent: #F3EEFF;
  --accent-foreground: #1B1530;
  --destructive: #C62828;
  --border: #E4DCF5;
  --input: #E4DCF5;
  --ring: #C2185B;
  --chart-1: #C2185B;
  --chart-2: #5B44E0;
  --chart-3: #E07A1F;
  --chart-4: #0E9AA7;
  --chart-5: #1B1530;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1B1530;
  --sidebar-primary: #C2185B;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3EEFF;
  --sidebar-accent-foreground: #1B1530;
  --sidebar-border: #E4DCF5;
  --sidebar-ring: #C2185B;
}

.dark {
  --background: #120E1F;
  --foreground: #F6F3FF;
  --card: #1D1731;
  --card-foreground: #F6F3FF;
  --popover: #1D1731;
  --popover-foreground: #F6F3FF;
  --primary: #FF7AA2;
  --primary-foreground: #1E0712;
  --secondary: #8E7DFF;
  --secondary-foreground: #0D0820;
  --muted: #181329;
  --muted-foreground: #B6ADD1;
  --accent: #181329;
  --accent-foreground: #F6F3FF;
  --destructive: #FF7A7A;
  --border: rgba(214,200,255,0.16);
  --input: rgba(214,200,255,0.16);
  --ring: #FF7AA2;
  --chart-1: #FF7AA2;
  --chart-2: #8E7DFF;
  --chart-3: #FFB36B;
  --chart-4: #5EE0E0;
  --chart-5: #F6F3FF;
  --sidebar: #1D1731;
  --sidebar-foreground: #F6F3FF;
  --sidebar-primary: #FF7AA2;
  --sidebar-primary-foreground: #1E0712;
  --sidebar-accent: #181329;
  --sidebar-accent-foreground: #F6F3FF;
  --sidebar-border: rgba(214,200,255,0.16);
  --sidebar-ring: #FF7AA2;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Voice-First Multimodal (voice-first-multimodal) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FBF8FF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3EEFF;
  --color-text: #1B1530;
  --color-text-muted: #5D5578;
  --color-primary: #C2185B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #5B44E0;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B85C00;
  --color-border: #E4DCF5;
  --color-success: #0F8A5F;
  --color-warning: #9A6200;
  --color-danger: #C62828;
  --color-chart-1: #C2185B;
  --color-chart-2: #5B44E0;
  --color-chart-3: #E07A1F;
  --color-chart-4: #0E9AA7;
  --color-chart-5: #1B1530;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(8,4,20,0.3);
  --shadow-md: 0 14px 40px -12px rgba(8,4,20,0.6);
  --shadow-lg: 0 30px 80px -20px rgba(255,90,150,0.35);
  --font-heading: "Lexend", "Mitr", system-ui, sans-serif;
  --font-body: "Lexend", "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai Looped", monospace;
}

.dark {
  --color-bg: #120E1F;
  --color-surface: #1D1731;
  --color-surface-2: #181329;
  --color-text: #F6F3FF;
  --color-text-muted: #B6ADD1;
  --color-primary: #FF7AA2;
  --color-on-primary: #1E0712;
  --color-secondary: #8E7DFF;
  --color-on-secondary: #0D0820;
  --color-accent: #FFB36B;
  --color-border: rgba(214,200,255,0.16);
  --color-success: #5EE0A8;
  --color-warning: #FFC46B;
  --color-danger: #FF7A7A;
  --color-chart-1: #FF7AA2;
  --color-chart-2: #8E7DFF;
  --color-chart-3: #FFB36B;
  --color-chart-4: #5EE0E0;
  --color-chart-5: #F6F3FF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Voice-First Multimodal (voice-first-multimodal). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            1
          ],
          "hex": "#fbf8ff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            1
          ],
          "hex": "#f3eeff"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0824,
            0.1882
          ],
          "hex": "#1b1530"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3647,
            0.3333,
            0.4706
          ],
          "hex": "#5d5578"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.0941,
            0.3569
          ],
          "hex": "#c2185b"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2667,
            0.8784
          ],
          "hex": "#5b44e0"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.3608,
            0
          ],
          "hex": "#b85c00"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.8627,
            0.9608
          ],
          "hex": "#e4dcf5"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.5412,
            0.3725
          ],
          "hex": "#0f8a5f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3843,
            0
          ],
          "hex": "#9a6200"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.1569,
            0.1569
          ],
          "hex": "#c62828"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.0941,
            0.3569
          ],
          "hex": "#c2185b"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2667,
            0.8784
          ],
          "hex": "#5b44e0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.4784,
            0.1216
          ],
          "hex": "#e07a1f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.6039,
            0.6549
          ],
          "hex": "#0e9aa7"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0824,
            0.1882
          ],
          "hex": "#1b1530"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0549,
            0.1216
          ],
          "hex": "#120e1f"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.0902,
            0.1922
          ],
          "hex": "#1d1731"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.0745,
            0.1608
          ],
          "hex": "#181329"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9529,
            1
          ],
          "hex": "#f6f3ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.6784,
            0.8196
          ],
          "hex": "#b6add1"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.6353
          ],
          "hex": "#ff7aa2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0275,
            0.0706
          ],
          "hex": "#1e0712"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.4902,
            1
          ],
          "hex": "#8e7dff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.0314,
            0.1255
          ],
          "hex": "#0d0820"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.702,
            0.4196
          ],
          "hex": "#ffb36b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.7843,
            1
          ],
          "hex": "#d6c8ff",
          "alpha": 0.16
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.8784,
            0.6588
          ],
          "hex": "#5ee0a8"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7686,
            0.4196
          ],
          "hex": "#ffc46b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.4784
          ],
          "hex": "#ff7a7a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.6353
          ],
          "hex": "#ff7aa2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.4902,
            1
          ],
          "hex": "#8e7dff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.702,
            0.4196
          ],
          "hex": "#ffb36b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.8784,
            0.8784
          ],
          "hex": "#5ee0e0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9529,
            1
          ],
          "hex": "#f6f3ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 34,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0314,
              0.0157,
              0.0784
            ],
            "hex": "#080414",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0314,
              0.0157,
              0.0784
            ],
            "hex": "#080414",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              0.3529,
              0.5882
            ],
            "hex": "#ff5a96",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": -20,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "IBM Plex Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 300,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      1.4,
      0.5,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.15
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!