What is Beehiiv's primary brand color?

Beehiiv runs a two-voltage system rather than a single brand color. The action voltage is an electric indigo wired into CSS as --button-primary-fill, which carries every primary CTA pill on the page; in the captured render it appears as 8 background fills, 8 borders, and 6 gradient stops. The emphasis voltage is a hot magenta wired as --button-accent-fill and --text-accent-pink — it never fills a button, only a gradient that fades the final word of the hero headline. The split keeps the page from collapsing into a single saturated wash; indigo signals where to click, magenta signals where to read.

What typefaces does Beehiiv use, and what are the substitutes?

The system runs two licensed sans-serifs: Clash Grotesk for display only (all-caps, 48-60px, weight 700) and Satoshi for nav, body, button, and label across the entire page below the hero (14-24px, weights 400-700). Clash carries the hero h1 and every section h2; Satoshi carries everything else. The closest open-source substitute for Clash Grotesk is Bebas Neue at slightly tighter tracking, or General Sans at the same weight; Satoshi has no perfect free analog but Inter at weight 500 transfers most cleanly. The display being uppercase-only is the move to preserve — title-case Clash loses the bulletin-board feel.

Why does Beehiiv use a violet-tinted black instead of pure black?

The page floor is a near-black violet, wired as --surface-page. Pure black on a content-heavy marketing page reads as a developer-tools surface (Vercel, Linear); the violet undertone shifts the register toward editorial and software-creator rather than infrastructure. Above the page floor the system layers two slightly lighter violet tones — surface-1 and surface-2 — that lift product cards and pricing columns off the floor by 25-point lightness contrast alone. The shadow tier is essentially absent (only 6 captured shadow occurrences); depth comes entirely from the violet surface ladder.

What corner-radius scale does Beehiiv use?

The radius scale is small-step plus pill. 6px appears 70 times in the captured page on cards, dropdowns, inputs, and most surface tiles; 12px appears 18 times on larger panels and feature blocks; 8px appears 13 times on secondary surfaces; the full pill appears 9 times on the hero CTA, secondary nav pills, and category tabs. There is no 16px or 20px middle tier — the system jumps from 12px directly to the fully-rounded pill. The 6px default is tighter than most newsletter platforms, lending the dark canvas a software-tool register rather than a publishing one.

Can I use this DESIGN.md to build my own React newsletter or creator site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Beehiiv's specific moves: near-black violet canvas rather than pure black, indigo-and-magenta split voltage with each color scoped to a single role, uppercase Clash Grotesk display anchoring every section heading, Satoshi across body and button, and hairline-bordered cards with no shadow tier. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into a Tailwind config or CSS variables. One caveat — the two-voltage split only holds discipline if you keep each color scoped; treating magenta as a CTA fill collapses the system back into single-accent SaaS chrome.

Beehiiv Design System

Beehiiv's marketing system pairs uppercase Clash Grotesk display with Satoshi body on a near-black violet canvas, an indigo CTA pill, and a magenta gradient that paints only the l…

About Beehiiv DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source beehiiv.com

Marketing & CRM
Productivity & SaaS

Beehiiv's marketing site is a creator-economy product wearing operator chrome. The page floor is a near-black violet — a deep indigo-black rather than pure black or charcoal — and the hero stacks an all-caps Clash Grotesk headline ("POWERING THE INTERNET'S BEST NEWSLETTERS") at 60px weight 700 in white, with only the final word fading from white into magenta via a left-to-right gradient. The CTA below it is an electric indigo pill, not the magenta the gradient introduces. Where Substack keeps its marketing surface on warm white with an unbordered serif column, and where ConvertKit leans on creator portraits over pastel washes, Beehiiv builds a control-panel aesthetic on a dark canvas and uses two distinct saturated tones to split the work — indigo for action, magenta for emphasis.

The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 18 color tokens organized into a violet-canvas surface ladder (page floor at near-black, surface-1 and surface-2 a half-step lighter), a two-color brand voltage (indigo for button fills, magenta for gradient highlights), and a small structural set for ink, ink-muted, and disabled text. 11 typography tokens split across Clash Grotesk (display only, uppercase, 48-60px weight 700) and Satoshi (everything else, 14-24px weights 400-700). 6 corner-radius tokens centered on a 6px default — 70 occurrences of 6px in the captured page, with a small 12px tier for larger panels and a full pill for the hero CTA. 17 components cover the hero block, the indigo pill CTA, the dark hairline-edged product card, the pricing column, the logo strip, the FAQ accordion, and the testimonial card.

Feed this file to Claude or Cursor and it reproduces Beehiiv's specific moves: near-black violet canvas rather than pure black, two-voltage split between indigo and magenta with each scoped to a single role, uppercase Clash Grotesk display anchoring every section heading, Satoshi across body and button, and hairline-edged cards with no shadow tier. The token references resolve cleanly so the AI never has to guess a value. The one move worth borrowing only with deliberate intent: the split-voltage discipline. Most marketing systems collapse to a single accent; Beehiiv's two-color split works because each tone has exactly one job and never trades places.

What makes it distinct

Split-voltage heroan electric indigo CTA pill carries the action, while magenta only colors the gradient on the final hero word, dividing what most platforms collapse into one accent
Uppercase Clash Grotesk displaythe hero h1 and every section h2 render in all-caps Clash Grotesk weight 700 at 48-60px, the loudest typographic move on the page
Two-typeface splitClash Grotesk for display only, Satoshi for nav, body, button, and label across the entire page below the hero
Near-black violet canvasthe page floor is a deep blue-black at near-black, not pure black, with surface tiles lifted by 25-point lightness contrast
Hairline-on-dark cardsevery card uses white-at-low-alpha borders (frequency 598), zero shadow tier, since shadows do not read on the violet floor across the captured surface

Live at beehiiv.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

beehiiv.com

Explore Beehiiv

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Beehiiv design system FAQ

Common questions about Beehiiv's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Beehiiv — official site

Beehiiv's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.