# beehiiv · Design system migration spec

> Source: https://www.beehiiv.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies modern SaaS design with its bold typography, dark mode aesthetic, and clear hierarchy.

## 1. Identity DNA

This design system is conceived as the operating system for modern newsletter publishers—a robust, foundational layer upon which individual publication identities are built and scaled. Its architecture is defined by a commitment to clarity and control, providing a unified platform where growth and monetization are not just features, but structural outcomes of a coherent design language.

**One-liner:** An all-in-one platform for growing and monetizing newsletters.
**Keywords:** Newsletter · Publishing · Creator Economy · Growth · Monetization
**Analogy:** The operating system for modern newsletter publishers

## 2. Color

The palette establishes a premium digital environment through a deep navy background, which serves as the primary canvas. High-contrast white text ensures absolute legibility, while vibrant accents in blue and pink function as strategic highlights for calls-to-action and interactive state changes.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#060419` | main background |
| `--bg-soft` | `#0a0821` | card background |
| `--bg-quiet` | `#100e30` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#C4C4D6` | secondary text |
| `--muted` | `#6B6B82` | placeholder |
| `--muted-soft` | `#9B9BB0` | weak hint |
| `--accent` | `#2F39BA` | single accent |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

**Color principle:** Dark background with high-contrast white text and vibrant accents

The governing principle is one of contrast and focus, using color not for decoration but to delineate hierarchy and direct user attention within a dark-mode framework.

## 3. Typography

Typographic voice is split between a bold, geometric sans-serif for authoritative display headlines and a clean humanist sans-serif for readable body text. This pairing creates a distinct hierarchy, with the heavier weight of the display type conveying confidence and the humanist form ensuring comfortable reading at length.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 700 | -2px | Primary hero headline |
| h1 | 48px | 1.1 | 700 | -1px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Paragraphs |

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

## 4. Spacing

A strict 4px base rhythm underpins the entire layout, creating a consistent and predictable spatial system.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit, growing in 4px increments

## 5. Surfaces

Surfaces are defined by minimal, semi-transparent treatments that establish depth without weight. Subtle borders and layered shadows differentiate interactive components like cards from the foundational background, creating a clear sense of elevation and containment.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 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)

## 6. Layout

The core layout skeleton is built around full-width hero sections that command immediate attention. Within this framework, a structured grid system orchestrates content, exemplified by side-by-side dashboard UI arrangements that organize complex information with clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a functional feedback mechanism, not ornamentation. All interactions employ smooth, cubic-bezier easing curves, with quick 150ms transitions for immediate hover states and slightly longer durations for more significant interface changes.

- **Durations:** micro 150ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover
  - Scale transforms on interactive elements

- **Hover:** Color and background color transitions over 150ms
- **Click:** Scale transform on active state
- **Transition:** All properties transition with cubic-bezier easing
- **Keyboard:** Focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is confident, professional, and forward-looking, directly addressing user needs with action-oriented, benefit-focused language. All copy, particularly headlines, maintains a commanding presence through all-caps, bold typographic treatments.

- **Tone:** Confident, professional, and forward-looking
- **Headline style:** All caps, bold, geometric sans-serif
- **CTA style:** Action-oriented, clear, and benefit-focused
- **Avoid:** Jargon / Passive voice / Uncertainty

### Don'ts
- ❌ 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

The system deliberately avoids decorative complexity, thin typographic weights, and bright backgrounds to maintain its focused, high-contrast, and professionally authoritative aesthetic.

## System Prompt (paste into AI tool)

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