All design systems Superhumandesign system · reference
Light interfaceMeasured superhuman.com

Superhuman

Premium, calm productivity tool that feels crafted and quietly luxurious.

This page is styled with Superhuman’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#F2F0EB
Page behind everything

Surface#FFFFFF
Cards, panels, menus

Text#141412
Headings and body

Muted text#292827
Secondary info

Line#E5E5E5
Dividers and outlines

Accent#714CB6
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 16.2:1Muted on background 12.9:1Text on accent 6.2:1

Every colour found on their site

#292827#141412#FFFFFF#D4C7FF#714CB6#F2F0EB#F7F5F2#0C4243#421D24#DEDBD5

Typography

Headings use Super Sans VF (company-only; shown here with the free look-alike Inter). Body text uses Super Sans VF (company-only; shown with Inter).

h1Super Sans VF · 64px · 540
Superpowers, everywhere you work
h2Super Sans VF · 26px · 460
Mail, Docs, and AI that works in every app and tab
pSuper Sans VF · 14px · 460
book it for monday
liSuper Sans VF · 16px · 460
Products

Corners & shadows

Corner sizes used

12px
8px

Shadows

Shadow 1
Shadow 2
Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompaniesContactsMeetings
InterestedCallbackBengaluru
Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

CompanyOwnerStatusLast touch
Zomato
Food tech · Gurugram
PRCallback18 days ago
Licious
Food tech · Bengaluru
RMInterestedToday
Delhivery
Logistics · Gurugram
ASNo answer35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Superhuman’s live website. Click to enlarge.

Buttons · 2

#D4C7FF · corners 8px · 36px
#714CB6 · corners 12px · 52px

Navigation bar · 1

no fill · square · Super Sans VF 16px

Buttons · 1

no fill · corners 12px · Super Sans VF 16px

Icons

28 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

850 × 478
474 × 266
474 × 266
4061 × 2304
1200 × 791
1200 × 800
1336 × 1358
1250 × 950
1920 × 1080
2656 × 1248

Do & don’t

What makes it Superhuman
  • Warm off-white paper-like background instead of stark white
  • Soft purple accent used only on the main call-to-action button
  • Subtle thin shadows and borders instead of bold colour blocks
Do
  • Use a warm neutral background instead of pure white
  • Keep the purple accent rare and reserved for the one primary action
  • Use soft, subtle shadows for depth
Don’t
  • Don't use bright saturated colours across the UI
  • Don't use stark white backgrounds
  • Don't use heavy borders or hard shadows

For AltLeads: Borrow the warm neutral background and restrained single-accent button to make the CRM feel premium and calm rather than loud.

Copy the tokens

Paste into any project to try this look.

/* Superhuman · values measured from https://superhuman.com/ · reference only, their brand belongs to them */
:root {
  --bg: #F2F0EB;
  --surface: #FFFFFF;
  --text: #141412;
  --muted: #292827;
  --line: #E5E5E5;
  --accent: #714CB6;
  --on-accent: #FFFFFF;
  --radius-button: 12px;
  --radius-card: 8px;
  --radius-small: 8px;
  --button-height: 52px;
  --font-heading: "Super Sans VF", "Inter", system-ui, sans-serif;
  --font-body: "Super Sans VF", "Inter", system-ui, sans-serif;
  --shadow: color(srgb 0.988235 0.980392 0.968627 / 0.2) 0px 0px 0px 1px inset;
}
Enlarged image
Superhuman