beehiiv — luminous conversion panel

---
version: alpha
name: beehiiv — luminous conversion panel
colors:
  surface: '#060419'
  ink: '#ffffff'
  primary: '#2f39ba'
typography:
  primary:
    fontFamily: ClashGroteskFont
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
  body:
    fontFamily: ClashGroteskFont
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
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 luminous blue-violet panel isolates one oversized uppercase question and a single centered signup action against a near-black page.

Source: https://www.beehiiv.com/. Captured 2026-10-10T06:09:06.331732+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 48px/48px, weight 700, tracking normal. The body sample uses ClashGroteskFont, "ClashGroteskFont Fallback", sans-serif at 48px/48px, weight 700. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Inset one broad rounded panel inside generous dark side and vertical margins. Center the one-line desktop heading over a compact action; omit supporting paragraphs and secondary links so the invitation stays visually direct.

The isolated element is measured at 1440.00×440.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `div:nth-of-type(2) > div > main > div > section:nth-of-type(2)`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The 1440×440 section becomes 390×356. At 390px the heading reduces from 48px to 36px and wraps into two lines; the action expands from roughly 182px to 300px. The panel sits within 20px outer gutters.

## Elevation & Depth

A diffuse blue-violet glow and subtle outline separate the panel from its ink surroundings. Gradient colors are visually observed, not a measured stop list.

## Shapes

Use a rounded wide panel and small-radius rectangular action, without adding additional badges or input fields.

## Components

The link leads to the signup destination; that page was blocked by Cloudflare in this run. The CTA itself was captured without any account creation. This is a signup link, not an embedded auth form.

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