# Wispr Flow — Marketing site Design Spec

> 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. The `rgb(56,152,236)` input focus border is Webflow's default
> `.w-input:focus` boilerplate, 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
> unblurred `3px 3px 0 0` offset. There is also a WebGL canvas.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

The control language is the signature. Buttons are 49–52px tall at **12px**
radius with a hard **2px #1a1a1a border** — the primary filled lilac #f0d7ff, a
secondary filled cream #ffffeb, both with #1a1a1a text. The page's **only**
box-shadow is a hard, unblurred **`rgb(0,0,0) 3px 3px 0 0`** offset, which is what
makes controls read as stickers. Nav sits in a floating pill (1600px radius, 102
uses). Radii otherwise: 14px, 32px, 12px, 40px, 100%, and 992/1000/1600px pills.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary button | #f0d7ff, #1a1a1a, 12px, 49px, **2px #1a1a1a** | 0.3s ease colour | Webflow default `outline: 0` (anti-pattern) | — | not observed |
| Secondary button | #ffffeb fill, 2px #1a1a1a | 0.3s ease colour | as above | — | — |
| Nav link | transparent, 2px transparent border, 16px radius | bg → #fffdf9, border-color → #1a1a1a, **`transform: translate(0)`** | as above | — | — |
| Dropdown link | transparent | bg → #e4e4d0, text → #034f46 | as above | — | — |

Two details worth copying. Nav links carry a **transparent 2px border at rest**
that becomes #1a1a1a on hover, so the outline appears rather than the fill
changing — and the accompanying `transform: translate(0)` implies the rest state
is offset, snapping into place on hover (the same offset-block idea as the hard
shadow). Focus, however, is Webflow boilerplate: `.w-input:focus` sets
`outline: 0` with a generic blue border `rgb(56,152,236)`. Recorded as an
**anti-pattern** — supply a brand ring (e.g. `0 0 0 2px #1a1a1a`).

## 5. Layout Principles

A floating rounded-pill nav (1600px radius, 2px border) sits at the top. The hero
is centred: the 120px serif headline, a two-line Figtree sub, one lilac button,
and a platform note — with **curved circular text** running up the left margin
(transcribed speech following a path), a distinctive hand-made touch. Below, full
bleed **forest #034f46** bands carry cream type, and a 60s logo ticker runs
infinitely.

## 6. Depth & Elevation

Radius: **1600px** (102 uses — the nav pill and large rounded shapes), 14px, 32px,
**12px** (buttons), 40px, 100%, 1000px, 992px. Depth is almost entirely **borders,
and thick ones**: 2px #1a1a1a (31 uses), 2px #ffffeb (27, the inverse over
forest), 4px #ffffff, 4px #ffffeb, 3px #ffffeb. There is exactly **one shadow on
the whole page** and it is hard and unblurred — `rgb(0,0,0) 3px 3px 0 0`. No
backdrop filters.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.3s | ease | text and links (dominant, 76x) |
| transform, color | 0.2s / 0.3s | ease | the hover offset snap (36x) |
| margin, transform | 0.3s | ease | layout nudges |
| opacity | 0.2s | ease | fades |
| background-color | 0.2s | ease | fills |
| transform | 0.3s | ease | reveals |

House transition: **0.3s ease** for colour, 0.2s for the transform snap. CSS
`@keyframes` are minimal — just `spin` and `logoTicker1` (**60s infinite**) —
because **GSAP and Lottie are both detected** and drive the real motion,
including the curved-text and hero animation. There is **no
`prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — worth adding given
the infinite ticker and script-driven hero.

## 8. Backgrounds, Effects & WebGL

**Zero gradients on the entire page** — every surface is a flat fill, which is
what keeps the paper quality. No backdrop filters, no video, no grain, no raster
background layers. The one effect is a **`<canvas>` running WebGL at 573×700**,
sitting in the hero alongside the curved circular text. Atmosphere is flat warm
colour, thick borders and that single WebGL element.

## 9. Do's and Don'ts

### Do
- Use the pale yellow-cream #ffffeb canvas — it is the paper quality, not a white substitute.
- Set display in EB Garamond at 400, very large and very tight, with line-height *below* font size (120/102, -6px).
- Keep all UI in Figtree at 16–20px, weights 500–600, normal tracking.
- Put a hard **2px #1a1a1a** border on every button.
- Use the single hard unblurred shadow `3px 3px 0 0` for the sticker effect — never a blurred one.
- Reveal the border on hover (transparent → #1a1a1a) rather than changing the fill.
- Keep accents as flat fills: lilac #f0d7ff, forest #034f46, orange #ffa946.

### Don't
- Don't swap the cream canvas for white.
- Don't add gradients — the page has none.
- Don't use blurred/soft shadows; the one shadow is hard-offset.
- Don't loosen the display tracking or raise its line-height above the font size.
- Don't ship the Webflow `outline: 0` focus default; supply a real ring.

## 10. Responsive Behavior

A max-width-first Webflow ladder with a few min-width additions:

| Breakpoint | What changes |
|---|---|
| max 479px | phone |
| max 767 / 768px, min 768px | phone → tablet seam |
| max 991 / 992px, min 992px | tablet |
| max 1024px | small desktop |
| min 1085px | desktop |
| max 1150 / 1199 / 1281px | desktop upper steps |

No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, no
reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffeb` (yellow-cream) · Ink + border `#1a1a1a` (2px) · Sand `#e4e4d0` · Accent `#f0d7ff` lilac · Band `#034f46` forest · Highlight `#ffa946`
- Font: **EB Garamond** display 120/102 400 **-6px** + **Figtree** UI 16–20 500/600 (both open, real faces) · Radius: 12px buttons / 1600px pills · Control height: 49–52px
- Focus: Webflow `outline: 0` — add `0 0 0 2px #1a1a1a` · Shadow: **only** `3px 3px 0 0` hard offset · Motion: 0.3s ease colour, GSAP + Lottie

<wispr-flow_design_language>
Warm, literary calm with a hand-made edge. The canvas is a pale YELLOW-CREAM
#ffffeb that reads as paper rather than screen — never substitute white — with
#fffdf9 hover surfaces, #e4e4d0 sand, and #1a1a1a ink that doubles as the
universal 2px border colour. Type is a two-voice split with 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, so line-height sits BELOW
the font size — while Figtree handles every piece of UI and body at 16-20px,
weights 500-600, normal tracking. Both are open Google fonts, so use the real
faces. The interaction language is STICKER-LIKE: every button is 49-52px at 12px
radius with a hard 2px #1a1a1a border, primary filled lilac #f0d7ff and secondary
cream, and the page's ONE AND ONLY box-shadow is a hard unblurred rgb(0,0,0)
3px 3px 0 0 offset. 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, forest #034f46 for full-bleed bands with cream type,
orange #ffa946 — and there are ZERO gradients and zero backdrop filters anywhere.
The nav is a floating 1600px pill; a curved circular text path runs up the hero
margin beside a 573x700 WebGL canvas. Motion is 0.3s ease colour with a 0.2s
transform snap, driven by GSAP and Lottie, plus a 60s logo ticker. Feels: warm,
literary, tactile, calm. Avoid: a white canvas, gradients, blurred shadows,
loosening the display tracking, shipping the Webflow outline:0 focus default.
</wispr-flow_design_language>