Wispr Flow

An original Parlance homepage on #FFFFEB cream: a 65px forest announcement bar, an outlined 912×72 nav with a Dictation/Meetings toggle and a lavender Download button, a centred two-line 96px EB Garamond headline whose second line is italic, a 20px lede, one lavender button — and a loop of grey filler-word speech that curls in from the left, enters a black-outlined waveform pill and leaves as a clean sentence on a black ribbon rising to the right. Then a near-black logo band with 80px top corners, a forest speed chamber with Typing vs Speaking stat cards, an alternating feature list, a dark Everywhere chamber with a phone mockup and platform pills, testimonials, a closing call and a dark footer.

• Best forVoice, dictation, transcription and AI writing tools — any product whose whole pitch is turning rough input into finished output, and that wants to feel literary and calm rather than techy.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and border token. Render the page as a server component; it needs no client JavaScript except an optional reduced-motion-aware path drift. Self-host EB Garamond (400 roman and italic) and Figtree (400, 500, 600, 700), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the speech loop, ribbon, waveform pill, logo, wordmarks, stat cards, illustrations and phone mockup as inline SVG and HTML, never a bitmap, video or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Wispr Flow" kickstart — A cream-paper voice-dictation homepage: a forest announcement bar, an outlined nav pill, a two-line 96px Garamond headline with an italic second line, one lavender button, and a loop of messy grey speech running through a waveform pill and out as a clean black ribbon.

## Design
Build a rebrandable landing page for a voice-dictation and AI writing app: you talk in any app, it removes the filler words, fixes the grammar and types finished writing for you — sold to busy professionals, founders and developers on speed and on how calm it feels.

Create a complete landing page for Parlance, a fictional dictation app. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, illustration and copy throughout.

Color: flat, warm and border-driven — no gradients, no box-shadows. Lumen Cream #FFFFEB is the page and every light card; never pure white. Vast Ink #1A1A1A is every headline and body line, every 2px control border, the dark chambers and the footer; never pure black. Paper #FFFDF9 is the surface of the active toggle tab and raised light chips. Lavender #F0D7FF is the one primary action fill, with #1A1A1A labels — never a blue or green button. Forest #034F46 is the announcement bar, the speed chamber and status badges, always with #FFFFEB text. Stone #E4E4D0 is the nav border, the toggle track and quiet dividers. Graphite #5F5F59 is secondary copy on cream; 70% Vast Ink (rgba(26,26,26,0.7)) is nav links, eyebrows and captions. Fog #8A8A80 is only the decorative raw-speech text. Ember #FFA946 is a tiny live-recording dot, nothing more.

Typography: display is "EB Garamond", Garamond, "Times New Roman", serif at 400 only — never bold. Hero and chamber headings 96px/91.2px at -2.88px; stat numbers 48px/45.6px at -1.44px; feature titles 32px/1.1 at -0.96px. One line or phrase per heading is italic. Everything else is "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif: ledes 20px/26px at 500; nav links, toggle tabs and buttons 16px at 600 with line-height 1; body 16px/1.3 at 400; eyebrows 14px/18.2px at 500, uppercase, 1.12px tracking; captions 14px/18.2px at 400. Body copy is never centred except the short hero lede.

Layout: a 1440px viewport, content in a centred 1200px column, 64–96px between sections. Radii: 8px buttons, 10px nav, 1600px toggles and badges, 32px cream cards, 40px dark cards, 80px top corners on dark chambers.

Announcement bar: full width, 65px tall, Forest, centred, 16px/20.8px #FFFFEB — Parlance Meetings is now on Windows and Mac. in 700, then 24px later Try it free in 600 with a 16px chevron.

Navigation: floating over the hero at x 264, y 88, 912×72, #FFFFEB with a 2px Stone border, 10px radius, 8px 8px 8px 20px padding. The logo at x 286: a 24px speech-bubble outline holding four rounded sound bars, then Parlance in Figtree 700 21px at -0.6px. 24px later a 207×36 toggle: Stone track, 2px padding, tabs Dictation (active, Paper) and Meetings, 8px 16px. Right-aligned from x 796, 16px apart: Teams, Pricing, Studio in 70% Ink, then the 183×52 primary button Download for free ending 8px inside the nav.

Hero (id top): the section starts at the top of the page under the bar, 782px tall, centred text. Eyebrow PARLANCE DICTATION at y 259. Headline top at y 301, two lines: Say it out loud, / send it polished. with the whole second line in italic. The lede at y 532, 480px wide, two lines: Voice dictation that turns rambling speech into clean, finished writing in every app. The primary button Download for free at y 608, and at y 684 the caption Available on Mac, Windows, iPhone, and Android. Behind the copy, an inline SVG: a line of raw speech in 18px Figtree 600 Fog at 72% opacity on a textPath that enters from the left edge at y 640, curls up into a loop about 220px wide centred near x 270, y 520, crosses itself and sweeps down to the right — so um I wanted to check, like, whether the uh slides from Tuesday went out to everyone… — ending in a 136×68 waveform pill at x 652, y 819 (Cream fill, 2px Ink border, 24 Ink bars 8–38px tall). Out of its right side rises a 40px Vast Ink ribbon to the top-right corner carrying the cleaned sentence in 18px Figtree 600 #FFFFEB: Did Tuesday's slides go out to everyone, or are they still in drafts? Above the pill at y 762, a Forest status badge with a check: Filler words removed.

Logo band (id logos): Vast Ink with 80px top corners, 80px top padding, the eyebrow TRUSTED BY TEAMS AT in #FFFFEB, then a row of seven invented wordmarks in #FFFFEB (Halden, Orrery, Kestrel, Lumen&Co, Northfold, Quillwork, Basalt), spread edge to edge.

Speed chamber (id speed): Forest with 80px top corners overlapping the band's bottom by 40px, 96px 140px 120px padding, centred. Three times faster than typing at 96px with than typing in italic, a 20px 500 lede, then two cards: a 317px Typing card with a 2px rgba(255,255,235,0.3) outline and a wide Vast Ink Speaking card, both 40px radius, a 20px 500 label over a 48px Garamond stat (42 wpm, 156 wpm), with the dictated sentence running across both on a path.

Features (id features): on Cream, a centred eyebrow PARLANCE MAKES IT EASY and a two-line 72px heading Made for the way you talk, / not the way you type. with the way you talk in italic. Below, four rows: a 400×240 Stone illustration card with 32px radius on the left, a 32px Garamond title and a 16px paragraph on the right — Speaks your languages, Learns your names and jargon, Snippets on command, A tone for every app. Inactive rows dim their text to Fog.

Everywhere chamber (id everywhere): Vast Ink, 80px radius, 70px padding. Left: 64px heading Write anywhere you can type in #FFFFEB, a 20px lede, and four outlined platform pills (1px #FFFFEB border, 1000px radius, 8px 16px, 14px 500): Mac, Windows, iPhone, Android. Right: a flat phone mockup with a 40px radius Ink frame and Cream chat bubbles being dictated.

Testimonials (id testimonials): three 32px radius Cream cards with a 2px Ink border, each a 24px Garamond quote and a 14px name and role of an invented person.

Closing call (id closing): centred 96px Garamond Your voice, / finished. with finished in italic, the primary button and a Cream secondary button Watch it work side by side.

Footer: full-width Vast Ink band, the Parlance logo in #FFFFEB, four link columns (Product, Use cases, Resources, Company) in 14px #FFFFEB at 70%, and © 2026 Parlance Labs.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius and border token. Render the page as a server component; it needs no client JavaScript except an optional reduced-motion-aware path drift. Self-host EB Garamond (400 roman and italic) and Figtree (400, 500, 600, 700), both SIL Open Font License, as woff2 through next/font/local — no remote font request. Draw the speech loop, ribbon, waveform pill, logo, wordmarks, stat cards, illustrations and phone mockup as inline SVG and HTML, never a bitmap, video or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Parlance clearly fictional and rebrandable: no real company, customer or person, no photograph, and no source logo, screenshot, product name or copy reproduced. Lavender is the only action colour; Garamond never goes bold; no box-shadow and no gradient anywhere. Text pairs clear WCAG AA: #1A1A1A and #5F5F59 on #FFFFEB; #1A1A1A on #F0D7FF and #E4E4D0; #FFFFEB on #1A1A1A and #034F46. Fog raw-speech text is decorative and hidden from assistive technology, with the hero's meaning carried by the headline and lede. Every link leads to a real anchor on the page; the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible; any path drift or waveform pulse stops for prefers-reduced-motion. Every control shows a 2px #1A1A1A focus ring with a 2px offset. At 360px the bar wraps to two lines, the nav keeps the logo, the button and a Menu button, the headline drops to 52px/50px at -1.56px, the speech loop shrinks behind the button, the chambers lose their side padding and stack, and the page never overflows horizontally.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.