Productivity

Superhuman

superhuman.com15 colors5 componentsSuper Sans VFMulti-page · 12 screens

Superhuman is the AI productivity suite that gives you superpowers everywhere you work. So you can be more creative, strategic, and impactful.

Remix Visit

Remix

Visit

12 screenshots captured· superhuman.com

1 / 12 · Superhuman: Docs, Mail, and AI That Work Everywhere · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from superhuman.com

Primary

#714CB6

Primary CTA, brand accent, active state

#D4C7FF

Secondary accent / hero band

#4F5022

Inline link colour

#421D24

Accent / decorative

#281647

Accent / decorative

#0A476D

Accent / decorative

#0C4243

Accent / decorative

#E8E0FF

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#73716D

Card / panel background

#F7F5F2

Alternating section band

#292827

Headings / primary text

#000000

Neutral

#141413

Neutral

#DEDBD5

Neutral

Typography · Super Sans VF

link16px · 460 · 24px

body16px · 600 · 16px

body14px · 600 · 16px

body18px · 540 · 27px

list-item16px · 460 · 19.2px

heading18.72px · 700 · 28.08px

body14px · 540 · 10px

body16px · 540 · 24px

h328px · 540 · 32px

body20px · 460 · 26px

body20px · 540 · 30px

heading39px · 460 · 46.8px

body14px · 460 · 21px

h161px · 460 · 67.1px

caption12px · 540 · 18px

body16px · 700 · 24px

heading32px · 600 · 48px

body20px · 700 · 30px

body18px · 700 · 27px

caption12px · 540 · 18px

heading28px · 540 · 32px

h164px · 540 · 61.44px

h264px · 540 · 57.6px

body20px · 460 · 30px

display49px · 460 · 58.8px

display48px · 460 · 46.08px

heading26px · 460 · 33.8px

body22px · 460 · 16.8px

button20px · 460 · 22px

body14px · 500 · 16.8px

caption12px · 700 · 18px

body16px · 700 · 16px

button14px · 600 · 18px

h236px · 600 · 40px

h349px · 540 · 58.8px

table-header16px · 700 · 18px

button32px · 540 · 40px

body14px · 540 · 20px

caption12px · 600 · 14.4px

h140px · 540 · 44px

h249px · 540 · 58.8px

button16px · 540 · 24px

table-header16px · 700 · 19.2px

body16px · 600 · 24px

heading36px · 600 · 40px

h249px · 460 · 58.8px

heading31px · 460 · 37.2px

body25px · 460 · 30px

h139px · 460 · 46.8px

h225px · 460 · 30px

button16px · 600 · 16px

h140px · 460 · 48px

h331px · 540 · 37.2px

input16px · 460 · 19.2px

body20px · 600 · 30px

body18px · 460 · 21.6px

Typography · Super Serif VF

quote18px · 460 · 27px

body16px · 460 · 24px

button32px · 540 · 40px

Typography · Super Sans Mono VF

h214px · 540 · 16.8px

Spacing

16px

4px

24px

32px

8px

12px

40px

96px

Elevation

color(srgb 0.278431 0.270588 0.262745 / 0.16) 0px -4px 8px 0.5px

color(srgb 0.45098 0.443137 0.427451 / 0.2) 0px 0px 0px 1px inset

rgb(255, 255, 255) 0px -5px 0px 0px, rgb(255, 255, 255) 0px 5px 0px 0px

color(srgb 0.988235 0.980392 0.968627 / 0.2) 0px 0px 0px 1px inset

Components · 5

Remixes of Superhuman

Latest remixes

No public remixes yet. Be the first to make one.

Remix it