Beehiiv
A newsletter growth platform with a dark, editorial marketing surface (#0D0D0D near-black) and a distinctive orange-yellow accent (#F5A623 / #FFBB00) that signals monetization and energy. The product dashboard runs on clean whites with the orange accent for active states and primary CTAs. Beehiiv targets newsletter operators who want both audience growth tools and revenue features (paid subscriptions, ad network, boosts) — the design reflects this business seriousness with structured data tables, growth charts, and audience segmentation views. The marketing site uses bold typography (ABC Monument Grotesk or similar) with high contrast and direct copy.
Color Tokens
version: alpha name: Beehiiv description: "A newsletter growth platform with a dark, editorial marketing surface (#0D0D0D near-black) and a distinctive orange-yellow accent (#F5A623 / #FFBB00) that signals monetization and energy. The product dashboard runs on clean whites with the orange accent for active states and primary CTAs. Beehiiv targets newsletter operators who want both audience growth tools and revenue features (paid subscriptions, ad network, boosts) — the design reflects this business seriousness with structured data tables, growth charts, and audience segmentation views. The marketing site uses bold typography (ABC Monument Grotesk or similar) with high contrast and direct copy."
colors: primary: "#FFBB00" on-primary: "#0D0D0D" primary-hover: "#E8A800" ink: "#0D0D0D" ink-muted: "#6B7280" canvas: "#ffffff" surface-1: "#F9F9F9" surface-2: "#F0F0F0" border: "#E5E5E5" marketing-bg: "#0D0D0D" marketing-ink: "#F5F5F5" marketing-muted: "#888888" success: "#22C55E" danger: "#EF4444"
typography: display: fontFamily: "ABC Monument Grotesk, Inter, -apple-system, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.03em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.1)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Beehiiv is built for newsletter entrepreneurs, and the design serves that audience: growth charts, subscriber counts, revenue metrics, and publishing tools all in one product. The marketing site uses a dark, high-contrast aesthetic that signals ambition and differentiation from the Substack status quo. The product itself is clean and white, with orange/yellow accent for CTAs and key metrics. The brand communicates: your newsletter is a business, and we're serious about helping you build it.
2. Color System
Marketing (dark):
- Canvas: #0D0D0D — strong, editorial dark surface
- Orange-yellow: #FFBB00 — primary CTA, metric highlights
- Ink: #F5F5F5 — clean white text
Dashboard (light):
- White canvas, light gray surfaces for panel differentiation
- Orange-yellow accent carries through for CTA consistency
- Standard success/danger for email metrics (open rate, unsubscribes)
3. Typography
ABC Monument Grotesk or similar heavyweight grotesque for marketing display — tight tracking, aggressive weight, editorial authority. Inter for product UI — clean and functional. The marketing type communicates ambition; the product type communicates reliability.
4. Components & Patterns
- Post editor: Clean WYSIWYG with block-based content, preview toggle
- Subscriber table: Email, source, tier (free/paid), join date, open rate — data-dense
- Growth chart: Line graph showing subscriber count over time, milestone markers
- Monetization dashboard: Revenue cards — monthly ARR, active paid subscribers
- Ad network: Available boost slots with CPM and target audience data
- Publication settings: Brand color, logo upload, domain configuration
5. Spacing & Layout
Dashboard: 240px sidebar, content max 1100px. Post editor: 720px content width centered. Subscriber table: full-width with horizontal scroll on mobile. Marketing: 1280px max, large section padding.
6. Motion & Interaction
Growth chart animates on load (line draws in). Subscriber count increments on major milestones. Post publish flow has a satisfying success state with confetti. Standard transitions throughout at 200ms.