精選 · 開放 · 免費

Cooper Hewitt

一個大膽的機構設計博物館網站，運用厚重字型與沉浸式影像來呈現展覽與計畫。

01

設計氣質 DNA

一座作為文化地標的頂尖設計博物館，運用粗體字型與沉浸式攝影來展現設計傑作。

02

色彩

高對比度的機構調色板，搭配標誌性的鮮豔橘色強調色。

03

字型

grotesque-sans

• display40px · 500
• body18px · 400

所有主要文字均採用大寫字母。 · 標題使用緊湊的行高。

04

間距

在嚴謹的網格系統中，提供寬裕的內距與外距。

05

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

1px solid rgba(255,255,255,0.5)

rgb(255, 255, 255) 5px 0px 0px 0px · rgb(255, 255, 255) -5px 0px 0px 0px

06

版面

全幅攝影主視覺區塊，後接多欄網格。

07

動效與互動

懸停時的顏色與邊框顏色過渡。 · 簡單的輪播滑動動畫。

文字連結與邊框的色彩過渡。 · 互動元素使用標準的指標游標。

08

組件

• button 粗體大寫文字連結，部分採用白色文字搭配彩色背景（紫色、藍色）。
• card 全出血攝影區塊，搭配大型、白底的文字標籤。
• chip 小型圓形輪播指示器（橘色/灰色）。
• input 極簡搜尋欄位，包含文字與圖示。
• hero 全幅電影級影像，覆蓋著大型、大寫字母、白底的標題區塊。

09

文案語氣與禁用清單

• 語氣 機構性、具權威感，同時親切且引人入勝。
• 標題風格 粗體、大寫、無襯線字型，常置於攝影背景之上。
• 按鈕文案 直接且具行動導向，常使用橘色作為強調。

• 不要在主要導航中使用小寫字母——截圖顯示選單項目為全大寫、粗體文字。
• 不要使用複雜的漸層背景——截圖顯示標題區域為純黑色背景。
• 不要使用寬敞、開放的佈局而缺乏厚重的影像——截圖顯示全幅攝影主視覺與緊湊的網格。
• 不要使用纖細、精緻的字型——截圖顯示展示文字使用了厚重、粗體的 grotesque-sans 字體。
• 不要避免使用白底文字覆蓋——截圖顯示標題直接放置於繁忙的照片上，並襯以白色矩形。
• 不要使用單調、僅限於單色系的調色板——截圖顯示高對比度的黑白配色方案，並搭配鮮豔的橘色強調色。
• 避免: 手寫字體
• 避免: 柔和或粉彩的調色板
• 避免: 低對比度的文字

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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