精選 · 開放 · 免費

Barbican

一個結合大膽機構品牌與沈浸式活動影像的世界級藝術中心網站。

01

設計氣質 DNA

一所享譽盛名的都會藝術中心，呈獻多元的音樂、戲劇與電影節目。

02

色彩

一套鮮明、對比強烈的機構調色盤，以標誌性橙色與深黑色為基調，旨在突顯高衝擊力的攝影作品。

03

字型

grotesque-sans

• display56px · 700
• h240px · 700
• body19px · 400
• caption14px · 700

標題使用粗體字重，並搭配緊湊的字距調整。 · 內文字體在略高於平均的基礎尺寸下，保持高度易讀性。 · 全大寫字母僅謹慎用於結構性標籤。

04

間距

內容以寬裕的垂直間距流動，給予大型影像充足的呼吸空間。

05

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

1px solid rgba(26, 26, 26, 0.2)

rgba(0, 0, 0, 0.1) 0px 0px 10px 0px · rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset

06

版面

強烈的中央欄位佈局，搭配全版出血影像，以打破格線並營造戲劇效果。

07

動效與互動

在按鈕和互動狀態等互動元素上，採用細膩的轉場效果。 · 內容區塊進入視野時，採用流暢的淡入或滑動效果。

按鈕與連結在互動時，會有細微的透明度或背景色變化。 · 提供即時的視覺回饋，通常為輕微的縮放或顏色轉換。

08

組件

• button 實心或外框樣式，採用銳利或微圓角設計；主要操作按鈕使用標誌性橙色。
• card 內容導向的卡片，以突出的影像為主，邊框極簡，依賴視覺內容來定義輪廓。
• chip 實心、全大寫的標籤，用於表示如「CINEMA」等分類，使用高對比色彩（橙色、綠色）。
• input 簡約的文字輸入欄位，樣式極簡，通常為外框樣式或帶有細微的底部邊框。
• hero 全寬或近乎全寬的沈浸式影像，搭配粗體的疊加文字與主要行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 權威、親切且富有文化底蘊。
• 標題風格 直接、引人入勝，且常描述藝術內容。
• 按鈕文案 以行動為導向且清晰，引導使用者前往特定活動或資訊。

• 不要使用柔和或粉彩色調的調色盤——截圖顯示的是高對比、鮮明的橙色與黑色主題。
• 不要在所有元素上套用厚重的陰影——截圖顯示了克制的運用，僅在必要時使用細微陰影以增加層次。
• 不要將所有文字置中對齊——截圖顯示明顯偏好靠左對齊的文字區塊。
• 不要使用裝飾性或手寫字體——截圖顯示了嚴謹、乾淨、機構感的無襯線字體排印。
• 不要使用過於圓潤的介面元素——截圖顯示大部分為矩形或微圓角的元件。
• 不要在桌面上將導覽隱藏於複雜的超級選單之後——截圖顯示了清晰的主要導覽列，並帶有下拉式指示器。
• 避免: 避免使用過於隨意或流行的語言，以免削弱場館的聲望。
• 避免: 避免訊息雜亂；讓影像承擔大部分的溝通工作。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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