Beehiiv

www.beehiiv.com

The reference for newsletter / creator-platform brands with all-caps section H2 discipline — dark navy + magenta accent + ClashGrotesk display, real publisher logos from TIME / Newsweek / Adobe.

Marketing Platform Newsletter Creator Platform strong

Design tokens

navyDeep
white
black
muteLavender
muteSlate
magenta
pinkSoft
pinkLight
purple
elevatedDark
display
ClashGroteskFont, 'ClashGroteskFont Fallback', sans-serif (free Indian Type Foundry)
body
SatoshiFont, 'SatoshiFont Fallback', system-ui, sans-serif (free Indian Type Foundry)
mono
(none on homepage)

Do / Don't

Reference it for

  • Deep navy #060419 page with strong purple cast — distinctively darker than typical dark-mode navy
  • All-caps section H2s in ClashGrotesk — magazine-cover-stack feel
  • Two-tone hero H1: "POWERING THE INTERNET'S BEST NEWSLETTERS" with NEWSLETTERS in magenta on otherwise-white text
  • Free font stack: Satoshi (body) + ClashGrotesk (display) — both Indian Type Foundry, both free, both flagship-quality
  • "Sign up with Google" as primary CTA with Google G icon — bypasses email-form friction
  • "4.9/5 by 26,479 customers" trust signal below CTA with star rating
  • Magenta accent #ff5ec4 for emphasis text and pricing tier highlight
  • Four custom gradient-cycle keyframes (sreGradientCycle, etc.) — animated gradient effects on CTAs and section highlights

Do not copy

  • The Satoshi / ClashGrotesk licences (free, but consider variety)
  • The magenta #ff5ec4 exact hue
  • The "Powering the internet's best newsletters" copy
  • The 26,479 customer count
  • The customer logos (TIME, TechCrunch, Newsweek, Adobe) — beehiiv-specific
  • The "Sign up with Google" pattern unless the brand has Google OAuth integration

Signature moves

deep-navy canvas with magenta accent and all-caps H2s

a deep navy #060419 page with strong purple cast runs all-caps ClashGrotesk section H2s (magazine-cover-stack feel) with magenta #ff5ec4 emphasis, including a two-tone hero H1 (NEWSLETTERS in magenta on white).

gradient-cycle CTA motion on flat dark depth

four custom gradient-cycle keyframes (sreGradientCycle) animate gradient effects on CTAs and section highlights, with depth from gradients not shadow (one box-shadow) and an 8px workhorse radius.

Google-OAuth-first CTA with star trust signal

Sign up with Google (with the Google G) is the primary CTA bypassing email-form friction, with a 4.9/5 by 26,479 customers star trust signal below.