SuperWhisper · Full Page

SuperWhisper

Mac-native voice-to-text app'ın hairline-quiet editorial dili — Inter throughout, electric blue scarce state signal, multi-state semantic accent palette (green/red/magenta). Quiet-as-trust.

superwhisper.com/Added 2026-05-17

SuperWhisper Full Page — desktop screenshot

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?

SuperWhisper is the rare Mac-native voice-tool landing that decided the visual identity should match the product's invisible texture — almost-white, almost-quiet, almost-disappearing. We catalogued it because voice-to-text is a category that easily slips into one of two failure modes: garish neon-on-black AI cosplay, or generic blue-Apple chrome. SuperWhisper picked a third path — a near-white ground (#fafafa text on dark, with predominantly light surfaces), Inter typography in a tight 4px rhythm, and a saturated electric blue #0088ff appearing only as state signal. The page reads as the rare brand that respects the user's attention enough to whisper.

Design decisions observed

Near-white #fafafa as primary text colour (~2,014 surface refs) — the dominant signal, paired against dark accent areas.
#e5e7eb light-grey hairline borders (~1,970 refs) — structural device, threads every plate.
Inter (custom-loaded as __Inter_f367f3) as primary typeface 14-16px — neutral grotesque discipline.
ui-monospace at 6px (yes, six pixels) for ultra-fine technical metadata — extreme typographic restraint.
Electric blue #0088ff used scarcely as state signal — appears just enough to anchor active states.
Multi-accent palette #22c55e green / #dd55e7 magenta / #ff5252 red — used for tag/category signals, not chromatic decoration.
Container 320-1024px ladder — tight reading widths, no wide editorial sprawl.
Framer Motion + 12 catalogued gradients — restrained, atmospheric depth only.

What to study

How to brand a voice-tool product through quietness — most AI voice apps reach for waveform animations and neon gradients. SuperWhisper's page is so deliberately quiet that it makes you trust the product's restraint.
Inter at body 14-16px with system fallback — proven editorial choice for Mac-native tools, signals platform respect.
Multi-state accent palette (green/magenta/red/blue) used as semantic signals not chromatic decoration — green = success, red = error, blue = active, magenta = highlight.

What to avoid

Don't lift the 6px ui-mono usage without reason — SuperWhisper uses it for technical metadata only; in general contexts 6px is unreadable.
Don't paint surfaces in #0088ff — electric blue is signal, not paint.
Don't add waveform animations or voice-visualisation hero — SuperWhisper's restraint is the brand. Adding spectral animation collapses the identity.

Taste notes

The page feels like the inside of a beautifully crafted Mac app's About window — every hairline border is intentional, every accent is semantic rather than decorative, every paragraph at 14-16px is calibrated for the macOS reading rhythm. SuperWhisper understood that voice-tool marketing in 2026 is drowning in AI-cosplay. The way out is to look like the product feels: invisible until you need it.

Lineage & references

Direct heir to the Mac-native productivity app marketing lineage (Things 3, Bear, Craft, Day One) — premium hairline-grid editorial discipline.
Standing shoulder-to-shoulder with the modern voice-tool peer cohort (Wispr Flow, Whisper, Loom AI) — but SuperWhisper's chromatic restraint is the most disciplined.
Part of the Inter+system-stack editorial wave that includes Linear, Vercel, Resend — applied to consumer Mac app marketing.

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

SuperWhisper's design language is hairline-quiet Mac-native editorial. Near-white text (#fafafa) dominates against tight grey hairlines (#e5e7eb); Inter handles every typographic moment; ui-monospace at 6-12px for technical metadata; electric blue #0088ff scarce state signal; multi-state accents (green/magenta/red) semantic rather than decorative. The page reads as a beautifully crafted Mac app's About window.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (#fafafa near-white primary text dominant, #e5e7eb light-grey hairline borders as primary structural device, #000000 inversion zones for dark accents, #0088ff electric blue scarce state signal, #888b91 muted slate-grey for tertiary text, #303030 deep neutral border, #22c55e green success/confirm signal, #dd55e7 magenta highlight signal, #ff5252 red error/critical signal, #1a1a1a near-black for elevated dark sections), Inter as primary typeface (sizes 14-16px body, 24-56px display), ui-monospace 6-12px for technical metadata (note: 6px usage extreme), tight 4px spacing 1/4/6/8/10/12/14/16, container ladder 320/1024 (tight + medium), custom breakpoints sm=480 md=768 lg=1024 xl=1280 2xl=2000 (note: 2xl=2000, sm=480), Framer Motion + 12 catalogued gradients (atmospheric depth only). Treat blue #0088ff as state signal scarcely; treat green/magenta/red as semantic state colours not chromatic decoration. Apply the language, not the source brand's copy.

Overview

Layout: Hairline-bordered Mac-native plates; tight 320-1024 container; predominantly light surfaces with dark inversion zones.
Content width: 320-1024px ladder, no wide sprawl.
Framing: Mac app About window — hairline plates, semantic accents, Inter discipline.
Grid strength: Explicit hairline grid — #e5e7eb borders thread every cell.

Color philosophy

Near-white text dominant with #e5e7eb hairlines; electric blue scarce signal; multi-state accents semantic.

Mode strategyMixed: light primary with strategic dark inversion zones (potential light+dark variant compatible).

#fafafa near-white primary text/surface
#e5e7eb light-grey hairline borders (primary structural)
#000000 inversion zones for dark accents
#0088ff electric blue scarce active/signal
#888b91 muted slate-grey for tertiary text
#303030 deep neutral border (alt)
#22c55e green success signal
#dd55e7 magenta highlight signal
#ff5252 red error/critical signal
#1a1a1a near-black elevated dark surface

Gradients (paste-ready)

12 catalogued — atmospheric depth only

Typography rules

Inter for body and display (14-16px body, 24-56px display)
ui-monospace 6-12px for technical metadata
Letter-spacing 0 standard, tight on small caps
Weight 400 body, 500 emphasis
Line-height 1.5 body, 1.05-1.1 display

Spacing rules

4px base, scale 1/4/6/8/10/12/14/16
Section vertical rhythm 64-128px
Card padding 20-32px

Design tokens

Palette, type, and space — all agent-readable.

20 colors · hex / rgb / hsl / oklch

Save PNG

backgroundprimary-foreground
48%
- HEX#FAFAFA
- RGBrgb(250, 250, 250)
- HSLhsl(0, 0%, 98%)
- OKLCHoklch(98.51% 0.0000 89.76)
neutral
47%
- HEX#E5E7EB
- RGBrgb(229, 231, 235)
- HSLhsl(220, 13%, 91%)
- OKLCHoklch(92.76% 0.0058 264.53)
foregroundpure-black
3%
- HEX#000000
- RGBrgb(0, 0, 0)
- HSLhsl(0, 0%, 0%)
- OKLCHoklch(0.00% 0.0000 0.00)
accent
1%
- HEX#0088FF
- RGBrgb(0, 136, 255)
- HSLhsl(208, 100%, 50%)
- OKLCHoklch(63.21% 0.2018 254.09)
foreground
0%
- HEX#888B91
- RGBrgb(136, 139, 145)
- HSLhsl(220, 4%, 55%)
- OKLCHoklch(63.62% 0.0096 264.50)
neutral
0%
- HEX#303030
- RGBrgb(48, 48, 48)
- HSLhsl(0, 0%, 19%)
- OKLCHoklch(30.92% 0.0000 89.76)
accent
0%
- HEX#22C55E
- RGBrgb(34, 197, 94)
- HSLhsl(142, 71%, 45%)
- OKLCHoklch(72.27% 0.1920 149.58)
accent
0%
- HEX#DD55E7
- RGBrgb(221, 85, 231)
- HSLhsl(296, 75%, 62%)
- OKLCHoklch(68.19% 0.2367 324.94)
accent
0%
- HEX#FF5252
- RGBrgb(255, 82, 82)
- HSLhsl(0, 100%, 66%)
- OKLCHoklch(67.86% 0.2095 24.66)

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. 10 nodes captured; depth capped at 6 for readability.

body
├─ div (×2)
│ └─ div
│ └─ Nav
└─ Footer
└─ div
└─ Nav
└─ div
└─ div
└─ Form

Accessibility

288 combinations · 162 pass AA · 96 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	`#FAFAFA`	`#000000`	20.12	AAA	AAA	-105	background on foreground
Aa	`#000000`	`#FAFAFA`	20.12	AAA	AAA	+103	foreground on background
Aa	`#FAFAFA`	`#000103`	20.01	AAA	AAA	-105	background on accent
Aa	`#000103`	`#FAFAFA`	20.01	AAA	AAA	+103	accent on background
Aa	`#FAFAFA`	`#200401`	18.64	AAA	AAA	-104	background on accent
Aa	`#200401`	`#FAFAFA`	18.64	AAA	AAA	+102	accent on background
Aa	`#FAFAFA`	`#1C031F`	18.59	AAA	AAA	-104	background on accent
Aa	`#1C031F`	`#FAFAFA`	18.59	AAA	AAA	+102	accent on background
Aa	`#FAFAFA`	`#02160B`	17.93	AAA	AAA	-104	background on accent
Aa	`#02160B`	`#FAFAFA`	17.93	AAA	AAA	+102	accent on background

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 loaded0%svg32webp24unknown24

Hero image

https://superwhisper.com/image/demo/day-left.webp

Format: WEBP
Dimensions: 751×1440
Loading: auto
srcset: no

Page type

Full Page

Industry

ai
productivity

Theme

dark

Editorial disclaimer