What makes SuperWhisper's design language stand out?

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.

What fonts and palette does SuperWhisper use?

The type system is ui-monospace, __Inter_f367f3, -apple-system, Inter and Flow Circular. The palette sits on a dark canvas around #FAFAFA, #E5E7EB, #000000 and #0088FF.

Can I transfer SuperWhisper's design language to my product?

The patterns transfer without cloning. Study how to brand a voice-tool product through quietness — most AI voice apps reach for waveform animations and neon gradients. The ai2 Design brief packages SuperWhisper's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

ai · productivity

SuperWhisper

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

superwhisper.comAdded 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 SuperWhisper’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

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.

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.

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

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

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

Surface styleHairline-bordered plates. Every section uses #e5e7eb 1px border.

0 drop shadow on marketing chrome
1px #e5e7eb hairline on every plate
Dark inversion zones (#000) used for hero anchor

Techniques

Hairline plate

bg white/fafafa, 1px #e5e7eb border, 8-12px radius, padding 20-32px.

Dark inversion accent

Pure #000 surface inside light page, used for hero/feature anchor.

Radii4 / 6 / 8 / 10 / 12Icon treatmentStroke 1.5px monoline.Icon setsCustom monoline set, Lucide-adjacent

Buttons 6-8px radius
Cards 8-12px radius

Primary CTA (download for Mac)
background
#000000
textColor
#fafafa
fontFamily
Inter, sans-serif
fontWeight
500
fontSize
14px
padding
10px 18px
borderRadius
8px
shadow
none
hover
background shifts to #1a1a1a
Tailwind
```
inline-flex items-center gap-2 rounded-lg bg-black px-4 py-2.5 text-sm font-medium text-[#fafafa] transition-colors hover:bg-neutral-900
```
Hairline plate
background
#ffffff
border
1px solid #e5e7eb
borderRadius
10px
padding
20px
textColor
#000
Tailwind
```
rounded-[10px] border border-[#e5e7eb] bg-white p-5 text-black
```
Status pill (semantic)
background
rgba(34,197,94,0.10)
textColor
#22c55e
fontFamily
ui-monospace
fontSize
11px
padding
2px 6px
borderRadius
4px
textTransform
uppercase
Tailwind
```
rounded bg-[#22c55e]/10 px-1.5 py-0.5 font-mono text-[11px] uppercase text-[#22c55e]
```

LevelsubtleDurations150ms / 200ms / 300ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)

HoverCTA bg shift, Card border deepens

Scroll patterns

Framer Motion fade + 8px translate

Quiet motion — Mac-native respect

Hover shifts colour, never position
Focus rings: 2px electric blue ring
Active 95% opacity

Approachmobile-first

Custom: sm=480 md=768 lg=1024 xl=1280 2xl=2000.

<768: single 320px content
768-1024: 720-1024px rail
≥1024: full container 1024px

Near-white #fafafa on light bg checked for contrast on dark inversion
Electric blue #0088ff passes AA on white at 14px+
Focus visible always

Next.js (assumed)Inter custom-loaded (__Inter_f367f3)ui-monospace system monoFramer Motion

Typography + hairline grid + semantic state accents = identity. Minimal illustration.

Inter preloaded woff2
System mono for technical metadata
Framer Motion scoped to reveals

Use Inter for every typographic moment
Reserve electric blue #0088ff for state signals
Use multi-state accents semantically (green=success, red=error, magenta=highlight)
Keep ground predominantly light with dark inversion zones

Don't paint surfaces in any accent — colour is semantic state
Don't add waveform/spectrum decorative animations
Don't widen the container beyond 1024px
Don't substitute system-only fonts for Inter

Mixed light/dark — light primary with inversion zones
Type lock: Inter + ui-monospace
Semantic accent usage only — no decorative chromatic surfaces

Hairline #e5e7eb high frequency
Font-family grep: Inter present
Electric blue used as state signal only
Semantic state colour mapping: green/red/magenta/blue
Container max-width: 1024px 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. 10 nodes across 7 levels, shallow to deep by color.

body2
- div (×2)1
  - div1
    - Nav
- Footer1
  - div1
    - Nav1
      - div1
        div1
        Form

Accessibility

288 combinations - 162 pass AA - 96 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: #FAFAFA
bg: #000000
APCA Lc: -105
Use: background on foreground

fg: #000000
bg: #FAFAFA
APCA Lc: +103
Use: foreground on background

fg: #FAFAFA
bg: #000103
APCA Lc: -105
Use: background on accent

fg: #000103
bg: #FAFAFA
APCA Lc: +103
Use: accent on background

fg: #FAFAFA
bg: #200401
APCA Lc: -104
Use: background on accent

fg: #200401
bg: #FAFAFA
APCA Lc: +102
Use: accent on background

fg: #FAFAFA
bg: #1C031F
APCA Lc: -104
Use: background on accent

fg: #1C031F
bg: #FAFAFA
APCA Lc: +102
Use: accent on background

fg: #FAFAFA
bg: #02160B
APCA Lc: -104
Use: background on accent

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

svg32 · 40%
webp24 · 30%
unknown24 · 30%

Hero image

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

Format: WEBP
Dimensions: 751x1440
Loading: auto
srcset: no

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

FAQ

Questions people ask about SuperWhisper

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

SuperWhisper

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 SuperWhisper

SuperWhisper

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 SuperWhisper

01What makes SuperWhisper's design language stand out?

02What fonts and palette does SuperWhisper use?

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

Side-by-side reads sharing this design signal.

More in this design language