Light interfaceMeasured wisprflow.ai

Wispr Flow

A warm, handwritten-feeling notebook that turns talking into tidy text

This page is styled with Wispr Flow’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFEB
Page behind everything

Surface#FFFDF9
Cards, panels, menus

Text#1A1A1A
Headings and body

Muted text#D1D1C1
Secondary info

Line#1A1A1A
Dividers and outlines

Accent#F0D7FF
Main button, links, selection

On accent#1A1A1A
Text on the accent

Contrast

Text on background 17.2:1Muted on background 1.5:1Text on accent 13.2:1

Every colour found on their site

#1A1A1A#FFFDF9#FF6C4C#FFFFEB#FFA946#034F46#F0D7FF#E4E4D0#D1D1C1#EEEBE3

Typography

Headings use Eb garamond (free). Body text uses Figtree (free).

h1	Eb garamond · 96px · 400 · -2.88px	Don’t type,
h2	Eb garamond · 96px · 400 · -2.88px	4x faster than typing
p	Figtree · 20px · 500	The voice-to-text AI that turns speech into clear, polished

Corners & shadows

Corner sizes used

7px

pill

40px

pill

8px

80px

Shadows

Shadow 1

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Wispr Flow’s live website. Click to enlarge.

Buttons · 2

Wispr Flow button: Dictation — #FFFDF9 · corners 1600px · 32px

Wispr Flow button: Get started on Windows — #F0D7FF · corners 8px · 48px

Navigation bar · 1

Wispr Flow Navigation bar: Dictation — no fill · square · Figtree 16px

Buttons · 2

Wispr Flow Buttons: Dictation — fill #FFFDF9 · corners 1600px · Figtree 16px

Wispr Flow Buttons: Get started on Windows — fill #F0D7FF · corners 8px · Figtree 16px

Tags and badges · 1

Wispr Flow Tags and badges: Filler identified — fill #FFA946 · corners 1440px · Figtree 16px

Cards and panels · 1

Wispr Flow Cards and panels: Keyboard — no fill · corners 40px · Figtree 16px

Icons

12 icons copied exactly from their site’s code.

Product screens

9 real screens from web image search, each linked to where it was found.

Wispr Flow product screen: 2700 × 1600 — 2700 × 1600

Wispr Flow product screen: 1024 × 734 — 1024 × 734

Wispr Flow product screen: 1000 × 520 — 1000 × 520

Wispr Flow product screen: 1598 × 1052 — 1598 × 1052

Wispr Flow product screen: 4800 × 2700 — 4800 × 2700

Wispr Flow product screen: 2700 × 1700 — 2700 × 1700

Wispr Flow product screen: 960 × 2142 — 960 × 2142

Wispr Flow product screen: 847 × 512 — 847 × 512

Do & don’t

What makes it Wispr Flow

Cream-yellow background with a serif display headline mixed with a friendly sans body font
Pill-shaped buttons with thick black outlines instead of flat fills
Soft lilac/purple accent used sparingly on the main call-to-action

Pair a big serif headline with a clean sans-serif body font
Use fully rounded pill buttons with a visible dark border
Keep backgrounds warm and off-white, not stark white

Don’t

Don't use bright saturated primary colours everywhere
Don't use sharp square corners on buttons
Don't make the UI feel cold or clinical

For AltLeads: A calling CRM could borrow the warm, human tone and soft rounded buttons to make a data-heavy tool feel friendlier during long calling sessions.

Copy the tokens

Paste into any project to try this look.

/* Wispr Flow · values measured from https://wisprflow.ai/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFEB;
  --surface: #FFFDF9;
  --text: #1A1A1A;
  --muted: #D1D1C1;
  --line: #1A1A1A;
  --accent: #F0D7FF;
  --on-accent: #1A1A1A;
  --radius-button: 8px;
  --radius-card: 40px;
  --radius-small: 7px;
  --button-height: 48px;
  --font-heading: "Eb garamond", "EB Garamond", system-ui, sans-serif;
  --font-body: "Figtree", "Figtree", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 0px;
}