What makes Wispr Flow's design language stand out?

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.

What fonts and palette does Wispr Flow use?

The type system is Figtree and Eb garamond. The palette sits on a dark canvas around #1A1A1A, #000000, #FFFF00 and #FFFFEB.

Can I transfer Wispr Flow's design language to my product?

The patterns transfer without cloning. Study electric yellow as brand-defining signal — #ffff00 is the kind of colour designers usually only use ironically. The ai2 Design brief packages Wispr Flow's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

ai · productivity

Wispr Flow

Voice-AI productivity with an electric-yellow editorial commitment — #ffff00 as structural signal, Figtree + EB Garamond grotesque-and-serif tension, a GSAP + Rive premium motion stack.

wisprflow.aiAdded 2026-05-17

Editorial note

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

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Wispr Flow’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

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.

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.

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

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

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

Surface styleFlat with structural yellow accents. No drop shadow; depth via yellow hairline borders.

0 drop shadow on marketing chrome
Yellow #ffff00 used as hairline or accent illustration
Cream-yellow #ffffeb for soft secondary surfaces

Techniques

Yellow structural accent

#ffff00 as 2px underline, hairline border, or illustration spot — never as fill.

Cream-yellow surface

bg #ffffeb at low opacity for soft accent surface inside black canvas.

Radii4 / 8 / 12 / 16Icon treatmentStroke 1.5-2px monoline, yellow stroke for accent icons.Icon setsCustom monoline set

Buttons 8-12px radius
Cards 12-16px radius

Primary CTA
background
#ffffff
textColor
#000000
fontFamily
Figtree, sans-serif
fontWeight
600
fontSize
15px
padding
12px 22px
borderRadius
10px
shadow
none
hover
subtle yellow border-bottom accent appears
Tailwind
```
inline-flex items-center gap-2 rounded-[10px] bg-white px-5 py-3 text-[15px] font-semibold text-black transition-all hover:border-b-2 hover:border-[#ffff00]
```
Yellow structural accent (underline)
borderBottom
2px solid #ffff00
paddingBottom
2px
Tailwind
```
border-b-2 border-[#ffff00] pb-0.5
```
Display headline (Figtree 700)
fontFamily
Figtree, sans-serif
fontSize
clamp(32px, 5vw, 56px)
fontWeight
700
letterSpacing
-0.01em
lineHeight
1.05
color
#ffffff
Tailwind
```
text-4xl font-bold leading-tight tracking-tight text-white md:text-5xl lg:text-6xl
```
Editorial serif accent (EB Garamond)
fontFamily
EB Garamond, serif
fontStyle
italic
fontSize
24px
color
#ffff00
Tailwind
```
font-serif italic text-2xl text-[#ffff00]
```

LevelexpressiveDurations300ms / 600ms / 900ms

Easings

cubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.22, 1, 0.36, 1)

HoverYellow underline appears on hover, CTA border-bottom transition

Scroll patterns

GSAP scroll-triggered choreography for hero
Rive animations for product illustrations
Section reveals — fade + 16px translate

Motion is brand expression — premium choreography
Respect prefers-reduced-motion — collapse to opacity-only
GSAP timelines registered on scroll, debounced

Hover triggers yellow accent (underline, border)
Focus rings: 2px yellow ring with 2px offset on dark surfaces
Active state 95% opacity

Approachmobile-first

Custom: sm=640 md=768 lg=992 xl=1280 (lg=992 not 1024).

<768: 16px gutters, single column, headline 32-40px
768-992: 720px content rail
≥992: full 1240px container

Near-black #1a1a1a on black uses contrast carefully — verify min 4.5:1
Yellow #ffff00 on black passes AAA (19.5:1)
Focus visible always
GSAP/Rive respect prefers-reduced-motion

Next.js (assumed)Figtree custom-loaded webfontEB Garamond preloadedGSAP for scroll choreographyRive for product illustration animation

Typography + structural yellow + GSAP+Rive motion = identity. Premium animation stack signals craft.

Figtree multiple weights preloaded woff2
EB Garamond Regular + Italic preloaded woff2
GSAP timelines registered on scroll
Rive runtime for product illustration

Use #ffff00 as structural signal — hairlines, accents, never CTA fill
Pair Figtree body with EB Garamond italic display
Commit to premium motion (GSAP/Rive)
Keep ground pure #000000 — no charcoal substitution

Don't paint button backgrounds in yellow
Don't substitute Inter for Figtree
Don't ship half-baked GSAP/Rive choreography
Don't widen the 1240px container

Dark-only — yellow-on-black non-negotiable
Type stack: Figtree + EB Garamond
Yellow coverage under 5% of pixels per viewport (structural usage)

Background dominant: #000000
Font-family grep: Figtree present, EB Garamond preloaded
Yellow #ffff00 usage: structural (underline/border/accent), never fill background
GSAP/Rive runtime detected
Container width: 1240px enforced

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 12 nodes across 6 levels, shallow to deep by color.

body1
- div3
  - div1
    - divbanner1
      - div1
        Navnavigation
  - Main2
    - div (×3)1
      - Section
    - Section (×2)
  - div1
    - Footer

Accessibility

84 combinations - 60 pass AA - 52 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #000000
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #000000
APCA Lc: -108
Use: background on foreground

fg: #000000
bg: #FFFFEB
APCA Lc: +105
Use: foreground on background

fg: #FFFFEB
bg: #000000
APCA Lc: -107
Use: background on foreground

fg: #000000
bg: #FFFF00
APCA Lc: +101
Use: foreground on brand

fg: #FFFF00
bg: #000000
APCA Lc: -103
Use: brand on foreground

fg: #1A1A1A
bg: #FFFFFF
APCA Lc: +104
Use: foreground on background

fg: #FFFFFF
bg: #1A1A1A
APCA Lc: -107
Use: background on foreground

fg: #1A1A1A
bg: #FFFFEB
APCA Lc: +103
Use: foreground on background

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

svg44 · 55%
avif18 · 23%
webp15 · 19%
png3 · 4%

Hero image

https://cdn.prod.website-files.com/682f84b3838c89f8ff7667db/683215c6f233131a07d8bafc_navbar_logo.svg

Format: SVG
Dimensions: 82x23
Loading: eager
srcset: no

Industry: ai
Industry: productivity
Theme: Dark
Added: 2026-05-17

FAQ

Questions people ask about Wispr Flow

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Wispr Flow

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about Wispr Flow

Wispr Flow

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about Wispr Flow

01What makes Wispr Flow's design language stand out?

02What fonts and palette does Wispr Flow use?

03Can I transfer Wispr Flow's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language