精選 · 開放 · 免費
Droga5
一個高端創意機構網站，運用巨型、粗體字型與電影級攝影來投射權威感。
agencyadvertising
01
設計氣質 DNA
創意大膽權威現代全球
一位大師級建築師，以簡潔、大膽的精準度，展示其標誌性作品集。
02
色彩
#0000D5Accent
#000000Ink
#FFFFFFBG
#F4F4F4BG quiet
#949799Muted
rgba(0,0,0,0.1)Line
嚴格的高對比黑白基調，搭配單一、銳利的藍色作為編輯性的點綴。
03
字型
grotesque-sans · humanist-sans · monospace
- display
100px · 700 - heading
35px · 400 - body
16px · 400 - caption
10px · 400
展示用字型採用置中對齊，以達最大視覺衝擊力。 · 小型元資料標籤使用全大寫轉換。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
在巨型字型周圍留有充足留白，以維持可讀性與視覺重量。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
極簡；大多無邊框，依賴純粹的對比與間距。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血的首頁區塊與充足的留白文字區塊交錯排列。
07
動效與互動
200msmicro
300mssmall
500msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
互動元素上的流暢、快速的顏色與背景過渡。
細微的顏色變化或顯示。 · 透過流暢過渡提供即時的視覺回饋。
08
組件
- button 實心黑色矩形搭配白色文字，無圓角。
- card 邊到邊的攝影面板，疊加文字。
- hero 一個巨大、置中對齊的標題，後接全寬的影片或圖片。
09
文案語氣與禁用清單
- 語氣 自信、權威且專業。
- 標題風格 以巨大、緊縮字距的粗體字呈現的宣言式陳述。
- 按鈕文案 直接且簡單，例如「閱讀更多」或「了解我們的服務」。
- 不要使用圓角 — 螢幕截圖顯示所有按鈕與容器皆為銳利、方形的邊緣
- 不要使用多彩的調色盤 — 螢幕截圖顯示嚴格的黑、白與單一藍色點綴方案
- 不要使用置中、輕量的字型 — 螢幕截圖顯示巨大、粗體、黑色的標題，並帶有緊縮字距
- 不要使用複雜的網格或卡片版面配置 — 螢幕截圖顯示大型、全出血的攝影區塊
- 不要使用狹窄、擁擠的間距 — 螢幕截圖顯示在巨型字型周圍有充足的留白
- 不要使用裝飾性或手寫風格的字型 — 螢幕截圖顯示用於標題的簡潔、幾何風格 grotesque-sans
- 避免: 俏皮或隨意的語言
- 避免: 圓形或氣泡狀的形狀
- 避免: 過度裝飾的字型
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站是一個高端創意機構作品集（Droga5），其特點在於鮮明、高對比的黑白調色盤，並搭配單一、銳利的藍色（#0000D5）作為點綴。其字型是核心特徵：巨大、粗體、緊縮字距的 grotesque-sans 標題（如 DroteskNo5）主導了視覺領域，通常採用置中對齊以達最大衝擊力。版面配置是一系列全出血的攝影區塊，與充足的留白文字區塊交錯排列。關鍵設計規則包括：絕對使用方形角落（無 border-radius）、嚴格的極簡色彩方案，以及展示文字的巨大尺寸。關鍵禁忌：絕不使用圓角的 UI 元素，絕不使用多色調色盤，絕不使用小型或輕量的展示字型，也絕不使用複雜的網格或小型卡片來 clutter 版面。
en · zh-CN · zh-TW · ja · ko