Warm, literary calm with a hand-made edge. The canvas is a pale YELLOW-CREAM #ffffeb that reads as paper rather than screen — substituting white loses the whole quality — carrying #1a1a1a ink that doubles as the universal border colour. Type is a two-voice split with an extreme size contrast: EB Garamond, a book serif, takes all display at weight 400 set very large and very tight (120px on 102px LEADING with -6px tracking, so line-height sits below the font size), while Figtree handles every piece of UI and body at 16-20px. Both are open Google fonts, so the real faces are used. The interaction language is deliberately sticker-like: every button is 49-52px at 12px radius with a hard 2px #1a1a1a border, and the page contains exactly ONE box-shadow — an unblurred rgb(0,0,0) 3px 3px 0 0 offset — which is what makes controls feel pressed onto the page rather than floating above it. Nav links carry a transparent 2px border at rest that becomes #1a1a1a on hover, so the outline appears instead of the fill changing. Accents are flat fills only: lilac #f0d7ff on the primary CTA, a deep forest #034f46 for full-bleed bands with cream type, and a touch of orange #ffa946 — with zero gradients and zero backdrop filters anywhere. A curved circular text path of transcribed speech runs up the hero margin beside a 573x700 WebGL canvas, and GSAP and Lottie carry the motion.
Browse Wispr Flow in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: wisprflow.ai (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Webflow-built with 94 :root vars; §2 read from computed fills/text. Thergb(56,152,236)input focus border is Webflow's default.w-input:focusboilerplate, not brand — recorded as such in §4. Reality check: "calm" and "focused" hold; "minimal" undersells it. The queue expected a quiet minimal surface. It *is* quiet, but the canvas is a distinctive pale yellow-cream #ffffeb (not white), the display is a 120px EB Garamond serif on 102px leading with -6px tracking — line-height well below font size — and the interaction language is sticker-like: every button carries a 2px near-black border, and the page's single shadow is a hard unblurred3px 3px 0 0offset. There is also a WebGL canvas.
Warm, literary calm with a hand-made edge. The canvas is a pale yellow-cream that reads like paper rather than screen, and the headline is set enormous in EB Garamond — a book serif — packed so tightly that the lines nearly touch. Around it the interface is quiet Figtree at modest sizes. The tactile note comes from the control language: hard 2px near-black outlines and a single unblurred offset shadow, so buttons read like stickers pressed onto the page. Colour is a small, confident set — lilac, deep forest teal, a touch of orange — used as flat fills. Feels: warm, literary, tactile, calm.
| Token | Hex / value | Role / usage |
|---|---|---|
| cream | #ffffeb | THE canvas — pale yellow-cream, not white (51 uses) |
| cream-2 | #fffdf9 | warmer hover surface |
| sand | #e4e4d0 | dropdown hover fill |
| ink | #1a1a1a | primary text + THE 2px border colour (5286 uses) |
| ink-2 | #222222 | nav link text |
| ink-3 | #333333 | tertiary text |
| ink-50 | rgba(26,26,26,.5) | muted text |
| ink-70 | rgba(26,26,26,.7) | secondary text |
| ink-10 | rgba(26,26,26,.1) | faint divider |
| grey | #8a8a80 | warm muted grey |
| white | #ffffff | rare, 4px borders |
| lilac | #f0d7ff | THE primary button fill (25 uses) |
| forest | #034f46 | dark section band + hover text |
| orange | #ffa946 | small highlight accent |
Rules: the canvas is a warm yellow-cream — substituting white loses the paper quality entirely. Every accent is a flat fill, never a gradient (the page has zero gradients). #1a1a1a does double duty as ink and as the universal 2px border.
A two-voice split with an extreme size contrast. EB Garamond — a book serif — carries all display at weight 400, set very large and very tight: 120px on 102px leading with -6px tracking, 64/60.8 at -1.92px, 32/41.6 at -0.96px. In every case the line-height sits *below* the font size. Figtree handles all UI and body at 16–20px, weights 500–600, tracking normal.
Specimen substitution: both faces are open Google fonts (EB Garamond,
Figtree), so previews use the real faces.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | EB Garamond | 120/102 | 400 | -6px |
| Section (h2) | EB Garamond | 64/60.8 | 400 | -1.92px |
| Sub-head (h3) | EB Garamond | 32/41.6 | 400 | -0.96px |
| Lead body | Figtree | 20/26 | 500 | normal |
| Nav | Figtree | 16/20.8 | 600 | normal |
| Button | Figtree | 16 | 600 | normal |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.