精选 · 开放 · 免费
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 元素，绝不使用多彩调色板，绝不使用小型或轻盈的展示型排版，绝不使用繁杂的网格或小型卡片使布局拥挤。
en · zh-CN · zh-TW · ja · ko