精選 · 開放 · 免費
Eye on Design
一個編輯設計部落格，收錄精選文章，並擁有獨特的粉綠配色。
editorialdesign
01
設計氣質 DNA
設計出版策展視覺文化
一本採用簡潔編輯式佈局的優質數位設計雜誌。
02
色彩
#FF8C8CAccent
#000000Ink
#524B48Ink soft
#FFFFFFBG
#ECE2E2BG quiet
rgba(0,0,0,1.0)Line
以純白畫布為基底，主色調為鮮明的粉紅色強調色，並搭配高對比的黑色字體。
03
字型
grotesque-sans · humanist-sans
- display
44px · 700 - body
16px · 400
標題使用粗體 grotesque-sans 字體 · 內文使用簡潔的 humanist-sans 字體 · 大寫標籤搭配加寬的字距
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
具備一致的垂直節奏，並在區塊間留有寬裕的留白。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 4px
lg · 4px
pill · 999px
精選元素使用 2px 實心黑色邊框，其餘區域則盡量簡化。
06
版面
1280container
3columns
24pxgutter
768 / 1024breakpoints
文章卡片採用三欄式網格，主內容區則為單欄式。
07
動效與互動
150msmicro
300mssmall
300msmedium
ease-in-outeasing
互動元素具備流暢的過渡效果
連結與按鈕具備顏色過渡效果。 · 即時回應。
08
組件
- button 簡約的文字連結或小型大寫標籤。
- card 包含圖片、分類標籤、標題與簡短摘要。
- chip 粉紅色的大寫分類標籤。
- input 搜尋功能整合於導覽列中。
- hero 大型精選文章，搭配粗體標題與圖片。
09
文案語氣與禁用清單
- 語氣 專業、具權威感，同時平易近人且引人入勝。
- 標題風格 直接、資訊性強且粗體。
- 按鈕文案 內斂且實用。
- 避免使用雜亂的佈局 — 截圖顯示元素間留有乾淨、寬裕的空白
- 避免使用裝飾性字體 — 截圖顯示簡潔、實用的 grotesque-sans 與 humanist-sans 字體
- 避免使用深色背景 — 截圖顯示以白色為主的背景
- 避免使用細微的漸層效果 — 截圖顯示如粉紅強調色般扁平、實心的色塊
- 避免使用低對比度文字 — 截圖顯示白底上的高對比度黑色文字
- 避免隱藏導覽功能 — 截圖顯示持續且清晰的導覽元素
- 避免: 過於隨意的語言
- 避免: 分散內容注意力的裝飾性元素
- 避免: 雜亂的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個編輯設計出版網站。採用簡潔的三欄式網格佈局，具備寬裕的留白與高對比度字體。主色調為鮮明的粉紅色（#FF8C8C），用於強調與分類標籤，搭配黑色（#000000）的標題與白色（#FFFFFF）的背景。字體系統主要採用 grotesque-sans 與 humanist-sans 類別。關鍵設計原則：避免雜亂佈局、裝飾性字體與低對比度文字。保持專業、具權威感的語氣，同時維持視覺呈現的簡潔性，並聚焦於內容本身。
en · zh-CN · zh-TW · ja · ko