精選 · 開放 · 免費

The Broad

一個高對比、以展覽為核心的美術館網站，運用醒目的紅色強調色與簡潔的無襯線字體來展示藝術品。

01

設計氣質 DNA

一個乾淨的機構型畫廊空間，配有醒目的圖形標識與寬裕的白色牆面。

02

色彩

高對比展覽設計，使用中性白色/灰色畫布，搭配主導性、高飽和度的紅色，作為主要品牌識別與操作用途。

03

字型

grotesque-sans

• display36px · 700
• body14px · 400

文字轉換 uppercase 大量用於導覽、標籤與標題。 · 字體嚴格限定在無襯線類別，以營造乾淨、機構感的外觀。 · 標題行高保持緊湊，內文則採用標準行高，以確保可讀性。

04

間距

採用一致的 4px 基礎網格，導覽與互動元素使用標準內距。

05

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

主要邊框為 1px solid #333F48，偶爾使用 2px 強調邊框。

rgba(0, 0, 0, 0.06) 0px 13px 20px 0px · rgba(0, 0, 0, 0.26) 0px 3px 16px 0px

06

版面

分割式首頁版面，包含大型圖片與實色文字區塊，過渡至多欄內容網格。

07

動效與互動

標準的透明度與 box-shadow hover 狀態過渡效果。

細微的 hover 過渡效果，通常涉及 box-shadow 或輕微透明度變化。 · 直接導覽或狀態變更，無複雜微互動。

08

組件

• button 實色主要按鈕，搭配 uppercase 文字與緊湊內距，另有外框次要按鈕。
• card 以圖片為主的卡片，配有簡潔文字說明與對齊的狀態指示器（例如「展出中」）。
• hero 大型分割式首頁版面，包含全寬攝影區塊與高對比實色訊息面板。

09

文案語氣與禁用清單

• 語氣 具邀請感、清晰且具機構感，著重於無障礙性與資訊傳達。
• 標題風格 直接、uppercase 且資訊導向，使用粗體字重建立層級。
• 按鈕文案 以行動為導向且高度可見，使用實色背景或高對比邊框。

• 不要使用裝飾性襯線字體——截圖顯示嚴格的無襯線機構風格。
• 不要使用柔和或粉彩色調的強調色——截圖顯示鮮明、高飽和度的紅色 (#D6001C) 作為唯一主導強調色。
• 不要在主要元件上使用圓角——截圖顯示面板與大型按鈕具有銳利的方形邊緣。
• 不要用厚重的覆蓋層遮擋藝術品——截圖顯示乾淨、無阻礙的攝影圖像。
• 不要使用複雜多欄網格作為主要導覽——截圖顯示清晰、單行的頂部導覽列。
• 不要依賴細微的色彩變化作為互動——截圖顯示高對比按鈕與清晰、獨特的區塊。
• 避免: 避免過於隨意或俏皮的語言。
• 避免: 避免使用裝飾性襯線字體。
• 避免: 避免使用複雜漸層或陰影，以免分散對藝術品的注意力。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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