Wispr Flow: AI Voice Keyboard

Colors

• #BFC1C7Safari Background Gray · top notch / chrome edge tint
• #FFFFFFWebview Canvas · browser page surface
• #FFFFFFBrowser Bar Pill · floating top and bottom toolbar pill background
• #007AFFProgress Blue · web loading progress bar
• #1C1C1EChrome Icon Charcoal · browser close and action icons · domain title

Type

• browser_domain_titleSF Pro Text · 38px · 600 · #1C1C1E

Elements

• Top In-App Browser Header · navigation_bar

  Upper viewport, height ~180px, with rounded white bar and circular controls. · Contains left circular close button, center URL label with blue loading progress bar, right tabs icon.

• Progress Line · progress_indicator

  Immediately below domain text in top header, ~360px wide track with ~40px filled active segment. · Accent bright blue horizontal line.

• Bottom Browser Toolbar · toolbar

  Bottom edge, floating circular back icon on left and right floating capsule with share and close actions. · Translucent white frosted capsules with drop shadow.

Layout

In-app browser sheet (SFSafariViewController) showing an initial blank loading state while fetching api.wisprflow.ai.

Notes

Page content has not rendered yet; only system web view chrome is active.