← OpenDesign
精選 · 開放 · 免費
Buttondown
專為獨立創作者設計的實用、人性友善的電子郵件通訊平台。
publishing newsletter
01
設計氣質 DNA
電子報 電子郵件 可靠性 簡潔 獨立
為數位創作者打造的沉穩可靠的郵局。
02
色彩
#0069ffAccent
#000000Ink
#4b5563Ink soft
#ffffffBG
#fef9c3BG quiet
#6b7280Muted
rgba(0, 0, 0, 0.1)Line
以高對比的白底黑字確保最佳可讀性,搭配鮮明的主藍色作為行動呼籲,以及溫暖的柔和色調作為點綴。
03
字型
transitional-serif · humanist-sans
display 96px · 900heading 48px · 700body 18px · 400caption 14px · 400標題字型採用厚重、字距緊湊的襯線體。 · 內文字型選用簡潔的無襯線體,確保高度可讀性。 · 行長維持精短,以利舒適閱讀。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
採用標準 4px 基線網格,各區塊間保留充裕的垂直內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 9999px
pill · 9999px
1px solid rgba(0, 0, 0, 0.1)
0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)
06
版面
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
標準置中佈局,從主視覺到功能介紹再到客戶評價,層次分明。
07
動效與互動
150ms micro
300ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
互動元素的細膩色彩與背景過渡效果。
互動元素的細微背景色變化。 · 視覺狀態改變以指示操作。
08
組件
button 高對比的藍色膠囊形按鈕,搭配白色文字,或簡潔的文字連結。 card 柔和黃色背景的客戶評價區塊,附有醒目引述。 hero 白底上搭配大型、具衝擊力的襯線體標題,兩側點綴鮮明的平面插圖。
09
文案語氣與禁用清單
語氣 自信、略帶親切,且令人安心。 標題風格 直接、善用反問,搭配粗獷而清晰的聲明。 按鈕文案 行動導向且直截了當。 勿使用深色模式——截圖顯示為純白背景。 勿使用螢光色——截圖採用主藍色(#0069ff)與柔和色調。 標題勿使用無襯線體——截圖使用厚重的過渡襯線體作為展示文字。 勿四處使用銳角——截圖中的按鈕採用膠囊形狀,卡片元素帶有圓角。 勿使介面過於擁擠——截圖維持了元素間的充裕留白。 閱讀內容勿使用密集的多欄佈局——截圖將段落寬度限制在舒適範圍內。 避免: 企業術語 避免: 模糊的承諾 避免: 過於複雜的技術語言
10
包內真實截圖
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
Buttondown 是一個電子郵件通訊平台,定位為獨立創作者可靠、人性友善的選擇。其設計 DNA 建立在簡潔的高對比色盤上,以純白背景、實黑文字為基底,鮮明的主藍色(#0069ff)用於行動呼籲,輔以溫暖的柔和黃色點綴。排版方面,以厚重的過渡襯線體(Auto Pro)打造具衝擊力的展示標題,搭配簡潔的人文無襯線體(Inter)確保內文高度可讀。關鍵設計限制包括:不使用深色模式、僅使用既定的品牌色彩,並維持充裕的留白。標題切勿使用無襯線體,按鈕或卡片切勿使用銳角。
更多精選
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
為什麼收錄: 值得參考的範例,展現如何運用排版與充裕留白,在擁擠的 SaaS 品類中塑造沉穩、可信的品牌語調。