精選 · 開放 · 免費

Buttondown

專為獨立創作者設計的實用、人性友善的電子郵件通訊平台。

01

設計氣質 DNA

為數位創作者打造的沉穩可靠的郵局。

02

色彩

以高對比的白底黑字確保最佳可讀性，搭配鮮明的主藍色作為行動呼籲，以及溫暖的柔和色調作為點綴。

03

字型

transitional-serif · humanist-sans

• display96px · 900
• heading48px · 700
• body18px · 400
• caption14px · 400

標題字型採用厚重、字距緊湊的襯線體。 · 內文字型選用簡潔的無襯線體，確保高度可讀性。 · 行長維持精短，以利舒適閱讀。

04

間距

採用標準 4px 基線網格，各區塊間保留充裕的垂直內距。

05

表面 (圓角 / 陰影 / 邊線)

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

版面

標準置中佈局，從主視覺到功能介紹再到客戶評價，層次分明。

07

動效與互動

互動元素的細膩色彩與背景過渡效果。

互動元素的細微背景色變化。 · 視覺狀態改變以指示操作。

08

組件

• button 高對比的藍色膠囊形按鈕，搭配白色文字，或簡潔的文字連結。
• card 柔和黃色背景的客戶評價區塊，附有醒目引述。
• hero 白底上搭配大型、具衝擊力的襯線體標題，兩側點綴鮮明的平面插圖。

09

文案語氣與禁用清單

• 語氣 自信、略帶親切，且令人安心。
• 標題風格 直接、善用反問，搭配粗獷而清晰的聲明。
• 按鈕文案 行動導向且直截了當。

• 勿使用深色模式——截圖顯示為純白背景。
• 勿使用螢光色——截圖採用主藍色（#0069ff）與柔和色調。
• 標題勿使用無襯線體——截圖使用厚重的過渡襯線體作為展示文字。
• 勿四處使用銳角——截圖中的按鈕採用膠囊形狀，卡片元素帶有圓角。
• 勿使介面過於擁擠——截圖維持了元素間的充裕留白。
• 閱讀內容勿使用密集的多欄佈局——截圖將段落寬度限制在舒適範圍內。
• 避免: 企業術語
• 避免: 模糊的承諾
• 避免: 過於複雜的技術語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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