精選 · 開放 · 免費

Design Museum

一個精緻的文化機構網站，優先考慮攝影衝擊力和大膽的字體排印識別。

01

設計氣質 DNA

將大膽的建築風格畫廊入口轉化為數位介面。

02

色彩

高對比度的單色調，搭配建築風格的黃色強調色與沉浸式攝影。

03

字型

geometric-sans · grotesque-sans

• display50px · 700
• heading30px · 700
• body15px · 400
• small12px · 500

為大型展示字體使用緊湊的字距，以營造建築般的張力。 · 導覽和行動標籤優先使用大寫樣式。 · 在展示字體與內文字重之間保持高對比度，以建立清晰的層次。

04

間距

以 4px 為基礎網格，主要內容區塊之間預留充裕的留白，讓攝影圖片得以呼吸。

05

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

使用者介面元素使用 1px 實心黑色邊框，作用狀態使用 2px 實心邊框。

0px 32px 68px 0px rgba(0,0,0,0.3)

06

版面

全版攝影主視覺，搭配置中的內容和基於網格的資訊佈局。

07

動效與互動

文字元素在滾動時錯落淡入並向上滑動。 · 互動元素的平滑 hover 過渡效果。 · 主視覺圖片上的細膩視差效果。

色彩反轉或背景的銳利轉換。 · 透過輕微的縮放或透明度變化提供即時視覺回饋。

08

組件

• button 高對比度的實色區塊（黑/白/黃），具有銳利的邊角和大寫文字。
• card 由銳利邊框或極簡內距定義的簡潔容器。
• chip 簡單的文字標籤，可選擇是否帶有邊框。
• input 簡潔的表單元素，具備清晰的邊框和標準內距。
• hero 大型格式的攝影背景，搭配大膽的字體疊加效果。

09

文案語氣與禁用清單

• 語氣 具機構感、權威性，同時友善且具前瞻性。
• 標題風格 大膽、簡潔，且措辭常帶有建築感。
• 按鈕文案 直接、以行動為導向，並常使用大寫以強調。

• 不要在主要按鈕上使用圓角——截圖顯示的是銳利的矩形按鈕形狀。
• 不要使用低對比度的文字顏色——截圖顯示的是白底或黃底上的高對比度黑色文字。
• 不要使用裝飾性或襯線字體——截圖顯示的是幾何與人文無襯線字體系列。
• 不要使用柔和、粉彩的強調色——截圖顯示的是大膽、高彩度的黃色強調色。
• 不要讓所有元素都置中對齊——截圖顯示的是左對齊文字搭配置中的漢堡選單。
• 不要在卡片上使用過大的圓角——截圖顯示的是銳利的邊角或極小的圓角。
• 避免: 避免使用過於裝飾性或手寫風格的字體。
• 避免: 避免使用柔和、粉彩的色調。
• 避免: 避免在主要按鈕上使用圓角。
• 避免: 避免使用留白不足的擁擠版面。
• 避免: 避免使用通用的素材圖片。
• 避免: 避免在重要資訊上使用低對比度的文字。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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