OpenDesign·你的设计资产库

网页参考

Droga5

一个高端创意机构网站,利用巨大、粗体的排版和电影感摄影来展现权威性。

AgencyAdvertising
Droga5 网站截图

01

设计气质 DNA

创意大胆权威现代全球

一位建筑大师,以干净、粗犷的精确性展示其标志性作品集。

02

色彩

#0000D5Accent
#000000Ink
#FFFFFFBG
#F4F4F4BG quiet
#949799Muted
rgba(0,0,0,0.1)Line

严格高对比度的黑白基底,搭配单一、锐利的蓝色作为编辑性的标点。

03

字体

grotesque-sans · humanist-sans · monospace

  • display100px · 700
  • heading35px · 400
  • body16px · 400
  • caption10px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

此网站是一个高端创意机构作品集(Droga5),其特点是使用鲜明、高对比度的黑白配色方案,搭配单一的锐利蓝色(#0000D5)。其排版是定义性特征:巨大、粗体、字距紧凑的 grotesque-sans 标题(如 DroteskNo5)主导视觉场域,通常居中对齐以实现最大冲击力。布局由一系列满幅的摄影区块与留白充裕的文字区块交替构成。关键设计规则包括:绝对使用方形角落(无 border-radius)、严格限制颜色的调色板,以及展示型文字使用巨大尺寸。关键禁忌:绝不使用圆角 UI 元素,绝不使用多彩调色板,绝不使用小型或轻盈的展示型排版,绝不使用繁杂的网格或小型卡片使布局拥挤。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。