精選 · 開放 · 免費
Aeon
一本關於觀點、科學與文化的長篇論述優質數位出版物。
editoriallongform
01
設計氣質 DNA
長篇內容觀點論述哲學科學
一本權威學術期刊，重生為現代數位出版物。
02
色彩
#0C776DAccent
#000000Ink
#666666Ink soft
#FFFFFFBG
#F5F5F5BG soft
#999999Muted
rgba(0,0,0,0.1)Line
乾淨、高對比的黑底白字，搭配低調的 teal 強調色。
03
字型
didone-serif · humanist-sans · monospace
- display
56px · 700 - h1
42px · 700 - h2
28px · 700 - body
16px · 400 - caption
13px · 400
導覽與標籤使用等寬字體 · 文章標題使用 didone-serif 字體 · 內文與無襯線元素使用 humanist-sans 字體
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基礎網格，搭配一致的 padding 與間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 0px
lg · 0px
pill · 999px
細薄的 1px 邊框，使用 rgba(0,0,0,0.1)
0px 4px 6px -4px rgba(0,0,0,0.1) · 0px 10px 15px -3px rgba(0,0,0,0.1)
06
版面
1280container
3columns
24pxgutter
768 / 1024breakpoints
用於文章卡片的多欄網格，搭配全版寬度的主視覺圖片。
07
動效與互動
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素上的色彩與背景色流暢過渡。 · 細微的透明度過渡。
連結與按鈕上的細微色彩變化或透明度改變。 · 標準指標游標，立即回應。
08
組件
- button 簡約的文字式連結，搭配細微的 hover 過渡效果。
- card 圖片為主的文章卡片，下方有嚴謹的字體排印層次。
- chip 無可見元素，使用簡單的文字標籤代表分類。
- input 簡約的搜尋或電子報輸入框。
- hero 全版寬度的電影感圖片，覆蓋大型襯線文字。
09
文案語氣與禁用清單
- 語氣 學術、知性、充滿求知欲。
- 標題風格 粗體、大型襯線標題，陳述清晰、引發思考的觀點。
- 按鈕文案 低調的文字連結，少用粗體按鈕。
- 不要使用深色模式——截圖顯示為明亮、白色背景的介面
- 不要使用鮮豔、飽和的原色——截圖顯示以白色、黑色與低飽和 teal 為主的色盤
- 不要在標題中使用無襯線字體——截圖顯示文章標題使用大型、粗體的 didone-serif 字體
- 不要在內文中使用密集、多欄的版面——截圖顯示寬敞的留白與清晰的層次結構
- 不要為每個卡片使用厚重的邊框或陰影——截圖顯示從圖片到文字的簡潔、無邊框過渡
- 不要使用俏皮或圓角的 UI 元素——截圖顯示銳利、簡潔的線條與最小化的裝飾
- 避免: 過度隨意的語言
- 避免: 聳動的標題
- 避免: 視覺雜亂
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Aeon 是一本關於觀點、科學與文化的長篇論述優質數位出版物。設計採用乾淨、高對比的編輯版面，以白色背景 (#FFFFFF) 與黑色 (#000000) 為主。主要強調色為低飽和的 teal (#0C776D)，僅用於標誌。字體排印依賴於標題用 didone-serif 與內文用 humanist-sans 的精緻對比，導覽標籤使用等寬字體。關鍵限制：絕不使用深色模式或厚重的背景色；避免在展示文字中使用無襯線字體；不要用不必要的 UI 元素或鮮豔、飽和的色彩使介面雜亂。版面設計優先考慮長篇閱讀，並確保寬敞的留白。
en · zh-CN · zh-TW · ja · ko