---
title: "beehiiv design system"
variant: extended
source: https://www.beehiiv.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/beehiiv-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# beehiiv · Design System

> A dark canvas for ambitious creator tools

**Theme:** dark · **Industry:** saas · **Source:** https://www.beehiiv.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A dark, high-contrast SaaS homepage that presents beehiiv as an all-in-one platform for newsletter creators. Bold uppercase headlines, vivid accent gradients, and layered product interfaces guide visitors from product discovery to signup.

## North star

Keep the page anchored in a continuous midnight canvas, using bold white type and restrained pink-blue accents to make product interfaces the brightest focal points.

## Overview

The page uses a near-black violet canvas throughout, giving the long homepage a continuous, immersive backdrop rather than alternating light and dark bands. White and pale-lavender typography carries most of the content, while saturated blue and pink accents highlight links, interface frames, and selected words. Display headlines are heavy, uppercase, and compact; supporting copy uses a calmer sans serif with comfortable line spacing. The hero pairs a left-aligned message and signup actions with overlapping product dashboards on the right, followed by a compact publisher-logo strip. Below, repeated product showcases, pricing cards, feature tiles, testimonials, and FAQs establish a clear modular rhythm. Generous vertical breathing room separates sections, while thin violet-gray borders define cards and FAQ rows. Product screenshots remain bright, rectangular focal points against the dark canvas; subtle glows and gradients make them feel integrated without turning the page into a decorative effects showcase.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#060419` | `--color-midnight-canvas` | brand | Dominant page background across the hero, feature sections, pricing, FAQ, and footer. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headlines, body text, button surfaces, and bright product mockup areas. |
| Lilac Mist | `#f7f5ff` | `--color-lilac-mist` | neutral | Soft supporting text and footer copy on the dark canvas. |
| Cool Silver | `#d9dbdf` | `--color-cool-silver` | neutral | Muted navigation and secondary copy, including subdued labels. |
| Electric Indigo | `#2f39ba` | `--color-electric-indigo` | accent | Blue accent for links, outlined interface details, and prominent signup treatments. |
| Neon Orchid | `#ff5ec4` | `--color-neon-orchid` | accent | Pink emphasis in hero headline, feature labels, links, and product-frame accents. |
| Slate Violet | `#4e4e6c` | `--color-slate-violet` | semantic | Hairlines and card outlines separating pricing, FAQ rows, and interface elements. |
| Muted Lavender | `#9393a9` | `--color-muted-lavender` | neutral | Low-emphasis supporting text, particularly in the footer. |
| Deep Ink | `#0b0d2a` | `--color-deep-ink` | surface | Subtle dark interface details and inset treatments, not a major section background. |
| Graphite Plum | `#1c1b32` | `--color-graphite-plum` | surface | Dark button borders and discreet control outlines. |
| Periwinkle Glow | `#b3b8f0` | `--color-periwinkle-glow` | accent | Secondary lavender-blue text accent and small interface highlights. |
| Night Indigo | `#15194f` | `--color-night-indigo` | surface | Dark card borders and product-panel outlines against the page canvas. |
| Dusty Iris | `#9d9db8` | `--color-dusty-iris` | neutral | Low-priority text details and muted interface labels. |
| Pale Wisteria | `#c4c2d6` | `--color-pale-wisteria` | neutral | Soft footer text and tertiary copy. |
| Cloud Gray | `#edeff2` | `--color-cloud-gray` | neutral | Occasional light text details, mainly within interface and product content. |
| Shadow Plum | `#151327` | `--color-shadow-plum` | surface | Near-black button, footer, and interface details that sit just above the canvas. |

### Semantic aliases

`--color-canvas` → `#060419` (Midnight Canvas) · `--color-surface` → `#ffffff` (Signal White) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#d9dbdf` (Cool Silver) · `--color-text-subtle` → `#9393a9` (Muted Lavender) · `--color-border` → `#4e4e6c` (Slate Violet) · `--color-accent` → `#ff5ec4` (Neon Orchid) · `--color-accent-2` → `#2f39ba` (Electric Indigo) · `--color-accent-3` → `#b3b8f0` (Periwinkle Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#060419` | 20.21:1 | AAA |
| `#d9dbdf` | `#060419` | 14.58:1 | AAA |
| `#d9dbdf` | `#ffffff` | 1.39:1 | fail |
| `#9393a9` | `#060419` | 6.72:1 | AA |
| `#9393a9` | `#ffffff` | 3.01:1 | AA-large |
| `#ff5ec4` | `#060419` | 7.36:1 | AAA |
| `#ff5ec4` | `#ffffff` | 2.75:1 | fail |

### Gradients

- `linear-gradient(rgb(6, 4, 25) 20%, rgba(255, 255, 255, 0.05) 80%)`
- `linear-gradient(to right, rgb(255, 220, 255), rgb(255, 94, 196))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SatoshiFont | `--font-body` | webfont | 500, 600, 700, 400 | Primary interface and reading type: navigation, body copy, labels, links, buttons, and supporting headings. | Inter |
| ClashGroteskFont | `--font-display` | webfont | 700 | Display headlines and major section titles. | Space Grotesk |

- **SatoshiFont:** Use regular-to-semibold weights; keep copy in sentence case, with compact nav and clear, comfortable body leading.
- **ClashGroteskFont:** Use heavy weight and uppercase for display moments; keep tracking neutral and line breaks deliberate.

### Type scale — Augmented Fourth (ratio ≈ 1.442, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1 | 0 | uppercase | ClashGroteskFont | Oversized uppercase campaign headline and major hero statement. |
| h1 | 48px | 700 | 1 | 0 | uppercase | ClashGroteskFont | Large uppercase section titles, including feature, pricing, FAQ, and CTA headings. |
| h2 | 24px | 500 | 1.33 | 0 | — | SatoshiFont | Supporting section headings and prominent product-card titles. |
| body | 20px | 500 | 1.4 | 0 | — | SatoshiFont | Hero description, explanatory feature copy, and testimonial text. |
| caption | 16px | 500 | 1.5 | 0 | — | SatoshiFont | Supporting notes, card details, and compact descriptive copy. |
| button | 18px | 500 | 1.56 | 0 | — | SatoshiFont | Signup actions and other prominent calls to action. |
| nav | 14px | 600 | 1.43 | 0 | — | SatoshiFont | Header navigation labels and menu items. |
| link | 16px | 400 | 1.5 | 0 | — | SatoshiFont | Inline actions such as feature links and footer destinations. |
| eyebrow | 14px | 700 | 1.43 | 0.08em | uppercase | SatoshiFont | Small uppercase feature categories and section labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 32, 40, 64, 96, 128 px.
- Section rhythm 64px · element gap 16px · card padding 24px · max content width 1184px.

A long, vertically paced landing page sits on a consistent dark canvas within a centered content region capped at the measured 1184px. The hero aligns copy left and layered product UI right, with a logo strip below. Feature showcases repeat a compact text-and-action row above wide interface imagery. Pricing uses three parallel cards; later blocks shift to two-column tiles, testimonial panels, and multi-column link groups. Section spacing follows the measured 64px rhythm, with comfortable density and clear breathing room.

## Shape & elevation

- Radius: button `12px` · card `8px` · media `50%` · nav `6px` · link `12px` · xs `6px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall treatment is mostly flat: the dark canvas does the work, while thin violet-gray borders define cards, pricing columns, and FAQ separators. Product panels gain depth through overlapping interface layers and restrained glow rather than heavy drop shadows. Keep CTA contrast clear and avoid introducing broad, light-colored card surfaces.

## Imagery

The page relies on product screenshots and interface mockups rather than lifestyle photography. Bright newsletter, website-builder, and monetization interfaces are framed by saturated blue or pink panels, then layered with smaller floating controls or dashboard cards. Brand logos and integration marks form compact supporting strips. Keep real UI surfaces crisp and legible; dark surroundings, faint edge glow, and occasional gradient framing provide contrast without flattening the product detail.

## Components

### Header navigation

Compact horizontal nav on the dark canvas, with muted light labels, a restrained demo action, and a high-contrast white signup button.

### Hero signup group

Large uppercase statement, supporting copy, customer-rating proof, and adjacent blue Google signup and outlined email actions.

### Product showcase

Eyebrow and uppercase heading sit above a short description and action link; a large bright product UI image anchors the section.

### Pricing cards

Three aligned dark plan cards use fine violet borders, white pricing copy, feature lists, and contrasting signup actions.

### Feature tile grid

A two-column set of dark bordered content tiles pairs concise headings and links with small product UI illustrations.

### FAQ list

Centered bold title above stacked questions, each separated by a thin slate-violet hairline and ending in a compact disclosure icon.

### Footer link columns

Dense but ordered multi-column navigation and legal links, with subdued text and a short newsletter signup prompt.

### Measured component styles

- **Primary button** (“Sign up for free”): background #ffffff · text #060419 · border 1px solid #ffffff · radius 6px · padding 8px 12px · 600 14px SatoshiFont
- **Secondary button** (“Independent Journalist”): transparent background · text #ffffff · border 1px solid #1c1b32 · radius 12px · padding 16px · 400 16px SatoshiFont
- **Link** (“Sign up with email”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px SatoshiFont
- **Card** (“Free Starting at $0 What's included... N”): transparent background · text #ffffff · border 1px solid #15194f · radius 8px · padding 24px · 400 16px SatoshiFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Product”): transparent background · text #dddce8 · radius 6px · padding 8px 12px · 600 14px SatoshiFont

## Do

- Use the midnight canvas as the page-wide foundation.
- Set major display headlines in bold uppercase.
- Reserve vivid blue and pink for emphasis and action.
- Show product interfaces as bright focal points.
- Use thin borders to define dark cards and FAQ rows.
- Keep generous space between major page sections.

## Don't

- Do not alternate the page into large light-background bands.
- Do not use accent colors for long passages of body text.
- Do not overdecorate interfaces with strong shadows.
- Do not make every section a centered card grid.
- Do not soften display headlines into lightweight title case.
- Do not mistake colors inside product mockups for brand surfaces.

## Agent prompt

Build a new SaaS page using beehiiv’s dark editorial visual system. Use Midnight Canvas (#060419) continuously as the main background, with Signal White (#ffffff) for primary text and Lilac Mist (#f7f5ff) or Cool Silver (#d9dbdf) for secondary copy. Set oversized section headlines in a heavy uppercase display face; use a clean sans serif for body, navigation, and actions. Apply Electric Indigo (#2f39ba) and Neon Orchid (#ff5ec4) selectively to CTAs, links, labels, and interface framing. Keep content in a centered, measured-width layout with generous section breathing room. Pair concise feature copy with crisp, bright product UI imagery, and use fine Slate Violet (#4e4e6c) borders for cards and dividers. Favor layered mockups over decorative illustration, and keep elevation restrained.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned hero copy and signup actions beside layered product interfaces; publisher logos sit below. | dual signup actions, social proof, logo proof | uppercase display headline, blue and outlined buttons, layered dashboard mockup |
| 2 | product-showcase | Feature copy and a short action sit above a wide, framed newsletter-editor screenshot. | feature discovery, start-writing link | pink eyebrow, uppercase heading, bright product frame |
| 3 | product-showcase | Compact text-and-action row followed by a wide website-builder interface image. | feature discovery, start-building link | uppercase heading, framed interface screenshot, blue-violet backdrop |
| 4 | product-showcase | Feature heading and action precede a broad monetization dashboard mockup. | feature discovery, monetization action | pink feature label, dashboard screenshot, bright pink framing |
| 5 | pricing | Centered intro above three parallel plan cards with aligned price, feature list, and signup action. | plan comparison, signup actions, sales contact link | outlined dark cards, divided feature lists, contrasting buttons |
| 6 | feature-grid | Centered section title and supporting line above a two-column, two-row set of feature tiles. | feature exploration, learn-more links | thin card borders, small product illustrations, dark tile surfaces |
| 7 | testimonials | Audience tabs above a broad testimonial panel with portrait at left and quote details at right. | audience tabs, testimonial browsing | framed portrait, dark testimonial surface, accent outline |
| 8 | category-nav | Centered title and explanation above grouped, multi-column persona and goal links. | persona selection, goal discovery | compact text links, dark outlined choices, group labels |
| 9 | integrations | Left-aligned title and copy with signup action above rows of integration logos and brief benefits. | integration discovery, signup action | logo strip, pink line accents, three benefit columns |
| 10 | faq | Centered two-line heading above a single-column accordion list. | accordion questions, progressive answers | thin horizontal dividers, disclosure icons, centered headline |
| 11 | cta | A large framed product interface centers a concise conversion message and signup button. | final signup action, audience ownership message | bright UI panel, blue frame, centered headline |
| 12 | footer | Newsletter note at left, multiple compact link columns to the right, and a legal row below. | newsletter updates, site-wide navigation, legal links | muted small text, multi-column links, brand mark |

## Source CSS custom properties (selected)

```css
--PhoneInput-color--focus: #03b2cb;
--PhoneInputCountrySelectArrow-borderWidth: 1px;
--PhoneInputCountrySelectArrow-color: currentColor;
--PhoneInputCountrySelectArrow-color--focus: #03b2cb;
--PhoneInputCountryFlag-borderWidth: 1px;
--PhoneInputCountryFlag-borderColor: #00000080;
--PhoneInputCountryFlag-borderColor--focus: #03b2cb;
--PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
--rt-color-white: #fff;
--rt-color-dark: #222;
--rt-color-success: #8dc572;
--rt-color-error: #be6464;
--rt-color-warning: #f0ad4e;
--rt-color-info: #337ab7;
--text-primary: #fff;
--text-secondary: #f7f5ff;
--text-tertiary: #c4c2d6;
--text-disabled: #4e4e6c;
--text-accent-blue: #7079d5;
--text-accent-pink: #ff5ec4;
--text-accent-lavender: #bcbef3;
--text-fusion-blue-50: #d4d7f5;
--text-fusion-blue-400: #5b66cb;
--action-ghost-text: #dddce8;
--action-secondary-border: #06041933;
--border-subtle: #ffffff0f;
--border-default: #ffffff1f;
--border-strong: #fff3;
--border-accent-pink: #ff5ec44d;
--border-accent-blue: #2f39ba80;
--border-accent-lavender: #9299e64d;
--border-flamingo: #ff5ec4;
--border-fusion-blue: #2f39ba;
--surface-page: #060419;
--surface-1: #0d0b28;
--surface-2: #141230;
--surface-3: #1c1940;
--button-primary-fill: #2f39ba;
--button-primary-fill-hover: #2a33a3;
--button-primary-fill-pressed: #20288c;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/beehiiv-com