Typography
scale ratio 1.166- Neue Montrealcss: NeueMontrealdisplay + body400 50084%
- Bethany Elingstonother400 50016%
- IBM Plex Monomono400 5000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Oswald | 48.56px | 400 | 0.04em | |
| headline | Bethany Elingston | 44px | 500 | 1.364 | 0.013em |
| title | Neue Montreal | 18px | 500 | 1.27 | 0.009em |
| body | Neue Montreal | 15px | 400 | 1.307 | 0.001em |
| body-sm | Neue Montreal | 12px | 400 | 1.7 | 0em |
| mono | IBM Plex Mono | 14px | 500 | 1.4 | 0em |
Type scale
Aa9Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa22Aa28Aa36Aa44
- Body size
- 15px / 1.307
- Display size
- 48.56px
- Display tracking
- 0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 18.27:1
- Dark mode
- none
Declared accent tokens
- --color-accent#4158EEnot on page
- --color-accent-bg#4158EEnot on page
- --color-accent-soft#6E9AF8not on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 14
- 15
- 16
- 17.5
- 20
- 24
- 32
- 40
Corner radii
451012162024pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 535px
Components
exact computed valuesbutton-primary
Shop the sale
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 8px
- padding
- 16px 32px
- height
- 57.2px
- fontFamily
- Neue Montreal
- fontSize
- 18px
- fontWeight
- 500
button-secondary
See how it works
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 0px 32px
- height
- 52px
- fontFamily
- Neue Montreal
- fontSize
- 18px
- fontWeight
- 500
card
- rounded
- 20px
- padding
- 48px
- backgroundColor
- #FFFFFF33
input
- rounded
- 0px
- height
- 24px
- padding
- 0px 0px
Layout & motion
- Container
- 1162px
- Grid columns
- 2
- Hero
- centered
- Navigation
- none-detected
- Page height
- 14,905px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 200ms 250ms 300ms 500ms
- Transitions
- 75
- Keyframes
- 0
- Stack
- next.js, tailwind, vercel
Page sections (8)
section labels are heuristic
02features?What’s the Pod?
03content?
05testimonialsDeep sleep, deeper cooling
07testimonials
08footerShop Friday
How Eight Sleep compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 48.6px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.17×: flatter than 93% of indexed sites (median 1.28×).
- Container
- 1162px: narrower than 67% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 14,905px: longer than 91% of indexed sites (median 8,217px).
- Corner radius
- Mostly 20px, shared by 4 of 274 indexed sites (1%).
- Neue Montreal
- One of 3 indexed sites that load Neue Montreal (1%).
- Bethany Elingston
- The only site in the index that loads Bethany Elingston.
- 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 Eight Sleep use?
Eight Sleep uses Neue Montreal (loaded as "NeueMontreal") for headings and body text. Bethany Elingston is used for other. IBM Plex Mono is used for code.
What are Eight Sleep's brand colors?
Eight Sleep's website uses a light scheme: background #FFFFFF, surface #F7F7F7, text #000000, muted text #151514.
How is Eight Sleep's website laid out?
The most common corner radius is 20px, body text is 15px with 1.307 line height, and the page container is 1162px wide.
Similar to Eight Sleep
Arial / Manrope / IBM Plex Mono#EEEAE3
Phosphor Iconsphosphoricons.com
Neue Montreal / Altera Carve / Neue Gstaad Normal Normal#EDEDED
Pangram Pangrampangrampangram.com
Cinetype / IBM Plex Sans / PP Formula#FFFCFC
Hexhex.tech
Source Sans Pro / IBM Plex Mono#FFFFFF
Hugging Facehuggingface.co
Neue Montreal / Editorial New#F7F4EF
Sunosuno.com