beehiiv — creator pricing and feature matrix

---
version: alpha
name: beehiiv — creator pricing and feature matrix
colors:
  surface: '#060419'
  ink: '#ffffff'
  primary: '#2f39ba'
typography:
  primary:
    fontFamily: ClashGroteskFont
    fontSize: 64px
    fontWeight: 700
    lineHeight: 66px
  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 pricing page combines a bold centered value proposition, subscriber-count slider and billing switch with four light plan cards, creator proof, grouped feature comparison and product examples.

Source: https://www.beehiiv.com/pricing. Captured 2026-10-10T06:05:32.493333+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 64px/66px, 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

Introduce the offer with a centered display heading and a compact row of included product types. Align the subscriber selector and billing switch above Free, Lite, Pro and Enterprise cards. Follow with creator cards and a broad comparison matrix; continue through six product examples, questions and a glowing final CTA.

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

At 390px the heading changes from 64px/66px to 42px/44px. Included products wrap across two lines, and the slider and billing pill stack above the first full-width plan. The lower mobile comparison matrix was not visually audited.

## Elevation & Depth

Bright plan cards provide the strongest contrast on the ink background. Product examples use tonal borders; the closing CTA adds a blue-violet glow.

## Shapes

Use rounded light cards, a pill billing selector and circular slider thumb, while maintaining dense but aligned comparison rows.

## Components

The initial captured state shows 1,000 subscribers and yearly billing. Slider, billing changes, comparison accordions and purchases were not exercised. Source prices and claims are capture-time content, not guaranteed offers.

## 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.