Skip to main content
Back to Gallery

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.

wisprflow.ai/Added
Wispr Flow Full Page — desktop screenshot

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.

Mode strategyDark-only — the yellow-on-black is the entire identity.
  • #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

Save PNG
  • foregroundalpha--dark--5-3
    51%
    • HEX#1A1A1A
    • RGBrgb(26, 26, 26)
    • HSLhsl(0, 0%, 10%)
    • OKLCHoklch(21.78% 0.0000 89.76)
  • foregroundbase-color-neutral--black
    24%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • brand
    15%
    • HEX#FFFF00
    • RGBrgb(255, 255, 0)
    • HSLhsl(60, 100%, 50%)
    • OKLCHoklch(96.80% 0.2110 109.77)
  • backgroundalpha--light--5-3
    9%
    • HEX#FFFFEB
    • RGBrgb(255, 255, 235)
    • HSLhsl(60, 100%, 96%)
    • OKLCHoklch(99.47% 0.0261 106.86)
  • background
    0%
    • HEX#DDDDDD
    • RGBrgb(221, 221, 221)
    • HSLhsl(0, 0%, 87%)
    • OKLCHoklch(89.75% 0.0000 89.76)
  • backgroundlink-color--link-alternate
    0%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • foreground
    0%
    • HEX#8A8A80
    • RGBrgb(138, 138, 128)
    • HSLhsl(60, 4%, 52%)
    • OKLCHoklch(63.04% 0.0146 106.81)
  • backgroundbase-color--dawn
    0%
    • HEX#F0D7FF
    • RGBrgb(240, 215, 255)
    • HSLhsl(278, 100%, 92%)
    • OKLCHoklch(91.19% 0.0598 312.87)
  • neutralbase-color--lumen-dark
    0%
    • HEX#E4E4D0
    • RGBrgb(228, 228, 208)
    • HSLhsl(60, 27%, 85%)
    • OKLCHoklch(91.35% 0.0266 106.92)

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.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FFFFEB20.76AAAAAA+105foreground on background
Aa
#FFFFEB#00000020.76AAAAAA-107background on foreground
Aa
#000000#FFFF0019.56AAAAAA+101foreground on brand
Aa
#FFFF00#00000019.56AAAAAA-103brand on foreground
Aa
#1A1A1A#FFFFFF17.40AAAAAA+104foreground on background
Aa
#FFFFFF#1A1A1A17.40AAAAAA-107background on foreground
Aa
#1A1A1A#FFFFEB17.20AAAAAA+103foreground on background
Aa
#FFFFEB#1A1A1A17.20AAAAAA-106background 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.

Total30Lazy loaded10%svg44avif18webp15png3

Hero image

https://cdn.prod.website-files.com/682f84b3838c89f8ff7667db/683215c6f233131a07d8bafc_navbar_logo.svg
Format
SVG
Dimensions
82×23
Loading
eager
srcset
no
Page type
  • Full Page
Industry
  • ai
  • productivity
Theme
  • dark
Added
  • 2026-05-17

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.