Typography
scale ratio 1.262- Interbody400 50073%
- Waldenburgdisplay30022%
- Geist Monomono4006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Waldenburg | 48px | 300 | 1.083 | -0.02em |
| headline | Waldenburg | 36px | 300 | 1.167 | 0em |
| title | Inter | 16px | 400 | 1.5 | 0.01em |
| body | Inter | 15px | 400 | 1.467 | 0.01em |
| body-sm | Inter | 14px | 400 | 1.286 | 0.01em |
| label | Inter | 14px | 500 | 1.5 | 0.01em |
| mono | Geist Mono | 13px | 400 | 1.692 | 0em |
Type scale
Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa36Aa48
- Body size
- 15px / 1.467
- Display size
- 48px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.51:1
- Muted on bg
- 4.71:1
- Accent on bg
- 20.51:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 6
- 8
- 9
- 10
- 12
- 14
- 16
- 18
- 20
- 24
- 32
- 40
- 131
Corner radii
1016pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 161px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 20px
- height
- 44px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
card
- rounded
- 16px
- padding
- 0px
- shadow
- rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px
Layout & motion
- Container
- 1176px
- Grid columns
- 12
- Hero
- left-aligned
- Navigation
- none-detected
- Page height
- 10,758px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 360ms
- Transitions
- 162
- Keyframes
- 0
- Stack
- next.js, tailwind, google-tag-manager
Page sections (12)
section labels are heuristic
01hero
02feature detail?Bringing
03features?Trusted by leading developers and enterprises
04features?Two platforms built on the same research foundation
05features?Create, edit, and localize in one AI platform
06features?Deploy agents that talk, type, and take action
07code sample?Or build anything with a powerful host of APIs
08feature detail?Showcasing the global impact of AI audio research
09features?Research that redefines human technology interaction
10features?Safety, built in
11features?Latest updates
12footer
How ElevenLabs compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 58% of indexed sites (median 1.28×).
- Container
- 1176px: narrower than 67% of indexed sites (median 1242px).
- Text contrast
- 20.5:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 10,758px: longer than 73% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Waldenburg
- The only site in the index that loads Waldenburg.
- 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 ElevenLabs use?
ElevenLabs uses Inter for body text. Waldenburg is used for headings. Geist Mono is used for code.
What are ElevenLabs's brand colors?
ElevenLabs's website uses a light scheme: background #FDFCFC, surface #F5F3F1, text #000000, muted text #777169 and borders #0000000D.
How is ElevenLabs's website laid out?
The most common corner radius is 16px, body text is 15px with 1.467 line height, and the page container is 1176px wide.
