精選 · 開放 · 免費

beehiiv

用於成長與變現電子報的全方位平台。

publishingnewsletter

beehiiv 網站截圖

↓ 下載設計系統包 (14 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

電子報出版創作者經濟成長變現

現代電子報發行者的作業系統

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

4像素基準單位，以4像素為增量遞增

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

hover時顏色與背景的平滑轉場 · 互動元素的縮放變換

顏色與背景色轉場時間為150毫秒 · 作用狀態時的縮放變換

08

組件

button 主按鈕使用實心藍色漸層，次按鈕使用透明底色搭配白色邊框
card 半透明深色卡片，帶有細微邊框
chip 小型圓角標籤，用於導覽
input 深色輸入欄位，帶有細微邊框
hero 大膽粗體標題，搭配支援文字與CTA按鈕

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）用於內文，兩者皆以4像素基準節奏設定。關鍵禁忌：避免細體字（所有文字均為粗體/有份量），避免明亮白色背景（深色主題為主），避免擁擠的間距（整體採用寬裕內邊距）。系統強調自信、具前瞻性的語言，以及清晰、聚焦效益的CTA。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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