Wispr Flow · Full Page
Wispr Flow
Voice-AI productivity'nin electric yellow editorial commitment'i — #ffff00 structural signal, Figtree + EB Garamond grotesque+serif tension, GSAP + Rive premium motion stack.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Wispr Flow is the rare voice-AI productivity landing that wears electric yellow #ffff00 as a brand-defining signal — not as a Y2K throwback, but as a deliberate citation of high-visibility safety aesthetics applied to productivity software. We catalogued it because most voice-input tools default to one of two visual playbooks: corporate blue, or Apple-cream warmth. Wispr Flow picked a third path — pure black canvas, Figtree as the body grotesque, EB Garamond preloaded for editorial serif moments, and the most saturated yellow possible used as a structural accent rather than a button paint. The result is a brand that signals attention without shouting capability. If you are shipping a voice-input tool whose value lives in flow-state, this is the lodestar.
Design decisions observed
- Electric yellow #ffff00 as primary brand accent (~1,040 surface refs) — extraordinarily saturated, used as structural signal rather than decorative button colour.
- Pure #000000 ground (~1,667 surface refs) paired with #1a1a1a text (~3,556 refs) — black-on-near-black hierarchy creates editorial depth.
- Figtree as primary grotesque (~6 weights) — modern-warm, less corporate than Inter.
- EB Garamond preloaded — classic serif reserved for editorial display moments, creates grotesque+serif tension.
- Pale yellow tint #ffffeb (~616 refs) — cream secondary surface, complementary to electric yellow accent.
- GSAP + Rive — premium motion stack signalling production-grade animation craft.
- Container 1240px — single wide reading frame, no nested editorial widths.
- Custom container breakpoint lg=992 — not Tailwind default (1024).
What to study
- Electric yellow as brand-defining signal — #ffff00 is the kind of colour designers usually only use ironically. Wispr Flow deploys it with such commitment that it reads as confident art direction, not throwback.
- Figtree + EB Garamond duet — modern grotesque body with classic serif display moments. The tension creates editorial weight most voice-tools never attempt.
- GSAP + Rive motion stack — premium animation tooling signals production craft. Steal the discipline of investing in motion infrastructure when motion is the brand.
What to avoid
- Don't lift #ffff00 yellow without committing to its structural usage — half-hearted yellow accents read as Y2K cosplay. Either commit fully (Wispr Flow does) or stay neutral.
- Don't paint button backgrounds in #ffff00 — Wispr Flow treats yellow as structural signal (hairline accents, illustration spots). The moment you fill a CTA with it, the brand collapses into 'novelty yellow product'.
- Don't ship GSAP/Rive without committing to choreography — premium motion libraries demand premium motion work. Half-baked animation collapses the brand.
Taste notes
The page feels like reading a beautifully art-directed quarterly about productivity tools that happens to ship voice-AI — every accent of electric yellow earns its frame, every Figtree paragraph reads at exactly the right body rhythm, every EB Garamond moment lifts the page from app marketing into editorial territory. Wispr Flow understood that voice-AI is a category that easily slips into garish neon hero animations. The way out is to commit hard to a single unconventional brand colour and trust the typography to carry the rest.
Lineage & references
- Direct heir to the post-Linear bold-accent dev-tool school — but Wispr Flow picks safety-yellow where Linear picks indigo.
- Standing shoulder-to-shoulder with the modern voice-AI peer cohort (SuperWhisper, Whisper, Krisp) — but Wispr Flow's chromatic ambition is the boldest.
- Part of the Figtree typographic wave (Mailchimp recent, Polywork) — applied to voice-input productivity software.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Wispr Flow's design language is electric yellow on absolute black with editorial grotesque+serif tension. #ffff00 deployed as structural signal, #000000 ground, Figtree for body, EB Garamond for display serif moments, GSAP+Rive motion. Brand works because yellow earns its commitment — it's structural, not decorative.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure #000000 ground dominant, #1a1a1a near-black for elevated dark text/surface, #ffff00 electric yellow primary brand accent — structural signal not button paint, #ffffeb pale yellow tint for secondary cream surface, #dddddd light grey for tertiary, #ffffff and #f0d7ff light lavender for soft accent surfaces, #e4e4d0 warm cream border, #333333 medium grey, #8a8a80 muted slate), Figtree as primary grotesque (sizes 15-20px body and display, weights 400/600/700), EB Garamond preloaded for editorial serif display moments, spacing scale 2/4/8/11/14/16/20/22, container 1240px single, custom breakpoints sm=640 md=768 lg=992 xl=1280 (lg=992 not 1024), GSAP + Rive motion stack (premium animation choreography). Treat #ffff00 as structural signal — hairlines, accent illustrations, never CTA fill. Apply the language, not the source brand's copy.
Overview
- Layout
- Single 1240px container, dense editorial flow with electric yellow structural accents.
- Content width
- 1240px container, body content at 720-960px reading rail.
- Framing
- Bold safety-yellow editorial — black canvas, structural yellow accents, grotesque+serif tension.
- Grid strength
- Implicit — rhythm from typography ladder + scarce yellow accents.
Color philosophy
Pure #000000 ground; #1a1a1a dark-on-near-black text hierarchy; electric #ffff00 yellow as structural brand signal; cream tint surfaces.
- #000000 absolute ground
- #1a1a1a primary text on dark (near-black hierarchy)
- #ffff00 electric yellow brand accent (structural signal)
- #ffffeb pale yellow secondary surface
- #dddddd light grey tertiary text
- #ffffff and #f0d7ff soft accent surfaces
- #e4e4d0 warm cream border
- #333333 medium grey for borders
- #8a8a80 muted slate for tertiary
Gradients (paste-ready)
0 explicit gradients — clean flat surfaces with structural yellow accents
Typography rules
- Figtree as primary grotesque — body 15-20px, weights 400/600/700
- EB Garamond preloaded for editorial serif display moments
- Letter-spacing 0 standard
- Line-height 1.5-1.6 body, 1.05-1.1 display
- Weight ladder: 400 body, 600 emphasis, 700 display
Spacing rules
- 4px base with unusual 11/14/22 increments — Figtree's optical rhythm
- Scale 2/4/8/11/14/16/20/22
- Section vertical rhythm 96-160px
- Card padding 24-32px
Design tokens
Palette, type, and space — all agent-readable.
12 colors · hex / rgb / hsl / oklch
- foregroundalpha--dark--5-351%
- HEX
#1A1A1A - RGB
rgb(26, 26, 26) - HSL
hsl(0, 0%, 10%) - OKLCH
oklch(21.78% 0.0000 89.76)
- HEX
- foregroundbase-color-neutral--black24%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- brand15%
- HEX
#FFFF00 - RGB
rgb(255, 255, 0) - HSL
hsl(60, 100%, 50%) - OKLCH
oklch(96.80% 0.2110 109.77)
- HEX
- backgroundalpha--light--5-39%
- HEX
#FFFFEB - RGB
rgb(255, 255, 235) - HSL
hsl(60, 100%, 96%) - OKLCH
oklch(99.47% 0.0261 106.86)
- HEX
- background0%
- HEX
#DDDDDD - RGB
rgb(221, 221, 221) - HSL
hsl(0, 0%, 87%) - OKLCH
oklch(89.75% 0.0000 89.76)
- HEX
- backgroundlink-color--link-alternate0%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- foreground0%
- HEX
#8A8A80 - RGB
rgb(138, 138, 128) - HSL
hsl(60, 4%, 52%) - OKLCH
oklch(63.04% 0.0146 106.81)
- HEX
- backgroundbase-color--dawn0%
- HEX
#F0D7FF - RGB
rgb(240, 215, 255) - HSL
hsl(278, 100%, 92%) - OKLCH
oklch(91.19% 0.0598 312.87)
- HEX
- neutralbase-color--lumen-dark0%
- HEX
#E4E4D0 - RGB
rgb(228, 228, 208) - HSL
hsl(60, 27%, 85%) - OKLCH
oklch(91.35% 0.0266 106.92)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 12 nodes captured; depth capped at 6 for readability.
- body
- └─ div
- ├─ div
- │ └─ divbanner
- │ └─ div
- │ └─ Navnavigation
- ├─ Main
- │ ├─ div (×3)
- │ │ └─ Section
- │ └─ Section (×2)
- └─ div
- └─ Footer
Accessibility
WCAG contrast matrix.
84 combinations · 60 pass AA · 52 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FFFFEB | 20.76 | AAA | AAA | +105 | foreground on background |
Aa | #FFFFEB | #000000 | 20.76 | AAA | AAA | -107 | background on foreground |
Aa | #000000 | #FFFF00 | 19.56 | AAA | AAA | +101 | foreground on brand |
Aa | #FFFF00 | #000000 | 19.56 | AAA | AAA | -103 | brand on foreground |
Aa | #1A1A1A | #FFFFFF | 17.40 | AAA | AAA | +104 | foreground on background |
Aa | #FFFFFF | #1A1A1A | 17.40 | AAA | AAA | -107 | background on foreground |
Aa | #1A1A1A | #FFFFEB | 17.20 | AAA | AAA | +103 | foreground on background |
Aa | #FFFFEB | #1A1A1A | 17.20 | AAA | AAA | -106 | background on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://cdn.prod.website-files.com/682f84b3838c89f8ff7667db/683215c6f233131a07d8bafc_navbar_logo.svg- Format
- SVG
- Dimensions
- 82×23
- Loading
- eager
- srcset
- no
- Full Page
- ai
- productivity
- dark
- 2026-05-17
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


