---
name: beehiiv
description: "This site exemplifies modern SaaS design with its bold typography, dark mode aesthetic, and clear hierarchy."
version: alpha

colors:
  background: "#060419"
  primary: "#FFFFFF"
  secondary: "#C4C4D6"
  tertiary: "#2F39BA"
  neutral: "#6B6B82"
  bg-soft: "#0a0821"
  bg-quiet: "#100e30"
  muted-soft: "#9B9BB0"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An all-in-one platform for growing and monetizing newsletters.

*The operating system for modern newsletter publishers*

## Colors

Dark background with high-contrast white text and vibrant accents

- **Background (`#060419`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#C4C4D6`)** — uses `ink-soft` token
- **Accent (`#2F39BA`)** — uses `accent` token
- **Muted (`#6B6B82`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use geometric sans-serif for display headlines
- Use humanist sans-serif for body text
- Use 500 weight for navigation and secondary text

## Layout

Full-width hero with centered text and side-by-side dashboard UI

*Rhythm:* 4px base unit, growing in 4px increments

## Elevation & Depth

- 0 4px 6px -1px rgba(0, 0, 0, 0.1)
- 0 10px 15px -3px rgba(0, 0, 0, 0.1)
- 0 20px 25px -5px rgba(0, 0, 0, 0.1)
- Borders: 1px solid rgba(255, 255, 255, 0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary uses solid blue gradient, secondary uses transparent with white border
- **card:** Semi-transparent dark cards with subtle borders
- **chip:** Small rounded tags for navigation
- **input:** Dark input fields with subtle borders
- **hero:** Large bold headline with supporting text and CTA buttons

## Do's and Don'ts

**Don't:**
- Don't use thin, light fonts — screenshot shows bold, weighty headlines
- Don't use bright white backgrounds — screenshot shows deep navy/dark theme
- Don't use small, cramped spacing — screenshot shows generous padding and gaps
- Don't use muted, low-contrast text — screenshot shows high-contrast white on dark
- Don't use rounded, bubbly shapes — screenshot shows clean, sharp geometry
- Don't use complex, multi-color gradients — screenshot shows focused, single-accent gradients

---

## System Prompt (paste into AI agent)

```
beehiiv is a premium SaaS platform for newsletter creators, positioned as the operating system for growing and monetizing newsletters. The design uses a deep navy background (#060419) with high-contrast white text and vibrant blue (#2F39BA) and pink (#FF5EC4) accents. Typography combines a geometric sans-serif (Clash Grotesk) for bold headlines with a humanist sans-serif (Satoshi) for body text, both set at a 4px base rhythm. Critical donts: avoid thin fonts (everything is bold/weighted), avoid bright white backgrounds (dark theme is dominant), avoid cramped spacing (generous padding throughout). The system emphasizes confident, forward-looking language and clear, benefit-focused CTAs.
```