Superhuman
Fast, keyboard-first email client
A premium, keyboard-first email client whose marketing site carries a dark, glowing-purple aesthetic.
superhuman.comColor palette
Accent
Primary#1b1938
Primary brand color — key actions and emphasis.
Primary Deep#0e0c1f
Accent color used within the product's own UI.
Neutral
On Primary#ffffff
Text and icon color on a solid primary fill.
Ink#292827
Primary text color.
Ink Mute#73706d
Primary text color.
Ink Faint#9a9794
Primary text color.
Canvas#ffffff
Page background.
Canvas Soft#fafaf8
Page background.
Surface Violet Soft#c9b4fa
Card and panel surfaces.
Surface Teal Deep#0e3030
Card and panel surfaces.
Surface Teal Mid#155555
Card and panel surfaces.
Hairline#e8e4dd
Borders and dividers.
Hairline Dark#3f3a52
Borders and dividers.
On Dark Mute#bcbac9
Text and icon color on a solid primary fill.
On Dark Faint#5a5772
Text and icon color on a solid primary fill.
Type scale
- Display Xxl
- 64px · 540 · 0.96
- Display Xl
- 48px · 460 · 0.96
- Display Lg
- 28px · 540 · 1.14
- Display Md
- 22px · 460 · 1.1
- Heading Lg
- 20px · 460 · 1.2
- Body Strong
- 18.72px · 700 · 1.5
- Body Lg
- 18px · 540 · 1.5
- Body Md
- 16px · 460 · 1.5
- Button Md
- 16px · 700 · 1
- Button Cap
- 14px · 600 · 1
- Caption
- 14px · 460 · 1.4
- Micro
- 12px · 540 · 1.4
Fonts
PrimarySuper Sans VFWeights 460, 540, 600, 700Fallback: system-ui, -apple-system, Segoe UI, Roboto
Spacing & shape
- Xxs
- 2px
- Xs
- 4px
- Sm
- 8px
- Md
- 12px
- Lg
- 16px
- Xl
- 24px
- Xxl
- 32px
- Huge
- 64px
- Xs
- 4px
- Sm
- 6px
- Md
- 8px
- Lg
- 12px
- Xl
- 16px
- Full
- 9999px
Guidelines
- Reserve Primary for primary actions and emphasis — it is the system's one accent color.
- Keep type on the documented family set (Super Sans VF).
- Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
- Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 64px) instead of arbitrary padding.
- Don't apply Primary as a full-page background or a large fill.
- Don't introduce a second accent color alongside Primary.
- Don't mix in an additional typeface beyond the ones documented here.