精选 · 开放 · 免费

beehiiv

一个用于增长和变现通讯的一体化平台。

publishingnewsletter

beehiiv 网站截图

↓ 下载设计系统包 (14 MB)在 OpenDesign 中打开

原站: https://www.beehiiv.com

📦 浏览包内文件 →

01

设计气质 DNA

NewsletterPublishing创作者经济增长变现

现代通讯出版商的操作系统

02

色彩

#2F39BAAccent

#FFFFFFInk

#C4C4D6Ink soft

#060419BG

#0a0821BG soft

#100e30BG quiet

#6B6B82Muted

rgba(255, 255, 255, 0.1)Line

深色背景，搭配高对比度的白色文字与醒目的点缀色

03

字体

geometric-sans · humanist-sans · monospace

display60px · 700
h148px · 700
body16px · 400

展示标题使用几何无衬线字体 · 正文使用人文主义无衬线字体 · 导航和次要文字使用500字重

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

4px基础单位，以4px为增量递增

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(255, 255, 255, 0.1)

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)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

全宽主视觉区域，居中文字与并排的仪表盘界面

07

动效与交互

150msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时平滑的颜色与背景过渡 · 交互元素上的缩放变换

颜色与背景颜色在150毫秒内过渡 · 激活状态下的缩放变换

08

组件

button 主按钮使用纯蓝色渐变，次按钮使用透明背景配白色边框
card 半透明深色卡片，带细腻边框
chip 用于导航的小型圆角标签
input 深色输入框，带细腻边框
hero 醒目的大标题，配以说明文字和行动号召按钮

09

文案语气与禁用清单

语气自信、专业且富有前瞻性
标题风格 全大写、粗体、几何无衬线字体
按钮文案 以行动为导向、清晰且侧重利益

勿使用纤细、轻盈的字体——截图显示的是粗体、有分量的标题
勿使用亮白色背景——截图显示的是深海军蓝/深色主题
勿使用局促、紧凑的间距——截图显示的是宽松的内边距和间隙
勿使用暗淡、低对比度的文字——截图显示的是深色背景上的高对比度白色文字
勿使用圆润、蓬松的形状——截图显示的是干净、锐利的几何图形
勿使用复杂、多彩的渐变——截图显示的是聚焦、单色点缀的渐变
避免: 术语
避免: 被动语态
避免: 不确定性

10

包内真实截图

beehiiv — 桌面首屏（hero） — 桌面首屏（hero）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

beehiiv — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

beehiiv是一个面向通讯创作者的高端SaaS平台，定位为增长和变现通讯的操作系统。设计采用深海军蓝背景（#060419），搭配高对比度的白色文字以及充满活力的蓝色（#2F39BA）和粉色（#FF5EC4）点缀。字体排印上，粗体标题使用几何无衬线字体（Clash Grotesk），正文使用人文主义无衬线字体（Satoshi），两者均基于4px基础节奏。关键禁忌：避免纤细字体（所有文字均为粗体/有分量）、避免亮白色背景（深色主题为主）、避免局促间距（整体采用宽松内边距）。设计语言强调自信、前瞻的表述以及清晰、侧重利益的行动号召。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko