Screenshot of wispr-flow

wispr-flow

wisprflow.ai

The reference for an editorial-meets-product hero: a two-tone EB Garamond serif headline at 64 to 120px (graphite first clause, ink second) on warm cream paper (#ffffeb), carried by a single soft-lavender CTA pill and orbiting transcribed-speech motion.

SaaS Product flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Eb garamond
body
Figtree
mono

Do / Don't

Reference it for

  • Two-tone display headline: split one serif line across Graphite Veil (#8a8a80) and Midnight Ink (#1a1a1a), the colour break landing mid-sentence ('Don't type,' grey / 'just speak' ink) for editorial weight
  • EB Garamond as the only display face at 64 to 120px with tight negative tracking, paired against Figtree for every label, nav, and body size (a newspaper serif over a modern UI sans)
  • Warm cream paper canvas (#ffffeb) instead of plain white, which keeps the whole page feeling like printed stock rather than a default SaaS template
  • A single soft-lavender pill CTA (#f0d7ff fill, #1a1a1a text, 14px radius, 10px/18px padding) with a 1px Midnight Ink border so it reads against cream, plus an Apple glyph prefix
  • One accent, one CTA: lavender is reserved for the primary action only, never a surface or banner, so the whole page funnels to one button
  • Structural light/dark banding: alternate full-bleed cream (#ffffeb) and Midnight Ink (#1a1a1a) sections as rhythm, never two dark bands back to back
  • Floating white nav pill (#ffffff, 14px radius, 1px Stone Mist #e4e4d0 border, soft 0 2px 8px rgba(0,0,0,0.08) lift) sitting clear of the page edges over cream
  • Decorative motion that illustrates the product: a circular text path of transcribed speech orbiting the hero, a live waveform orb, and a flowing dark ribbon of dictated text on a curve

Do not copy

  • The 'Flow' wordmark and its bar-chart/waveform icon
  • The exact bespoke palette token names and values (Cream Paper #ffffeb, Lavender Whisper #f0d7ff, Deep Forest Teal #034f46, Midnight Ink #1a1a1a) as a set
  • The orbiting transcribed-speech text path and live waveform orb (a literal signature motif for a voice product)
  • The 'Don't type, just speak' headline and the 'voice-to-text AI in every app' positioning copy
  • The 'Download for macOS' Apple-glyph CTA and the 'Available on Mac, Windows, iPhone, and Android' platform line
  • The curved arc of colourful app-icon logos sweeping across the dark feature section
  • The flat-illustration character on the testimonial logo strip
  • Client logos and case-study names lifted from the social-proof bands