Wispr Flow: AI Voice Keyboard

Colors

• #A4A7ADDimming Scrim · backdrop overlay above web sheet
• #F2F2F7Sheet Card Background · modal bottom sheet background
• #E5E5EARow Container Background · name input field container · email selection group background
• #007AFFApple Blue · primary cta fill · checkmark circle · text action link
• #000000Primary Text Black · sheet title · field labels · account text
• #6C6C70Secondary Text Gray · field value · subtitles

Type

• sheet_titleSF Pro Display · 48px · 700 · #000000
• body_descriptionSF Pro Text · 34px · normal · #000000
• field_labelSF Pro Text · 36px · 500 · #000000
• field_valueSF Pro Text · 30px · normal · #6C6C70
• primary_ctaSF Pro Text · 38px · 600 · #FFFFFF
• footer_actionSF Pro Text · 34px · normal · #007AFF

Elements

• Sign In with Apple Sheet · bottom_sheet

  Bottom-pinned modal card, ~1036px wide spanning from lower half of screen. · Off-white rounded card with top radius, containing Apple ID identity configuration.

• Close Modal Button · icon_button

  Top right of sheet, circular button with 'X' glyph. · Dark gray round icon with cross symbol.

• Account Clarification Block · card

  Below header in sheet, contains Apple logo on left and account message on right. · White rounded rect container with black Apple icon and descriptive text.

• Name Input Row · input_group

  Below account block, ~180px tall full width inside margins. · Light gray rounded container with user icon avatar, label, name, and clear button.

• Email Options Group · segmented_selection

  Below name row, grouped container with Share My Email and Hide My Email rows. · Light gray rounded container with internal hairline divider, mail icon, and selected blue checkmark circle.

• Continue with Passcode Button · button

  Lower area of modal sheet, ~650px wide by 124px tall, centered pill. · Vibrant solid blue fill with centered white typography.

Layout

Standard iOS modal half-sheet for 'Sign in with Apple' overlaid on dimmed Safari browser context.

Notes

Native Apple system authorization sheet UI components.