Wispr Flow

Overview

Wispr Flow is a voice-to-text dictation and AI notetaker designed for professionals, students, and creators who think faster than they type. The brand embodies 'Conversational Minimalism'—a design philosophy that strips away friction while preserving warmth and humanity. The visual language combines a luminous cream background (#ffffeb) with soft purple accents (#f0d7ff) and teal accents (#034f46), creating an interface that feels both sophisticated and approachable. The UI evokes clarity, focus, and the natural rhythm of human speech—never rushed, always precise.

The brand voice is direct, confident, and conversational. Wispr Flow speaks to users as peers, not as subjects. Vocabulary emphasizes speed ('4x faster'), clarity ('polished writing'), and seamlessness ('in every app'). The tone avoids corporate jargon; instead, it uses active verbs and human-centered language. Example sentence in brand voice: 'Speak at the speed you think—Flow handles the rest.'

Colors

The Wispr Flow color system is built on a 'Warm Clarity' philosophy: a luminous, cream-based surface (#ffffeb, rgb(255, 255, 235)) provides a calm, paper-like foundation that reduces eye strain during long dictation sessions. Primary accent color is a soft, inviting lavender (#f0d7ff, rgb(240, 215, 255))—used exclusively on Call-To-Action buttons, focus states, and interactive highlights. This purple is never aggressive; it whispers rather than shouts, aligning with the brand's conversational tone. Secondary accent is a deep teal (#034f46, rgb(3, 79, 70))—reserved for confirmation states, success messages, and secondary navigation. Tertiary accent is a warm coral (#ff6c4c, rgb(255, 108, 76))—used sparingly for alerts, emphasis, and dynamic visual feedback. The neutral palette ranges from n

Typography

The type system pairs two distinct typefaces to create visual hierarchy and emotional resonance. EB Garamond (serif, 400 weight) is used exclusively for display and headline scales (96px, 56px, 40px), evoking the elegance of handwritten notes and the permanence of polished writing. Figtree (sans-serif, 400–600 weight) handles all body, label, and UI text (18px down to 12px), providing clarity and legibility at smaller sizes. The pairing creates a 'refined-yet-approachable' aesthetic: Garamond says 'this matters,' while Figtree says 'this is easy.' Letter-spacing is tightened on display scales (-0.02em to -0.01em) to create visual weight and intimacy; body text uses 0em spacing for neutral readability. Line-height is generous (104px for display, 28px for body-lg) to ensure breathing room an

Layout

Wispr Flow uses a fluid 12-column grid with a fixed max-width of 1180px, centered on the viewport. This balance between flexibility and constraint allows the design to adapt gracefully from mobile (single column, full bleed) to desktop (multi-column, centered container). The spacing scale is semantic: {spacing.lg} (40px) separates major sections (hero, features, testimonials); {spacing.md} (24px) separates cards and subsections; {spacing.sm} (12px) separates inline elements. Gutters are consistently 24px on desktop, collapsing to 16px on tablet and 12px on mobile. White-space is treated as a first-class design element—never filled with decoration. The hero section uses 64px top/bottom padding, creating a generous breathing room that signals importance. Cards and containers use {spacing.md}

Elevation & Depth

Depth in Wispr Flow is achieved through subtle layering and soft shadows rather than dramatic contrast. The system uses three elevation levels: Level 1 (Base) is the luminous cream surface (#ffffeb) with no shadow. Level 2 (Standard Cards/Inputs) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft spread shadow that lifts elements 4px off the base. Level 3 (Modals/Popovers) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius (24px) that creates perceived distance. All interactive elements (buttons, inputs) transition between levels on hover/focus using a 200ms ease timing

Shapes

Wispr Flow employs a 'Soft-Technical' shape philosophy: rounded corners are used consistently but never aggressively. The rounded scale progresses from {rounded.DEFAULT} (8px, 0.5rem) for inputs and small components, to {rounded.md} (12px, 0.75rem) for standard cards, to {rounded.lg} (16px, 1rem) for larger containers, to {rounded.xl} (24px, 1.5rem) for hero sections and modals. Buttons use {rounded.md} (8px) to signal precision and action; cards use {rounded.xl} (24px) to feel welcoming and approachable. Pill-shaped elements (badges, accent pills) use {rounded.full} (9999px) to emphasize thei

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#f0d7ff) background with {colors.on-primary} (#1a1a1a) text, a 2px border at {colors.on-primary}, and {rounded.md} (8px) rounding. Height is fixed at 48px with padding 16px 24px, ensuring touch-friendly targets. On hover, the background transitions to {colors.primary-container} (#e4c9ff) with a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) applied over 200ms ease. Secondary buttons mirror this structure but use transparent background with {colors.secondary} (#034f46) text and border; on hover, the background fills with {colors.secondary-container} (#0d7a6f) and text becomes {colors.on-secondary} (white). Ghost buttons use transparent background, {colors.outline} border, and {colors.on-surfa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f0d7ff) exclusively on primary CTAs and focus states—it's the brand's signature accent and should feel precious, not ubiquitous.
• Do maintain 48px minimum height on all clickable elements to ensure touch-friendly targets across devices.
• Do apply generous white-space ({spacing.lg} = 40px) between major sections to create visual breathing room and reduce cognitive load.
• Do use EB Garamond for headlines and Figtree for body text—this pairing is non-negotiable and defines the brand's visual voice.
• Do transition all interactive states over 200ms ease to signal interactivity smoothly without jarring the user.
• Do use soft shadows ({elevation.md} = 0 3px 8px rgba(0, 0, 0, 0.15)) on hover states to create perceived lift without harsh contrast.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use {colors.on-surface} (#1a1a1a) and {colors.surface} (#ffffeb) to maintain warmth.
• Don't apply {colors.primary} (#f0d7ff) to secondary elements, status indicators, or decorative accents—reserve it for primary actions only.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full)—this breaks visual consistency.
• Don't apply shadows darker than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12))—Wispr Flow is minimalist, not dramatic.
• Don't mix serif and sans-serif typefaces within a single component—EB Garamond is for headlines, Figtree is for everything else.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements—this compromises touch-friendliness and visual breathing room.