Typography
scale ratio 1.442- Satoshi Fontcss: SatoshiFontbody400 500 600 70071%
- Clash Grotesk Fontcss: ClashGroteskFontdisplay70029%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Clash Grotesk Font | 60px | 700 | 1 | 0em |
| headline | Clash Grotesk Font | 48px | 700 | 1 | 0em |
| title | Satoshi Font | 20px | 600 | 1.4 | 0em |
| body | Satoshi Font | 20px | 500 | 1.4 | 0em |
| body-sm | Satoshi Font | 16px | 500 | 1.5 | 0em |
| label | Satoshi Font | 14px | 500 | 1.429 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa48Aa60
- Body size
- 20px / 1.4
- Display size
- 60px
- Display tracking
- 0em
- Case
- title
Color
dark schemePalette by painted area
- Text on bg
- 20.21:1
- Muted on bg
- 14.58:1
- Accent on bg
- 7.36:1
- Dark mode
- none
Declared accent tokens
- --button-accent-fill#FF5EC4painted
- --button-primary-fill#2F39BApainted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 10
- 12
- 16
- 24
- 32
- 40
- 64
- 96
- 128
Corner radii
6812pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Sign up for free
- backgroundColor
- #FFFFFF
- textColor
- #060419
- rounded
- 6px
- padding
- 8px 12px
- height
- 36px
- fontFamily
- Satoshi Font
- fontSize
- 14px
- fontWeight
- 600
- border
- 1px solid #FFFFFF
button-secondary
- backgroundColor
- #2F39BA
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 0px
- height
- 50px
- fontFamily
- SatoshiFont
- fontSize
- 16px
- fontWeight
- 400
card
- rounded
- 8px
- padding
- 24px
- border
- 1px solid #15194F
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0
Layout & motion
- Container
- 1280px
- Grid columns
- 3
- Hero
- split
- Navigation
- top-sticky
- Page height
- 10,715px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 125ms 150ms 200ms 300ms
- Transitions
- 122
- Keyframes
- 5
- Stack
- next.js, tailwind, prismic, hubspot, intercom, google-tag-manager, vercel, cloudflare
Page sections (10)
section labels are heuristic
01nav
02heroNEWSLETTERS. PODCASTS. COMMUNITY.
03feature detail?STAND OUT IN THE INBOX
04feature detail?NO CODE. NO LIMITS.
05feature detail?Monetize your content
06features?BUILD YOUR CONTENT YOUR WAY
07features?MORE THAN JUST NEWSLETTERS
08feature detail?THE ONE PLATFORM FOR EVERY CREATOR
09faqCONNECT YOUR NEWSLETTER WITH THE TOOLS YOU LOVE
10footer
How beehiiv compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.44×: steeper than 84% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 20.2:1: higher than 79% of indexed sites (median 17.6:1).
- Page length
- 10,715px: longer than 73% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Satoshi Font
- The only site in the index that loads Satoshi Font.
- Clash Grotesk Font
- The only site in the index that loads Clash Grotesk Font.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does beehiiv use?
beehiiv uses Satoshi Font (loaded as "SatoshiFont") for body text. Clash Grotesk Font (loaded as "ClashGroteskFont") is used for headings.
What are beehiiv's brand colors?
beehiiv's website uses a dark scheme: background #060419, text #FFFFFF, muted text #D9DBDF and borders #4E4E6C.
How is beehiiv's website laid out?
The most common corner radius is 6px, body text is 20px with 1.4 line height, and the page container is 1280px wide.
