精選 · 開放 · 免費

Wieden+Kennedy

一個大膽、具電影感的機構作品集，透過沉浸式攝影與大尺寸字體，展現高衝擊力的創意作品。

01

設計氣質 DNA

如同電影節的節目手冊

02

色彩

高對比電影感調色盤，依賴純白文字搭配深黑背景與豐富的攝影畫面

03

字型

grotesque-sans

• display68px · 300
• h232px · 300
• body16px · 300

主要使用 300 字重（細體），營造精緻、輕盈的感覺 · 大尺寸顯示字級（68px）用於強調衝擊力 · 顯示標題採用緊湊的字距

04

間距

不對稱佈局搭配大尺寸填滿區塊（75px、96px），創造開闊、具電影感的呼吸空間

05

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

極細的 1px 邊框謹慎使用，主要用於結構分隔

rgba(0, 0, 0, 0.25) 0px 0px 5px 0px

06

版面

全出血攝影首頁大圖搭配疊加文字，過渡至結構化的網格佈局以展示作品

07

動效與互動

透明度淡變（0.75 秒）用於內容過渡 · 變換移動（0.5 秒）用於滾動觸發的顯示效果 · 色彩過渡（0.25 秒）用於互動狀態

互動元素上游標變為指標；細微的色彩或透明度變化 · 標準指標互動

08

組件

• button 極簡文字按鈕，有時採用大寫
• card 無可見邊框的大型攝影卡片，依賴影像邊緣
• chip 未觀察到
• input 未觀察到
• hero 全視窗電影感影像，底部左側疊加大尺寸、輕字重的文字

09

文案語氣與禁用清單

• 語氣 自信、內斂且具藝術感
• 標題風格 大尺寸、輕字重（300）、小寫或首字母大寫，標點極簡
• 按鈕文案 乾淨的大寫文字連結

• 避免使用過重的字重——截圖顯示以細體（300）為主
• 避免套用明亮飽和的強調色——截圖顯示為單色調/攝影調色盤
• 避免在卡片或容器上使用圓角——截圖顯示為銳利的方形邊緣
• 避免使用緊湊間距排擠元素——截圖顯示有大尺寸填滿與留白（75px-96px）
• 避免使用裝飾性或襯線字型——截圖顯示為乾淨的 grotesque-sans
• 避免依賴複雜的背景纹理——截圖顯示為純黑或攝影填充
• 避免: 避免雜亂的佈局或繁複的背景圖案
• 避免: 避免使用過重的粗體字重（保持在 300-500 範圍）
• 避免: 避免使用明亮的霓虹色或飽和的強調色
• 避免: 避免複雜的導覽選單；保持極簡
• 避免: 避免裝飾性襯線字體
• 避免: 避免主要 UI 元素使用圓角

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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