01
设计气质 DNA
NewsletterPublishing创作者经济增长变现
现代通讯出版商的操作系统
02
色彩
#2F39BAAccent#FFFFFFInk#C4C4D6Ink soft#060419BG#0a0821BG soft#100e30BG quiet#6B6B82Mutedrgba(255, 255, 255, 0.1)Line深色背景，搭配高对比度的白色文字与醒目的点缀色
03
字体
- display
60px · 700 - h1
48px · 700 - body
16px · 400
展示标题使用几何无衬线字体 · 正文使用人文主义无衬线字体 · 导航和次要文字使用500字重
04
间距
4px8px12px16px24px32px48px64px96px4px基础单位，以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
包内真实截图
11
System Prompt
beehiiv是一个面向通讯创作者的高端SaaS平台，定位为增长和变现通讯的操作系统。设计采用深海军蓝背景（#060419），搭配高对比度的白色文字以及充满活力的蓝色（#2F39BA）和粉色（#FF5EC4）点缀。字体排印上，粗体标题使用几何无衬线字体（Clash Grotesk），正文使用人文主义无衬线字体（Satoshi），两者均基于4px基础节奏。关键禁忌：避免纤细字体（所有文字均为粗体/有分量）、避免亮白色背景（深色主题为主）、避免局促间距（整体采用宽松内边距）。设计语言强调自信、前瞻的表述以及清晰、侧重利益的行动号召。