精選 · 開放 · 免費

Substack

一款簡潔、內容優先的發布平台，以大膽橙色強調色與可讀性為核心。

01

設計氣質 DNA

一個簡潔、以編輯為核心的平台，彷彿現代數位雜誌或為獨立作者與讀者策展的資訊流。

02

色彩

白色背景搭配高對比墨色文字以確保可讀性；單一鮮明的橙色強調色提供活力與行動呼籲焦點。

03

字型

transitional-serif · humanist-sans · monospace

• display40px · 600
• h124px · 600
• h220px · 600
• body15px · 400
• caption13px · 400

使用襯線字體系列作為顯著標題與編輯展示用途。 · 使用系統無襯線字體組合處理內文、導覽與介面元素。 · 透過標題與內文之間的尺寸與字重差異，維持清晰的層級關係。

04

間距

元素間採用一致的 8px 基礎垂直節奏，較緊密的間距使用 4px 增量。

05

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

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

0 1px 0 0 rgba(255,255,255,0.2) inset, 0 -1px 0 0 rgba(0,0,0,0.1) inset · 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 6px -1px rgba(0,0,0,0.1)

06

版面

桌面端採用固定左側導覽側邊欄、中央資訊流欄位、右側用於登入/搜尋的側邊欄；手機端則為單欄堆疊式佈局並搭配底部導覽。

07

動效與互動

互動元素的顏色、背景色與邊框屬性採用流暢的 250ms 過渡效果。 · hover 狀態使用變形過渡。 · 不採用複雜動畫；動態效果低調且具功能性。

連結與按鈕等互動元素透過細微的背景色或文字顏色變化提供回應。 · 透過標準瀏覽器 focus 狀態提供即時回饋。

08

組件

• button 主要行動呼籲使用實心橙色（如「建立」、「開始你的 Substack」）；次要按鈕採用白色背景搭配細微邊框或淺灰色填充。
• card 資訊流項目以細線分隔，包含作者頭像、中繼資料、文字內容、媒體及操作列（讚、留言、分享）。
• chip 極少使用；「訂閱」文字作為次要操作連結。
• input 搜尋欄位採用簡潔白色背景、細微邊框與圓角設計。
• hero 大型深青綠色橫幅，搭配襯線字體標題與兩種明確的行動呼籲選項（實心橙色按鈕 vs. 白色文字連結）。

09

文案語氣與禁用清單

• 語氣 自信、直接、以創作者為核心。
• 標題風格 簡潔且具啟發性，常使用襯線字體以強化編輯感。
• 按鈕文案 直接導向行動，使用清晰動詞如「開始」、「登入」、「簽到」。

• 不使用深色主題——截圖顯示為以白色為主背景並搭配淺灰色調。
• 不使用多種強調色——截圖顯示橙色作為單一主導高飽和度色彩。
• 主要資訊流不使用圓角卡片——截圖顯示項目以簡單水平線分隔。
• 主要標題不使用無襯線字體——截圖顯示展示文字使用襯線字體（如 Cahuenga/Spectral）。
• 卡片不使用厚重陰影——截圖顯示資訊流項目陰影非常細微或無陰影。
• 內容不使用密集的多欄格線佈局——截圖顯示主要資訊流採用單一聚焦欄位。
• UI 中不使用裝飾性元素或插圖——截圖顯示佈局簡潔功能化，僅使用圖示與照片。
• 避免: 過度隨意的俚語
• 避免: 技術術語
• 避免: 誇飾用語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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