精選 · 開放 · 免費
Whitney
一個為當代藝術博物館設計的簡潔、高對比編輯介面，平衡了大膽的字型層級與充裕的留白空間。
museumart
01
設計氣質 DNA
博物館藝術美國當代展覽
一本質感清晰的建築展覽型錄，被移植至網路世界。
02
色彩
#d7ff2dAccent
#000000Ink
#212121Ink soft
#ffffffBG
#949494Muted
rgba(0,0,0,1)Line
高對比單色調色板，搭配單一、強烈的高彩度強調色，僅謹慎用於主要號召行動。
03
字型
geometric-sans · grotesque-sans
- display
65px · 700 - headline
35px · 400 - body
16px · 400 - caption
15px · 400
標題字常使用全大寫文字轉換 · 內文大量採用簡潔、左對齊的 grotesque-sans 字型 · 顯示尺寸的行高相對緊湊，但內文保持標準行高
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
內容區塊之間保持充裕的垂直間距，並搭配清晰的水平間距，以維持有序、整潔的格線佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 6px
lg · 0px
pill · 0px
以清晰的 1px 實心黑框定義導覽元素與主要按鈕，偶爾使用 2px 變體以強調。
rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
一個嚴謹、高度結構化的格線佈局，具有明確的水平分隔線與清晰的內容欄位。
07
動效與互動
100msmicro
100mssmall
200msmedium
ease-outeasing
互動元素採用極短暫的微時長，實現細膩的透明度與顏色過渡動畫。
互動元素在懸停時呈現細膩的透明度變化或背景顏色轉換。 · 透過背景顏色或透明度調整，立即給予視覺回饋。
08
組件
- button 按鈕明確區分為兩種主要樣式：實心黑底配白色全大寫文字，以及白底配黑框與黑色全大寫文字。
- card 內容以簡潔、無邊框的圖片與文字區塊呈現，區塊之間由一致的水平分隔線隔開。
- chip 簡潔的矩形標籤，配有細黑色邊框與全大寫文字。
- input 簡潔的矩形輸入欄位，具備清晰邊框與簡約樣式。
- hero 採用大膽的分割式主視覺佈局，一側為大型字型標誌處理，另一側則為攝影或影片內容。
09
文案語氣與禁用清單
- 語氣 具權威性、清晰且富有文化意義。
- 標題風格 大膽、常使用全大寫且高度描述性，聚焦於展覽名稱與主要操作。
- 按鈕文案 直接、全大寫且高度醒目，運用強烈的色彩對比。
- 請勿使用柔和陰影 — 示意圖顯示應採用清晰邊框或單一深層投影陰影
- 請勿使用柔和的粉彩色背景 — 示意圖顯示應採用純白或純黑背景
- 請勿大範圍使用圓角 — 示意圖顯示主要為清晰的 0px 或 2px 邊角
- 請勿使用裝飾性襯線字型 — 示意圖顯示僅採用幾何與 grotesque-sans 無襯線字型
- 請勿使用漸層效果 — 示意圖顯示為平坦、實色的色塊
- 請勿隱藏全大寫轉換 — 示意圖顯示導覽與號召行動常使用全大寫
- 避免: 俏皮的語言
- 避免: 過多的形容詞
- 避免: 裝飾性的字型
- 避免: 複雜的句子結構
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個為當代文化機構使用的簡潔、高對比編輯介面。採用純白（#ffffff）背景與純黑（#000000）字型以達到最大視覺衝擊。使用明亮、高彩度的強調色，具體為萊姆綠（#d7ff2d），僅嚴格用於主要號召行動（如購票）。字型必須依賴幾何與 groteske-sans 無襯線字型類別，並運用粗體全大寫轉換於導覽與標題，以建立強烈的層級感。佈局應高度結構化、整潔且寬敞，採用清晰的 1px 邊框與充裕的留白，而非柔和陰影或圓角。保持權威、直接的語氣。關鍵禁止事項：避免使用柔和投影陰影（應使用清晰線條）、避免圓角（保持邊角方正）、避免使用裝飾性襯線字型（僅使用無襯線）、避免粉彩背景（嚴格保持單色調）。
en · zh-CN · zh-TW · ja · ko