beehiiv — bold creator-platform landing page

---
version: alpha
name: beehiiv — bold creator-platform landing page
colors:
  surface: '#060419'
  ink: '#ffffff'
  primary: '#2f39ba'
typography:
  primary:
    fontFamily: ClashGroteskFont
    fontSize: 60px
    fontWeight: 700
    lineHeight: 60px
  body:
    fontFamily: SatoshiFont
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.ink}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.primary}'
---

## Overview

A dark editorial SaaS landing page uses oversized uppercase Clash Grotesk headlines, pink accent gradients, layered product mockups, creator stories, light pricing cards and a blue-violet closing invitation.

Source: https://www.beehiiv.com/. Captured 2026-10-10T06:18:13.922779+00:00. This is an observational reference, not an official brand specification.

## Colors

surface: #060419; ink: #ffffff; primary: #2f39ba. Tokens describe the observed core surfaces and text, not every color within illustrations or embedded product screenshots. Computed parent styles can differ from painted child text; white action labels were checked visually.

## Typography

Primary visible text uses ClashGroteskFont, "ClashGroteskFont Fallback", sans-serif at 60px/60px, weight 700, tracking normal. The body sample uses SatoshiFont, "SatoshiFont Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" at 20px/28px, weight 500. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Capture method: the full-page image is stitched from sequential native-resolution viewport screenshots at measured document coordinates. Overlap excludes repeated sticky navigation; content pixels are retained without source DOM edits. Animated illustrations may show different moments across viewport tiles. This is a layout reference, not one simultaneous animation frame.

Open with a left-aligned stacked headline, two signup choices and layered product imagery to the right. Follow a publisher-mark strip with product demonstration grids, creator stories, contrasting pricing cards, testimonial and metric sections, integrations, FAQ and a conversion panel before the dense footer.

The full-page reference was captured at 1440px width with a measured document height of 9443px. Mobile evidence covers the opening 390×844px viewport; it is not a complete mobile-page audit.

At 390px the header compresses to the wordmark, signup action and hamburger. The hero headline drops from 60px to 42px, actions become full-width stacked rows and the product illustration moves below the copy. Lower isolated components were captured separately for their responsive evidence.

## Elevation & Depth

Soft blue/violet glows surround dark product windows. Most layout separation comes from contrast, generous section spacing and hairline boundaries.

## Shapes

Heavy uppercase lines and small-radius rectangular actions dominate; rounded cards are used for mockups and pricing.

## Components

Two public homepage variants appeared during preparation; this capture uses the reviewed Product/Customers/Build your way variant. Visible carousel imagery was allowed to load while in view. Missing-image warnings were traced to clipped or hidden nonpainted carousel assets. Signup and signin return source Cloudflare 403 pages, which were excluded.

## Do's and Don'ts

- Do preserve the grouping, hierarchy, spacing and responsive arrangement described above.
- Do use the screenshot and measured element evidence together; decorative dimensions not explicitly measured are estimates.
- Don't invent hover, error, loading or completion states from the static capture.
- Don't reuse source customer quotations, logos or numeric claims as endorsements for another product.