---
title: "Wispr Flow design system"
variant: extended
source: https://wisprflow.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/wisprflow-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Wispr Flow · Design System

> Warm editorial typography meets effortless voice technology.

**Theme:** light · **Industry:** ai · **Source:** https://wisprflow.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Wispr Flow presents voice dictation through a calm, editorial landing page built around a pale cream canvas and expressive serif headlines. Dark proof sections, a deep green feature band, and lilac calls to action add contrast without disrupting the spacious flow.

## North star

Keep the cream canvas and expressive serif message dominant, using dark and green bands as deliberate punctuation.

## Overview

The page is defined by a warm cream canvas (#ffffeb) that carries most of the experience, with near-black (#1a1a1a) typography and occasional full-width dark panels for customer logos and testimonials. A deep green (#034f46) performance section provides a strong mid-page color shift; pale lavender (#f0d7ff) is reserved for the primary download action and selected testimonial artwork. Large, lightly tracked EB Garamond headings bring an editorial, literary tone, while Figtree keeps navigation, body copy, and controls practical and legible. The hero centers its promise and CTA, then demonstrates speech in a curved text treatment rather than relying on a conventional product screenshot. Sections use generous breathing room and broad, rounded bands, with product-interface fragments and customer proof introduced as supporting evidence. Borders are delicate and shadows are not a defining device. Bright orange, coral, and mint hues appear sparingly in accent or illustrative material rather than setting the core identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | brand | Primary text, navigation, dark testimonial and logo panels, and dark outlines on lavender CTAs. |
| Flow Cream | `#ffffeb` | `--color-flow-cream` | brand | Main page canvas, light cards, and reversed text on dark or green surfaces. |
| Gradient Black | `#080808` | `--color-gradient-black` | semantic | Gradient artifact measured in decorative media; not a defining page background color. |
| Deep Flow Green | `#034f46` | `--color-deep-flow-green` | brand | Large feature section background and dark green announcement strip. |
| Sage Paper | `#e4e4d0` | `--color-sage-paper` | surface | Muted navigation and card surfaces, including subdued interface-style elements. |
| Pine Edge | `#1d6157` | `--color-pine-edge` | accent | Fine borders and outlines around cards or green-toned interface details. |
| Stone Hairline | `#d1d1c1` | `--color-stone-hairline` | neutral | Subtle card borders and separators against the cream canvas. |
| Olive Gray | `#565650` | `--color-olive-gray` | neutral | Secondary copy and low-emphasis text. |
| Moss Gray | `#5e5e58` | `--color-moss-gray` | neutral | Muted navigation and supporting text. |
| Lilac Signal | `#f0d7ff` | `--color-lilac-signal` | accent | Primary Get started button background and lavender testimonial artwork. |
| Amber Spark | `#ffa946` | `--color-amber-spark` | accent | Small decorative or illustrative accent, not a major page surface. |
| Linen Mist | `#eeebe3` | `--color-linen-mist` | surface | Low-key secondary surface detail within interface or media elements. |
| Coral Note | `#ff6c4c` | `--color-coral-note` | accent | Minor warm accent in decorative or illustrative content. |
| Mint Glint | `#34d399` | `--color-mint-glint` | semantic | Small success-like or product illustration detail, not a core brand field. |
| Quiet Taupe | `#8c8c82` | `--color-quiet-taupe` | neutral | Low-emphasis captions and supporting text. |

### Semantic aliases

`--color-canvas` → `#ffffeb` (Flow Cream) · `--color-surface` → `#1a1a1a` (Soft Ink) · `--color-surface-2` → `#034f46` (Deep Flow Green) · `--color-surface-3` → `#e4e4d0` (Sage Paper) · `--color-surface-4` → `#f0d7ff` (Lilac Signal) · `--color-text` → `#1a1a1a` (Soft Ink) · `--color-text-muted` → `#ffffeb` (Flow Cream) · `--color-border` → `#1d6157` (Pine Edge) · `--color-accent` → `#034f46` (Deep Flow Green) · `--color-accent-2` → `#ffa946` (Amber Spark) · `--color-accent-3` → `#ff6c4c` (Coral Note)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffeb` | 17.2:1 | AAA |
| `#1a1a1a` | `#034f46` | 1.83:1 | fail |
| `#1a1a1a` | `#e4e4d0` | 13.51:1 | AAA |
| `#ffffeb` | `#1a1a1a` | 17.2:1 | AAA |
| `#ffffeb` | `#034f46` | 9.39:1 | AAA |
| `#ffffeb` | `#e4e4d0` | 1.27:1 | fail |
| `#034f46` | `#ffffeb` | 9.39:1 | AAA |
| `#034f46` | `#1a1a1a` | 1.83:1 | fail |
| `#034f46` | `#e4e4d0` | 7.38:1 | AAA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 255, 235))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree | `--font-body` | webfont | 500, 600, 400, 700 | Navigation, body copy, labels, buttons, and interface text. | Inter |
| Eb garamond | `--font-display` | webfont | 400 | Display headlines and editorial section titles. | EB Garamond |

- **Figtree:** Use practical sans-serif forms; mostly medium and semibold, with compact uppercase eyebrow labels and restrained tracking.
- **Eb garamond:** Regular-weight serif with tight negative tracking; use expressive italic emphasis within selected headlines.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.95 | -0.03em | — | Eb garamond | Oversized editorial statements and prominent brand messaging. |
| h1 | 75px | 400 | 1 | -0.03em | — | Eb garamond | Hero headline and primary page-level statement. |
| h2 | 64px | 400 | 0.95 | -0.03em | — | Eb garamond | Major feature and testimonial section headings. |
| h3 | 48px | 400 | 0.95 | -0.03em | — | Eb garamond | Feature titles and secondary editorial headings. |
| h4 | 32px | 400 | 0.95 | -0.03em | — | Eb garamond | Smaller card and supporting section headings. |
| body | 16px | 500 | 1.3 | 0 | — | Figtree | Main explanatory copy and product descriptions. |
| caption | 12px | 600 | 1.54 | -0.02em | — | Figtree | Small supporting labels, notes, and card metadata. |
| nav | 16px | 600 | 1 | 0 | — | Figtree | Primary navigation labels and menu controls. |
| eyebrow | 14px | 500 | 1.3 | 0.08em | uppercase | Figtree | Uppercase section labels above headlines. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 16, 24, 32, 40, 48, 64, 80 px.
- Section rhythm 40px · element gap 64px · card padding — · max content width 1240px.

Use a centered content frame with a measured maximum width of 1240px, while letting key color bands extend across the viewport. The page opens with a narrow announcement strip, an inset pill-like navigation bar, and a centered hero. Alternate broad cream intervals with dark proof panels and a deep green feature section. Keep headings centered where the message is a single statement; use split content for feature details and security proof. The measured spacing system is based on an 8px unit and is described as spacious, with noticeable section-to-section breathing room.

## Shape & elevation

- Radius: button `8px` · card `7px` · media `9999px` · nav `9999px` · link `48px` · xs `7px` · sm `8px` · md `16px` · lg `32px` · xl `40px` · 2xl `48px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The visual language is mostly flat: no measured shadows define the cards or page. Use fine borders and subtle tonal changes to separate light surfaces, plus strong contrast between cream, green, and dark section bands. Rounded panel edges create the main sense of layering; reserve the dark-to-transparent gradients for media overlays.

## Imagery

The hero uses curved, flowing transcript text and a compact waveform-like control as a product demonstration, not a large conventional screenshot. A feature section includes a wide media frame with a comparison panel. Later content uses restrained interface fragments and testimonial cards with a customer portrait. Keep image edges rounded and let imagery support, rather than overpower, the typography.

## Components

### Announcement strip

A deep green top band with centered availability messaging and a small cream-colored link.

### Inset navigation

A cream-toned, rounded horizontal bar with the Flow mark, pill-style product choices, text links, and a lavender download button.

### Hero CTA

Centered serif headline and short sans-serif explanation above a lavender button with a dark outline.

### Speech demo

Curved transcript trails lead to a compact waveform control, making live dictation the hero visual.

### Feature band

A deep green rounded section pairs a centered serif claim with a wide product comparison and media frame.

### Trust panel

A muted sage card combines a serif privacy statement, concise security copy, and certification marks.

### Testimonial panel

A dark section introduces customer proof cards, including a lilac card with portrait photography and metrics.

### Measured component styles

- **Primary button** (“Dictation”): background #fffdf9 · text #1a1a1a · radius 1600px · padding 8px 16px · 600 16px Figtree
- **Secondary button** (“Get started on Windows”): background #f0d7ff · text #1a1a1a · border 2px solid #1a1a1a · radius 8px · padding 14px · 600 16px Figtree
- **Link** (“Host of Diary of a CEO “The thought I ha”): transparent background · text #1a1a1a · radius 48px · padding 16px · 400 16px Figtree
- **Card** (“Message... Can you let the team know the”): background #ffffeb · text #1a1a1a · border 1px solid #d1d1c1 · radius 7px · padding 0px · 400 16px Figtree
- **Navigation item** (“Dictation”): transparent background · text #1a1a1a · radius 0px · padding 0px · 600 16px Figtree

## Do

- Keep Flow Cream (#ffffeb) as the dominant canvas.
- Use EB Garamond for large editorial headlines.
- Set practical copy and controls in Figtree.
- Reserve Soft Ink (#1a1a1a) for strong text and proof panels.
- Use Deep Flow Green (#034f46) for a distinct feature band.
- Make Lilac Signal (#f0d7ff) the clear download-action accent.
- Preserve generous whitespace around major messages.

## Don't

- Do not turn the page into a dense dashboard layout.
- Do not use gradients as the dominant page treatment.
- Do not apply bright accent colors across large areas.
- Do not replace the editorial serif headline with a heavy geometric display face.
- Do not add prominent drop shadows to otherwise flat cards.
- Do not make every section or card equally dark.
- Do not crowd the hero with multiple competing actions.

## Agent prompt

Build a new page in Wispr Flow's calm editorial SaaS style. Keep Flow Cream (#ffffeb) as the main canvas and Soft Ink (#1a1a1a) for readable text, navigation, and occasional dark proof panels. Use EB Garamond for large, tightly tracked serif headlines, with Figtree for body copy, labels, and controls. Place one centered primary message and a clear Lilac Signal (#f0d7ff) CTA in the opening area. Use Deep Flow Green (#034f46) as a deliberate feature-section band, not a general background. Favor broad whitespace, centered content, rounded sections, fine borders, and flat surfaces. Include a product demonstration or interface fragment as supporting evidence; avoid overloading the page with decorative color, shadows, or dense grids.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Full-width, narrow dark green strip with centered message and link. | Availability announcement, Inline try-free link | Deep green band, Small centered sans-serif text |
| 2 | hero | Centered hero beneath inset navigation, with curved transcript detail around the main message. | Primary download CTA, Cross-platform availability note, Product demonstration | Large serif headline, Lavender outlined button, Waveform control |
| 3 | logo-cloud | Full-width dark panel with a centered eyebrow and horizontally arranged customer logos. | Social proof, Customer logo recognition | Dark rounded band, Light logo marks, Small uppercase label |
| 4 | product-showcase | Deep green feature band with centered title and wide comparison media below. | Speed comparison, Product capability demonstration | Green background, Serif heading, Rounded media frame |
| 5 | how-it-works | Centered section introduction on the cream canvas. | Feature overview, Section transition | Small uppercase eyebrow, Large serif title, Open whitespace |
| 6 | feature-grid | Two-column feature content on a continuous cream background. | Feature discovery, Benefits overview | Sparse feature blocks, Sans-serif descriptions, Subtle illustrations |
| 7 | other | Single-column cream interval with no prominent content. | Visual breathing room | Uninterrupted cream canvas |
| 8 | feature-split | Long cream section with product examples alongside stacked feature descriptions. | Language support, Vocabulary learning, Reusable text shortcuts | Split content, Interface-style examples, Serif feature titles |
| 9 | feature-split | Three-part muted card on cream: statement, explanatory copy, and certification marks. | Privacy reassurance, Security credentials link | Sage surface, Serif statement, Circular certification marks |
| 10 | testimonials | Full-width dark section with centered heading and testimonial cards below. | Customer validation, Case-study discovery | Near-black background, Serif title, Floating card composition |
| 11 | stats | Dark continuation with testimonial quote, case study, and compact outcome metrics. | Customer quote, Case-study link, Outcome metrics | Light-on-dark text, Customer image, Metric callouts |

## Source CSS custom properties (selected)

```css
--background-color--background-primary: #ffffeb;
--_text-collection---font--body-font: Figtree,Arial,sans-serif;
--text-color--text-primary: #1a1a1a;
--_text-collection---font--primary-font: "Eb garamond",Arial,sans-serif;
--_text-collection---heading--h1: 7.5rem;
--_text-collection---heading--h2: 4rem;
--_text-collection---heading--h3: 3rem;
--_text-collection---heading--h4: 2rem;
--_text-collection---heading--h5: 1.25rem;
--_text-collection---heading--h6: 1rem;
--_text-collection---body--medium: 1.125rem;
--_spacing---section-radius--small: 2.5rem;
--text-color--text-alternate: #fff;
--text-color--text-secondary: #ffffeb;
--background-color--background-success: #cef5ca;
--text-color--text-success: #114e0b;
--_text-collection---heading--h1-small: 6rem;
--border-color--border-primary: #1a1a1a4d;
--_text-collection---body--regular: 1rem;
--_text-collection---body--small: .875rem;
--background-color--background-alternate: #fff;
--base-color--pulse: #7f1c34;
--background-color--background-secondary: #f0d7ff;
--border-color--border-secondary: #1a1a1a;
--base-color-system--error-red-dark: #7f1c34;
--_spacing---section-paddings--large: 8rem;
--link-color--link-primary: #f0d7ff;
--_text-collection---body--large: 1.25rem;
--base-color-neutral--neutral-darkest: #111;
--background-color--background-tertiary: #1a1a1a;
--background-color--background-error: #f8e4e4;
--text-color--text-error: #7f1c34;
--base-color--lumen: #ffffeb;
--base-color--fathom: #034f46;
--base-color--lumen-dark: #e4e4d0;
--base-color--glow: #ffa946;
--_spacing---section-paddings--medium: 6rem;
--_spacing---spacers--medium: 1.5rem;
--_spacing---spacers--large: 3rem;
--background-color--background-warning: #fcf8d8;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wisprflow-ai