Superhuman Design System
Light · Generated 18/04/2026 · 17 colors · 38 type tokens · 18 spacing steps · 3 motion tokens
v1.0.0
Color Palette
Background Colors
White
#FFFFFF
White 2
#F7F5F2
Dark Red 2
#421D24
Purple
#714CB6
Dark Cyan 2
#0C4243
Text Colors
Dark Gray
#292827
Black
#000000
Dark Gray 2
#141412
Dark Red
#4E242C
Accent & Fill Colors
Purple 2
#9E6EE5
Light Blue
#D4C7FF
Dark Gray 3
#141413
Dark Cyan
#027E6F
Red
#FF4814
Blue
#1173A8
Light Gray (border)
#DEDBD5
Typography
Base Font · Times / Super Sans VF
Times
The fastest email experience ever made. Keyboard shortcuts, AI assistance, and workflows built for high-velocity teams.
Regular · 400 Italic Bold · 700
UI Font · Super Sans VF / Inter
Super Sans VF
Zero latency. AI triage. Split inbox. Done with email, twice as fast.
400 W460 Medium W540 Semi Bold
The fastest email
Display · 42.48px · Bold · Times · line-height: 50.97px · letter-spacing: −1.168px
Keyboard first design
Heading XL · 34.78px · Bold · Times · line-height: 41.73px · letter-spacing: −0.956px
AI-powered workflows
Heading LG · 28px · Bold · Times · line-height: 33.98px · letter-spacing: −0.63px
Inbox Zero, every day
Heading MD · 22px · Semibold · Super Sans · line-height: 28.08px · letter-spacing: −0.315px
Superhuman is the fastest email experience ever built. It's built for high-velocity teams, founders, and executives who take email seriously.
Body · 18px · Regular · Times · line-height: 27px · letter-spacing: −0.144px
Reply in seconds. Never miss a follow-up. Focus time starts now.
Body UI · 16px · Regular · Super Sans · line-height: 24px · letter-spacing: −0.135px
INBOX · DRAFTS · SENT · SCHEDULED
Label · 14px · Semibold · caps · letter-spacing: +0.06em
Line Heights
Tight
16px
Snug
16.8px
Normal
18px
Relaxed
19.2px
Loose
24px
LH-6
27px
LH-9
32px
LH-10
33.98px
LH-11
41.73px
LH-12
50.97px
Letter Spacing
AI Mail
Tight · −1.168px
--letter-spacing-tight · display 42px+
Inbox
Normal · −0.956px
--letter-spacing-normal · headings 35px
Drafts
Wider · −0.63px
--letter-spacing-wider · headings 28px
Send
LS-8 · −0.12px
--letter-spacing-ls-8 · body, UI text
Spacing
Spacing Scale
18 tokens — 4px → 282.49px
4
5
6
8
10
12
16
18
20
24
32
36
40
48
64
80
96
282.5
Borders
Border Radii
SM
8px
MD
16px
Superhuman uses a minimal two-step radius system: 8px for small components (inputs, chips, icon containers) and 16px for cards, panels, and modals. No pill shapes are defined as tokens — the focus is on clean, rectilinear surfaces with gentle rounding.
Border Width
--border-width-hairline
1px · dividers, card borders, inputs
The single border width applied universally throughout the system, using warm gray #DEDBD5 as the border color.
Shadow / Elevation
Shadow Tokens
1 token — upward shadow
--shadow-sm
Compose toolbar, sticky bars
rgba(135,141,162,0.16) 0px −4px 8px 0.5px — an upward-facing shadow used for the email compose bar at the bottom of the viewport, creating lift from below
Border-based
Cards, containers
Superhuman primarily uses 1px #DEDBD5 borders for surface definition — the minimal shadow palette reflects their preference for flat, spacious layouts
Fill-based depth
Layered surfaces
Background color differentiation between #FFFFFF and #F7F5F2 creates subtle hierarchy without shadows
Z-Index
LayerValueUsage
--z-11Base content layer — email list, compose area, main UI
--z-2201High-priority floating elements — command palette, dropdowns, tooltips
--z-32,147,483,647Maximum browser z-index (true int32 max) — absolutely top overlay layer
Breakpoints
No Breakpoint Tokens Defined
Superhuman does not expose responsive breakpoints as CSS custom properties. The web app is primarily a desktop-first experience — responsive behavior is managed at the component level without a shared token layer.
Opacity
No Opacity Tokens Defined
Superhuman does not define named opacity tokens. Transparency is applied inline — for example, text at opacity: 0.45 for labels, opacity: 0.55 for secondary text, and opacity: 0.65 for body copy on tinted backgrounds.
0.35
placeholder
0.45
labels, meta
0.55
secondary
0.65
body copy
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-white14.72:1AAA
--color-dark-gray--color-white-213.52:1AAA
--color-dark-gray--color-dark-red-21.0:1Fail
--color-dark-gray--color-purple2.39:1Fail
--color-dark-gray--color-dark-cyan-21.31:1Fail
--color-black--color-white21:1AAA
--color-black--color-white-219.3:1AAA
--color-black--color-dark-red-21.43:1Fail
--color-black--color-purple3.41:1AA Large
--color-dark-gray-2--color-white18.44:1AAA
--color-dark-gray-2--color-white-216.95:1AAA
--color-dark-gray-2--color-purple3.0:1AA Large
--color-dark-red--color-white13.02:1AAA
--color-dark-red--color-white-211.97:1AAA
--color-dark-red--color-dark-red-21.13:1Fail
CSS Variables Reference
Background Colors5 tokens
White--color-white#FFFFFF
White 2 (warm)--color-white-2#F7F5F2
Dark Red 2--color-dark-red-2#421D24
Purple--color-purple#714CB6
Dark Cyan 2--color-dark-cyan-2#0C4243
Text & Accent Colors12 tokens
Dark Gray--color-dark-gray#292827
Black--color-black#000000
Dark Gray 2--color-dark-gray-2#141412
Dark Gray 3--color-dark-gray-3#141413
Dark Red--color-dark-red#4E242C
Purple 2--color-purple-2#9E6EE5
Light Blue--color-light-blue#D4C7FF
Dark Cyan--color-dark-cyan#027E6F
Red--color-red#FF4814
Blue--color-blue#1173A8
Light Gray (border)--color-light-gray#DEDBD5
Blue 2 (shadow)--color-blue-2rgba(135,141,162,.16)
Typography38 tokens
Base Font (serif)--font-family-baseTimes
UI Font (variable)--font-family-2Super Sans VF
Regular--font-weight-regular400
W460--font-weight-w460460
Medium--font-weight-medium500
W540--font-weight-w540540
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs14px
XS--font-size-xs16px
SM--font-size-sm18px
LG--font-size-lg19.23px
XL--font-size-xl22px
2XL--font-size-2xl28px
4XL--font-size-4xl34.78px
5XL (display)--font-size-5xl42.48px
Tight (hero)--letter-spacing-tight−1.168px
Normal--letter-spacing-normal−0.956px
Wide--letter-spacing-wide−0.779px
Wider--letter-spacing-wider−0.63px
Widest--letter-spacing-widest−0.315px
LS-8 (body)--letter-spacing-ls-8−0.12px
Spacing18 tokens
Space 1--space-14px
Space 2--space-25px
Space 3--space-36px
Space 4--space-48px
Space 6--space-612px
Space 8--space-816px
Space 16--space-1624px
Space 20--space-2032px
Space 32--space-3240px
Space 40--space-4048px
Space 48--space-4864px
Space 64--space-6480px
Space 80--space-8096px
Space 96--space-96282.49px
Borders & Radius3 tokens
Hairline--border-width-hairline1px
SM--radius-sm8px
MD--radius-md16px
Motion, Shadow & Layers6 tokens
Instant--duration-instant200ms
Fast--duration-fast300ms
Ease In-Out--easing-ease-in-outease-in-out
Upward shadow--shadow-smrgba(135,141,162,.16) 0px −4px 8px
Base--z-11
High-priority UI--z-2201
Max (int32)--z-32,147,483,647
Design System Preview · Superhuman (Light) · Generated 18/04/2026 · 17 color tokens · 10 font-size · 2 font-family · 6 font-weight · 12 line-height · 8 letter-spacing · 18 spacing · 2 radius · 1 border-width · 1 shadow · 2 duration · 1 easing · 3 z-index · no breakpoints · no opacity