精選 · 開放 · 免費
Monocle
專注全球時事、文化與生活風格的精緻編輯平台。
editorialmagazine
01
設計氣質 DNA
編輯精選全球時事生活風格精心策劃頂級質感
將高端國際雜誌精華提煉為數位格式。
02
色彩
#FFC500Accent
#000000Ink
#141414Ink soft
#FFFFFFBG
#F8F8F8BG soft
#6E6E6EMuted
rgba(0,0,0,0.1)Line
高對比黑白基底，搭配單一鮮豔黃色強調色，以及柔和灰階構成結構層次。
03
字型
transitional-serif · grotesque-sans
- display
96px · 400 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - caption
13px · 400
導航與次級區塊連結採用全大寫字母。 · 嚴格維持黑色文字與白色背景的高對比度。 · 刊頭置中並以大型襯線字體突出呈現。
04
間距
4px
8px
16px
24px
32px
48px
64px
80px
96px
一致的4px網格基準，搭配充足留白強化編輯清晰度。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
採用1px細黑色或灰色邊框，用於結構區隔與按鈕設計。
0px 0px 0px 1px #D9D9D9 · 0px 30px 70px 0px rgba(0,0,0,0.3)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
結構化的12欄網格，頂部設有固定置中導航列。
07
動效與互動
220msmicro
250mssmall
400msmedium
ease-ineasing
互動元素採用細膩的背景色與變形過渡效果。 · UI狀態變換採用線性滑動或淡入淡出過渡。
按鈕與連結懸停時產生細微的背景色變換或位移效果。 · 點擊時立即產生視覺回應與游標狀態變化。
08
組件
- button 鮮黃色主按鈕搭配黑色大寫文字，採用藥丸形或矩形設計，邊框圓角較小。
- card 透過留白與細微邊框線定義的簡潔內容區塊，搭配大型圖像與粗體標題。
- chip 導航中以垂直分隔符號區隔的文字標籤。
- input 主內容區未顯示，但隱含表單可能採用極簡邊框與4px圓角。
- hero 全寬區域，展示大型置中刊頭或一排帶邊框的編輯插圖。
09
文案語氣與禁用清單
- 語氣 權威、精緻且具全球視野。
- 標題風格 直接、資訊豐富，分類導航常採用全大寫形式。
- 按鈕文案 粗體、清晰且功能明確，主要操作（如「訂閱」）採用高對比黃色。
- 勿使用紅、藍、綠等主色調——截圖顯示僅以黃色作為單一高飽和強調色。
- 勿隨處使用圓形藥丸按鈕——截圖顯示採用矩形或微圓角按鈕（4px圓角）。
- 勿使用裝飾性手寫字體——截圖顯示採用結構化過渡襯線體與簡潔無襯線體。
- 勿將背景設為深色或彩色——截圖顯示主內容區採用純白背景（#FFFFFF）。
- 勿隱藏主要導航——截圖顯示頂層導航（雜誌、電台、商店）始終可見。
- 勿使用複雜漸層背景——截圖顯示採用純白或簡單的透明到白色漸層。
- 避免: 避免過度口語化或使用過多驚嘆號。
- 避免: 避免介面充斥過多視覺元素造成雜亂。
- 避免: 避免使用影響可讀性的低對比色彩。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Monocle是專注全球時事、文化與生活風格的精緻編輯平台。它採用純黑（#000000）與純白（#FFFFFF）的高對比配色，僅以鮮豔黃色（#FFC500）作為主要強調色。字體系統大量使用過渡襯線體作為標題與刊頭，搭配簡潔的怪誕無襯線體作為內文。關鍵設計規範包括：絕不使用低對比灰色作為主要文字，始終保持充足留白以維持頂級編輯質感，嚴格遵循黑白加黃色的三色配色方案。避免使用過度裝飾的字體、雜亂版面，或任何會分散精選內容關注的次要強調色。
en · zh-CN · zh-TW · ja · ko