Wispr Flow: AI Voice Keyboard

Colors

• #FFFFFFCanvas Background · primary page background
• #2B283EBrand Icon Background · logo squircle fill
• #000000Primary Black · page heading · center action button fill
• #3D3D42Action Subtitle Gray · secondary prompt link text

Type

• page_titleSF Pro Display · 54px · 700 · #000000
• account_switch_linkSF Pro Text · 34px · normal · #3D3D42

Elements

• Flow Web App Icon · avatar_badge

  Centered above title, ~160x160px squircle. · Dark plum/navy squircle containing vertical sound wave bars in magenta/blue tones.

• Auth Confirmation Heading · heading

  Centered under icon, multi-line text 'Log in as andrewjoned@icloud.com'. · Bold centered sans-serif typography.

• Primary Action Placeholder Block · button

  Centered below heading, ~470px wide by 110px tall. · Solid black pill button container.

• Alternative Account Link · text_button

  Centered below action button, ~60px margin. · Plain dark gray body text action.

Layout

Single authentication completion card centered vertically within the browser viewport on api.wisprflow.ai, allowing the user to confirm login with the selected Apple ID.

Notes

Action button text is obscured or masked by a solid black fill.