OpenDesign·你的设计资产库

网页参考

AREA 17

一个精致、以字体为驱动的工作室作品集，采用单色配色与广阔的留白。

AgencyEditorial

封面待补录，可通过原站查看设计。

01

设计气质 DNA

合作影响力战略高端设计驱动

高端建筑期刊与全球战略公司的结合体。

02

色彩

#1A1A1AInk
#949495Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#757575Muted
rgba(230, 230, 230, 1)Line

严格单色，运用高对比度的字体与广阔的留白来确立高端、编辑的基调。

03

字体

grotesque-sans

  • display55px · 400
  • headline42px · 400
  • body16px · 400

大型展示字体采用紧凑的负 letter-spacing · 中等字重（500）专用于标识与特定 UI 强调 · 左对齐排版，各文本块间留有充裕的垂直空白

04

间距

4px
8px
16px
24px
32px
48px
64px
96px
118px

充裕、非对称的间距，设有大面积空白区域与带 padding 的文本块。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 9999px

用于 cookie 同意操作与特定分隔线的微妙 1px 边框。

rgb(0, 0, 0) 0px 0px 0px 1px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称网格，内容重心偏左，通过大量 padding 与留白来定义结构。

07

动效与交互

150msmicro
300mssmall
1000msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

大型图像与页面加载揭示采用缓慢、平滑的 opacity 与 transform 过渡（1秒） · 交互元素如按钮采用更快、微妙的颜色与背景过渡（0.3秒）

交互文本与按钮上的微妙颜色偏移或轻微 opacity 变化。 · 无强烈的视觉反馈，保持平静、编辑的氛围。

08

组件

  • button 极简的扁平或描边按钮，常带有小圆角，依靠细边框来界定形态。
  • card 未突出展示，表明其专注于连续滚动与大尺寸图像，而非基于网格的卡片布局。
  • chip 不采用此形式，倾向于使用清晰的导航链接与简洁的文本分类。
  • input 主 UI 中不可见，在表单场景中默认使用标准文本输入框。
  • hero 纪念性的左对齐文本陈述，在视口中占据主导地位，上下方留有显著负空间。

09

文案语气与禁用清单

  • 语气 权威、自信且高度专业。
  • 标题风格 陈述性的、第一人称复数（“我们合作...”）语句，以确立机构主体性与专业性。
  • 按钮文案 极简且功能性（“接受”、“拒绝”、“联系”），无攻击性的促销语言。
  • 勿使用鲜艳的强调色——截图显示的是严格的黑、白、灰单色配色
  • 勿使用装饰性衬线体——截图显示通篇为干净、几何化的 grotesque-sans 字体
  • 勿将元素过度拥挤——截图显示文本块间有广阔的留白与充裕的 padding
  • 勿使用厚重的投影——截图显示极简、扁平的表面，必要时仅使用微妙的 1px 边框
  • 勿使用俏皮或圆润的展示字体——截图显示标题为严肃、现代的无衬线体
  • 勿将主要文本块居中对齐——截图显示所有主标题与正文内容均采用强烈的左对齐
  • 避免: 俏皮的行话
  • 避免: 感叹号
  • 避免: 过于复杂的句子结构
  • 避免: 填充词

10

包内真实截图

AREA 17 — 桌面首屏（hero）
桌面首屏（hero）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
AREA 17 — 移动首屏
移动首屏

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

11

System Prompt

这是一个高端工作室网站，以超洁净、极简的美学与广阔的留白为特征。主要颜色是纯白（#FFFFFF）与近黑墨色（#1A1A1A），浅灰色（#F2F2F2, #949495）用于微妙的背景对比与柔和文本。字体严格为现代 grotesque-sans，具有超大、左对齐的展示标题（55px）与紧凑的负 letter-spacing（-0.825px）。关键设计规则包括：避免使用任何鲜艳的强调色（配色严格单色），避免装饰性衬线体或俏皮字体，避免杂乱的网格或厚重投影，并保持充裕、非对称的垂直节奏。揭示效果采用缓慢、平滑（1秒）的 opacity 过渡，交互状态则采用更快（0.3秒）的过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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