Typography
scale ratio 1.164- Super Sanscss: Super Sans VFdisplay + body360 440 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Super Sans | 64px | 440 | 0.96 | 0em |
| headline | Super Sans | 49px | 360 | 1.2 | -0.027em |
| title | Super Sans | 25px | 360 | 1.2 | -0.027em |
| body | Super Sans | 14px | 360 | 1.5 | 0em |
| body-sm | Super Sans | 12px | 600 | 1.5 | 0em |
| label | Super Sans | 16px | 360 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa18.5Aa20Aa25Aa26Aa28Aa39Aa49Aa64
- Body size
- 14px / 1.5
- Display size
- 64px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 13.52:1
- Muted on bg
- 5.54:1
- Accent on bg
- 5.66:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 96
Corner radii
812pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 126px
Components
exact computed valuesbutton-primary
Get Superhuman
- backgroundColor
- #1B1938
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 6px 6px
- height
- 50px
- fontFamily
- Super Sans
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #FFFFFF1F
- shadow
- color(srgb 0.0784314 0.0784314 0.0745098 / 0.24) 0px 1px 2px 0px, rgb(53, 48, 136) 0px 0px 0px 1px
button-secondary
Try Go
- backgroundColor
- #714CB6
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 6px 20px
- height
- 52px
- fontFamily
- Super Sans
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 12px
- padding
- 32px
- backgroundColor
- #F2F0EB
- shadow
- color(srgb 0.278431 0.270588 0.262745 / 0.04) 0px 0px 0px 1px, color(srgb 0.278431 0.270588 0.262745 / 0.06) 0px 4px 8px
Layout & motion
- Container
- 900px
- Grid columns
- 2
- Hero
- centered-over-media+media-below
- Navigation
- top-sticky
- Page height
- 7,847px
- Easing
- ease
- Durations
- 200ms 300ms 1000ms
- Transitions
- 63
- Keyframes
- 5
- Stack
- next.js, google-tag-manager, cloudflare, cloudfront
Page sections (10)
01nav
02logos
03heroSuperpowers, everywhere you work
04testimonialsGet help from agents right where you work
05feature detail“Go helps me stay in one tab and . Before, I was always bouncing between tabs an
06testimonialsSave 4+ hours every week
07feature detailAlign your team
08ctaDesigned for humans, built for enterprise
09ctaMake it your best workday yet
10footerConnect
How Superhuman compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.16×: flatter than 94% of indexed sites (median 1.28×).
- Container
- 900px: narrower than 87% of indexed sites (median 1242px).
- Text contrast
- 13.5:1: lower than 84% of indexed sites (median 17.6:1).
- Page length
- 7,847px: shorter than 54% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Super Sans
- The only site in the index that loads Super Sans.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Superhuman use?
Superhuman uses Super Sans (loaded as "Super Sans VF") for headings and body text.
What are Superhuman's brand colors?
Superhuman's website uses a light scheme: background #F7F5F2, surface #E8E0FF, text #292827, muted text #141413A6 and borders #73716D33.
How is Superhuman's website laid out?
The most common corner radius is 12px, body text is 14px with 1.5 line height, and the page container is 900px wide.
