精選 · 開放 · 免費
Tofucollective
一個為華語當代藝術打造、以排版為核心的節制型編輯平台。
EditorialCleanTypographyGalleryRestraint
01
設計氣質 DNA
文化橋樑當代藝術華語世界集體排版
一本帶有編輯節制感的極簡主義藝廊型錄
02
色彩
#000000Ink
#282828Ink soft
#FFFFFFBG
rgba(0,0,0,1)Line
高對比單色調，採用嚴格的二元調色盤。
03
字型
humanist-sans · system-ui-sans
- display
90px · 400 - body
16px · 400 - caption
12px · 400
展示用標題使用緊湊的行距 · 所有文字元素保持高對比 · 文字一律靠左側嚴格對齊
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
嚴格的 8px 格線搭配充足的留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
以堅實、1px 的實心黑色線條分隔導覽元素
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的雙欄格線，左欄為沉重的排版區，右欄則放置全高圖片
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.24, 0.4, 1)easing
UI 元素採用流暢的變形過渡效果
互動元素上有細微的變形位移 · 透過指標游標提供即時回饋
08
組件
- button 由垂直邊框分隔的純文字導覽連結
- card 無視覺卡片；內容以原始的排版區塊與圖片呈現
- hero 全高分割畫面，左側為巨大的排版標題，右側為攝影圖片
09
文案語氣與禁用清單
- 語氣 學術性、精緻且略帶詩意
- 標題風格 巨大、全小寫或混合大小寫的展示字型，搭配緊湊行距
- 按鈕文案 極簡的純文字導覽，不使用視覺按鈕
- 不要使用圓角——截圖顯示導覽線條具有完美的方形邊緣
- 不要使用陰影——截圖顯示平面的表面，無深度感
- 不要使用彩色強調按鈕——截圖顯示由線條分隔的純文字導覽
- 不要使用裝飾性襯線字體——截圖顯示簡潔的無襯線排版
- 不要將主視覺文字置中對齊——截圖顯示嚴格的左對齊
- 不要使用白色以外的背景色——截圖顯示純白的畫布
- 避免: 鮮豔或霓虹色調
- 避免: UI 元素使用圓角
- 避免: 厚重的陰影或 3D 效果
- 避免: 主導覽使用襯線字體
- 避免: 密集的多欄文字佈局
- 避免: 具攻擊性或銷售導向的語言
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為華語當代藝術集體打造、以編輯為核心的極簡主義網站。設計建立在嚴格的單色調色盤上，僅使用黑色 (#000000) 與白色 (#FFFFFF)，偶爾使用深灰色 (#282828) 作為較柔和的墨色調。排版是主要驅動力，展示文字採用簡潔的 humanist-sans，內文則使用標準的 system-ui。佈局為不對稱且基於格線，常以緊湊行距的巨大標題為特色。關鍵的禁忌包括避免任何圓角、永不使用陰影，並保持高對比度、左對齊的文字。整體美學呈現出「學術性節制」，功能如同高端的藝廊型錄或展覽指南。
en · zh-CN · zh-TW · ja · ko