精選 · 開放 · 免費

SFMOMA

為世界級現代美術館打造的攝影主導大膽編輯設計。

01

設計氣質 DNA

現代美術館的數位前廳，優先運用大尺度攝影與醒目字體排印，營造實體美術館的體驗感。

02

色彩

採用克制的高對比色調，以純淨白色為基底、深炭灰墨色為主，並嚴格將單一鮮豔紅色保留給互動與會員相關元素。

03

字型

geometric-sans · humanist-sans

• display32px · 500
• body16px · 400
• caption14px · 400
• overline12px · 400

標題使用粗體的展示型無襯線字體，搭配緊湊的行距。 · 內文使用高度易讀的人文無襯線字體。 · 標籤與標籤文字統一採用大寫與加寬字間距。

04

間距

採用寬鬆的垂直間距，主要內容區塊頂部保留 120px 的大尺寸內距，營造開放感與實體美術館空間感。

05

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

rgba(68, 73, 76, 0.2) 0px 3px 15px 0px

06

版面

主要內容採用單欄全寬佈局，使用橫跨整個視窗寬度的大尺度影像。

07

動效與互動

互動元素的變形與陰影採用流暢過渡效果（0.4 秒）。 · 狀態變化使用一般 0.2 秒過渡效果。

互動元素的色彩變化或細微變形，以指標游標提示。 · 立即回應，採用標準連結行為。

08

組件

• button 幽靈按鈕或文字連結，採用鮮豔紅色強調色與標準指標游標。
• card 內容區塊由大型全寬影像與後方文字區塊組成，無可見邊框或背景容器。
• chip 用於標籤或分類的大寫文字標籤。
• input 搜尋圖示觸發器，未啟用時無可見輸入欄位。
• hero 全版面攝影首圖，疊加大型半透明白色展示字體排印。

09

文案語氣與禁用清單

• 語氣 具機構感、權威性，同時友善且易於親近。
• 標題風格 大膽、簡潔且有力，常使用展示字體權重以立即吸引目光。
• 按鈕文案 以行動為導向且清晰，通常使用「會員資格」或「購票」等標準動詞。

• 請勿在容器或影像上使用圓角——截圖顯示為銳利的方形邊緣。
• 請勿使用裝飾字體或首字放大——截圖使用簡潔現代的展示型無襯線字體。
• 請勿過度使用紅色強調色——截圖嚴格將其保留給主要導覽與互動元素。
• 請勿使用密集的多欄文字佈局——截圖依賴充足留白與單欄閱讀路徑。
• 請勿使用帶有陰影或邊框的複雜卡片樣式——截圖使用無邊框、影像優先的區塊。
• 請勿使用深色模式或深色背景——截圖顯示為以明亮白色背景為主的介面。
• 避免: 過度隨意的語言
• 避免: 雜亂的文字區塊
• 避免: 泛用的圖庫攝影

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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