精選 · 開放 · 免費

Tate

一個為 Tate 藝廊設計的精緻文化網站，具有大膽的排版、鮮明的首頁區塊，以及乾淨的網格式佈局。

01

設計氣質 DNA

一本極簡風格的藝廊型錄，搭配大膽的編輯攝影。

02

色彩

高對比的中性色調（黑/白/灰），以單一醒目的黃色作為焦點，讓攝影圖片提供主要的視覺豐富度。

03

字型

geometric-sans · humanist-sans

• display46px · 400
• h222px · 400
• body17px · 400
• caption14px · 400
• nav14px · 400

區塊標題使用寬鬆的字距（大寫）來建立層級。 · 內文字號維持在舒適的 17px，確保可讀性。 · 首頁標題尺寸較大，但保持常規字重。

04

間距

寬裕的垂直節奏，內容區塊之間保持一致的 16px/32px padding。

05

表面 (圓角 / 陰影 / 邊線)

rgb(128, 128, 128) 0px 0px 5px 0px

06

版面

一個剛性的 12 欄網格系統，搭配居中的最大寬度容器。

07

動效與互動

互動元素的標準 hover 轉場效果。 · 手機選單可見性的細微淡入淡出轉場。

連結與按鈕的細微背景色或文字色彩變化。 · 標準按鈕點擊回饋。

08

組件

• button 實心黑或 teal 色塊，搭配白色文字與向右箭頭，強調清晰的行動呼籲。
• card 影像優先的卡片，無背景或僅有極簡背景樣式，依賴網格項目間寬裕的留白。
• hero 分割式首頁區塊，一側為鮮明的全出血圖片，另一側為實色區塊（如黃色），並搭配高對比排版。

09

文案語氣與禁用清單

• 語氣 具機構感、教育性，同時友善且無障礙。
• 標題風格 大膽、大寫且具描述性，聚焦於主題或地點。
• 按鈕文案 直接且以行動為導向，常搭配「→」箭頭以指示前進方向。

• 不要使用陰影來營造層次——設計依賴實色區塊與留白來建立層級。
• 不要使用多種競爭的強調色——色調嚴格限定為黑、白、灰以及特定的黃色/teal。
• 不要使用襯線字體——排版嚴格使用無襯線字體，強調現代、簡潔的美學。
• 不要使用過度圓潤的角落——按鈕與卡片使用最小化或銳利的角落。
• 不要以密集的文字區塊塞滿佈局——保持寬裕的間距，並聚焦於影像。
• 不要使用粗體字重——即使最大的展示文字也使用常規（400）字重。
• 避免: 過於隨意或口語化的語言。
• 避免: 與藝術無關的複雜術語。
• 避免: 過度使用驚嘆號。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko