Lavender Whisper
#f0d7ffPrimary CTA fill, accent card surfaces — soft pink-lavender that signals the one clickable thing on any page without ever shouting
Wispr Flow
wisprflow.aiWebsite preview
The design language
Wispr Flow reads like an editorial broadsheet rebuilt for software: a warm cream canvas (#ffffeb) hosts weight-400 Eb Garamond at display sizes (48–120px) that commands through sheer scale rather than weight, while Figtree handles every interactive surface. Pages alternate between bright cream chambers and deep near-black rooms, separated by 2px ink borders and oversized corner radii (40–80px) that make each section feel rounded like a polished pebble. The palette stays disciplined to four working colors — cream, black, lavender (#f0d7ff) for primary actions, and forest teal (#034f46) for inner accents — with an occasional ember orange (#ffa946) punctuating active states.
Color palette
brand
Forest Ink
#034f46Secondary brand surface — teal pill badges, inner dark-panel cards, secondary buttons against dark backgrounds
accent
Ember Glow
#ffa946Live/active state accent — notification dots, active mic indicators, occasional badge highlights
neutral
Vast Ink
#1a1a1aPrimary text, button borders, dark section/card backgrounds — the dominant near-black that defines every dark chamber
Lumen Cream
#ffffebDominant page canvas, card surfaces, button fills, light text on dark — warm off-white that reads as paper, not screen
Lumen Stone
#e4e4d0Subtle borders, nav pill background, muted dividers — one shade darker than the cream canvas for low-contrast separation
Fog
#8a8a80Muted captions, helper text, and de-emphasized UI labels.
Charcoal
#222222Secondary button text and nav text — slightly lighter than Vast Ink for less critical text
Pure White
#ffffffBadge borders on dark surfaces, light text on color, SVG icon strokes
Typography
Type scale
Minor Third (1.2) · 18px basedisplay
120px · 400 · 0.85 · -3.6px trackingThe quick brown fox jumps
heading-lg
64px · 400 · 0.95 · -1.92px trackingThe quick brown fox jumps
heading
48px · 400 · 0.95 · 0px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.3 · -0.96px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.3 · 0px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.3The quick brown fox jumps
body
20px · 400 · 1.3 · 0px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.3 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Eb Garamond
- Weights
- 400
- Sizes
- 32px, 48px, 64px, 120px
- Line height
- 0.85–1.3
- Letter spacing
- -3.6px at 120px, -1.92px at 64px, -0.96px at 32px
- Fallback
- EB Garamond, Cormorant Garamond, Playfair Display
Display and editorial headings — classical serif at regular weight, used at massive sizes (up to 120px) where weight 400 commands through scale alone. The 0.85–0.95 line-height at display sizes tightens lines into a single horizontal gesture. Subtitle: 'EB Garamond' (Google Fonts) or 'Cormorant Garamond' as alternative
Additional typeface
Figtree
- Weights
- 400, 500, 600, 700
- Sizes
- 14px, 16px, 20px, 22px, 24px, 32px
- Line height
- 1.3
- Fallback
- Inter, Plus Jakarta Sans, Manrope
Body text, UI labels, navigation, buttons, badges — geometric sans at weight 400 as default body, 500–700 for emphasis. The 1.3 line-height across all sizes gives comfortable rhythm without excess leading. 16px is the workhorse size (freq=716).
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 32px
- Element gap
- 8-16px
Border radius
cards
32pxbadges
9999pxinputs
12pxbuttons
12pxsections
40-80pxSpacing scale
2px3px4px8px10px11px12px14px16px24px32px36px40px48px50px53px55px56px64px70px80px94px96px103px104px128px140px168px177px185px236px256px289pxGuidelines
Do
- Use Lavender Whisper #f0d7ff as the sole primary action color — never substitute blue, green, or any other hue for CTAs
- Set display headlines in Eb Garamond weight 400 (not bold) — authority comes from 64–120px scale, not font weight
- Apply 2px solid #1a1a1a borders to all interactive elements — the thick border is a signature, not optional
- Alternate cream #ffffeb and dark #1a1a1a sections page-wide — every dark chamber should be bookended by cream
- Use 32px border-radius on standard cards and 40–80px on dark section cards — never use 4px or 8px on content blocks
- Use Figtree 400 as the default body weight; reserve 600–700 for nav items, badges, and button labels
- Pair #f0d7ff (active/accent) with #034f46 (secondary) — these two brand colors are complementary, not alternatives
Don’t
- Do not use bold or weight 700 for display headlines — the serif whispers at weight 400 and commands through size alone
- Do not use box-shadow for card elevation — this design is border-driven; shadows break the editorial flatness
- Do not introduce blue, green, or any non-palette accent color for actions, links, or highlights
- Do not use border-radius below 12px on buttons or below 32px on cards — small radii clash with the oversized chamber geometry
- Do not use gradient fills — the palette is flat; gradients dilute the editorial discipline
- Do not center body text — body copy and subtitles should be left-aligned or follow a strict measure, not centered blocks
- Do not place cream content on cream canvas without a border or background change — the palette needs contrast separation
Components
Primary CTA Button
The main download/purchase action on every pageFill: #f0d7ff Lavender Whisper. Text: #1a1a1a Vast Ink. Border: 2px solid #1a1a1a. Border-radius: 12px. Padding: 14px 14px (compact) or 16px 24px (standard). Font: Figtree 500, 16px. Includes Apple/platform icon prefix. The 2px border is non-negotiable — it gives the soft lavender a defined edge.
Outlined Secondary Button
Secondary actions: 'Try Flow', 'Watch in action'Fill: #ffffeb Lumen Cream. Text: #1a1a1a Vast Ink. Border: 2px solid #1a1a1a. Border-radius: 12px. Padding: 16px 24px. Font: Figtree 500, 16px. Matches the CTA's border weight and radius for visual kinship.
Ghost/Text Button
Tertiary actions, inline links in copyNo background. Text: #1a1a1a Vast Ink. No border. Padding: variable. Font: Figtree 400, 16px. Underline on hover. Used for navigation and low-priority links.
Floating Navigation Pill
Top-of-page navigation barContainer: cream pill (#ffffeb) with 9999px border-radius, 2px solid #1a1a1a border, slight padding. Contains Flow logo (bar-chart mark + wordmark in Figtree 600), nav items (Product, Individuals, Business, Resources, Company) with dropdown chevrons, and a lavender CTA pinned to the right. Floats over the canvas with subtle margin from page edges.
Cream Content Card
Light-surface content blocks, feature panelsFill: #ffffeb Lumen Cream. Border-radius: 32px. Padding: 32px all sides. No shadow. Optional 2px solid #1a1a1a border. The 32px radius is consistent across all card sizes — no smaller cards, no exceptions.
Dark Feature Card
Dark-chamber content blocks, feature showcasesFill: #1a1a1a Vast Ink. Border-radius: 40–80px (larger than cream cards for dramatic contrast). Padding: 55–70px. No shadow. Text: #ffffeb Lumen Cream. These are the 'velvet rooms' — sections that feel like stepping into a dark alcove.
Teal Status Badge
Success states, feature labels, 'Grammar corrected'Fill: #034f46 Forest Ink. Text: #ffffeb Lumen Cream. Border-radius: 1000px (full pill). Padding: 8px 16px. Font: Figtree 500, 14px. May include checkmark or icon prefix. The forest teal against cream text is the most readable badge combination.
Platform Pill Badge
Platform selector on dark sections (Mac, Windows, iPhone, Android)Fill: transparent. Text: #ffffeb Lumen Cream. Border: 1–2px solid #ffffff. Border-radius: 1000px (full pill). Padding: 8px 16px. Font: Figtree 500, 14px. Includes platform icon prefix. Sits on dark chamber backgrounds.
Dark Square Badge
Inline tags, category labelsFill: #1a1a1a Vast Ink. Text: #ffffeb Lumen Cream. Border-radius: 8px (sharp contrast to the site's pill-shaped elements). Padding: 8px 16px. Font: Figtree 500, 14px. The 8px radius is deliberately tight — a small geometric counterpoint to the dominant pill shapes.
Waveform Visualizer
Audio/speech indicator, mic active stateContainer: cream pill (#ffffeb) with 9999px border-radius, 2px solid #1a1a1a border. Interior: 5–7 vertical bars of varying height in #1a1a1a, evenly spaced. Height range: 8–24px. Animated bars pulse to indicate active recording. Sits inline with text as a functional punctuation mark.
Phone Mockup
Product preview, feature demonstrationDark device frame (#1a1a1a) with 40px corner radius. Screen shows chat interface with cream message bubbles, user avatar circle, and waveform visualizer at the bottom. No realistic bezel — the mockup is a flat illustration, not a render.
Section Container
Page-level content bandsAlternating fill: #ffffeb (cream) and #1a1a1a (dark). Border-radius: 40–80px on the outer container, creating the rounded-chamber effect. Section gaps: 64–96px vertical. No dividers or separators between sections — the fill alternation and rounded corners do the work.
Hand-drawn Underline Accent
Editorial emphasis on key words in headlinesSVG squiggle or wavy line in #f0d7ff Lavender Whisper, positioned beneath 1–2 words in a display headline. Stroke-width: 3–4px. Slight irregularity in path. The lavender matches the CTA color, creating a visual link between emphasis and action.
Surfaces & elevation
Level 0
Cream Canvas
#ffffebDefault page background — warm paper-like off-white
Level 1
Dark Chamber
#1a1a1aAlternating section/card background — near-black velvet rooms
Level 2
Lavender Accent
#f0d7ffAccent card surfaces, highlighted feature panels
Level 3
Forest Panel
#034f46Secondary accent — badge fills, inner card on dark sections
This design is deliberately shadowless. All cards rely on flat fill + 2px ink borders for separation — no box-shadows, no depth gradients, no floating effects. The only shadow in the system is a single subtle drop-shadow on display text, which is an artifact of typography rendering, not elevation. The 'elevation' is achieved through fill alternation (cream → dark → cream) and oversized border-radii (40–80px) that make dark sections feel like inset rooms rather than elevated overlays. Do not introduce box-shadow to make cards 'pop' — the editorial flatness is the signature.
Layout & imagery
Layout
Page model: centered max-width 1200px content with full-bleed section backgrounds. Hero: centered serif headline (120px) over cream canvas with a floating nav pill at the top and a single CTA below the subtitle. The hero text uses two-tone coloring (Fog gray → Vast Ink) to create a visual cadence across the headline. Sections alternate cream → dark → cream in a deliberate rhythm, with dark chambers taking 40–80px corner radii that make them feel like rounded inset rooms. Content arrangement: text-left/visual-right on feature sections (phone mockup on right), centered stacks for headlines, and side-by-side comparison cards for data sections. The nav is always a floating cream pill (not full-bleed), positioned with breathing room from the page edges. Footer is a full-width dark band. Vertical rhythm: 64–96px between major sections, 32px between cards, 8–16px between elements within a block.
Imagery
Imagery is sparse and editorial: real product app icons (Slack, Notion, Gmail, Messages, etc.) appear in a horizontal parade across dark sections, creating a 'works everywhere' visual proof without lifestyle photography. Phone mockups are flat dark illustrations with cream chat bubbles, not photorealistic renders. Photo backgrounds appear only inside dark feature cards as blurred, desaturated atmospheric layers behind text overlays. Signature graphical elements include curved text arcs following circular paths (the hero's 'going on, no really' loop), hand-drawn lavender SVG underlines beneath key words, and waveform visualizer pills that serve as both audio indicators and decorative rhythm markers. No stock photography, no abstract gradients, no 3D renders — the visual language is editorial print meets functional UI.
Design notes
Agent Guide
**Quick Color Reference** - text: #1a1a1a (Vast Ink) - background: #ffffeb (Lumen Cream) - border: #1a1a1a (Vast Ink, 2px solid) - accent: #f0d7ff (Lavender Whisper) - primary action: #f0d7ff (filled action) - secondary brand: #034f46 (Forest Ink) **Example Component Prompts** 1. Create a Primary Action Button: #f0d7ff background, #1a1a1a text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Create a dark feature chamber*: Full-width section with #1a1a1a fill, 80px border-radius on outer container. Left column: 64px Eb Garamond weight 400 heading in #ffffeb with -1.92px letter-spacing, 20px Figtree 400 subtitle in #ffffeb, and an outlined cream button (12px radius, 2px #1a1a1a... no — 2px #ffffeb border on this dark bg, cream fill, #1a1a1a text, Figtree 500 16px). Right column: flat phone mockup (40px radius, #1a1a1a frame, cream chat bubbles inside). 3. *Create a comparison card pair*: Two cards side by side on #ffffeb canvas. Left: cream card (#ffffeb fill, 32px radius, 32px padding, 2px #1a1a1a border). Heading 'Keyboard' in 20px Figtree 500 #1a1a1a, stat '45 wpm' in 48px Eb Garamond weight 400. Right: dark card (#1a1a1a fill, 40px radius, 32px padding) with blurred photo overlay. Heading 'Flow' in 20px Figtree 500 #ffffeb, stat '220 wpm' in 48px Eb Garamond weight 400 #ffffeb. 4. *Create a platform selector row*: Four full-pill badges in a horizontal row on #1a1a1a dark background. Each: transparent fill, 1px solid #ffffeb border, 1000px border-radius, 8px 16px padding, Figtree 500 14px #ffffeb text, platform icon prefix (Mac, Windows, iPhone, Android). 5. *Create a status badge*: Forest Ink #034f46 fill, 1000px border-radius, 8px 16px padding, Figtree 500 14px #ffffeb text, optional checkmark icon in #ffffeb prefix.
Elevation Philosophy
This design is deliberately shadowless. All cards rely on flat fill + 2px ink borders for separation — no box-shadows, no depth gradients, no floating effects. The only shadow in the system is a single subtle drop-shadow on display text, which is an artifact of typography rendering, not elevation. The 'elevation' is achieved through fill alternation (cream → dark → cream) and oversized border-radii (40–80px) that make dark sections feel like inset rooms rather than elevated overlays. Do not introduce box-shadow to make cards 'pop' — the editorial flatness is the signature.
Similar brands
Mercury
Editorial serif headings at display scale, cream/near-black palette alternation, restrained color discipline, and thick 2px borders define both systems
Linear
Clean dark-chamber sections breaking up light surfaces, disciplined two-color brand palette, oversized corner radii on feature cards
Vercel
Full-bleed alternating dark/light section rhythm, generous vertical breathing room, and large display typography that anchors each band
Arc
Warm cream canvas with deep near-black chambers, oversized pill-shaped containers, and a sense of rounded geometric softness throughout the layout
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
