OpenDesign·你的设计资产库

网页参考

Order

一个单色系设计工作室作品集,强调字体排印的精确性和存档摄影。

BrandStudio
Order 网站截图

01

设计气质 DNA

极简作品集字体排印存档精确

一个用于设计案例研究的、纯净的画廊档案库

02

色彩

#FFFFFFInk
#000000BG
#787878Muted
rgba(120, 120, 120, 1)Line

严格的单色调色板,完全依赖纯白色和中灰色,以深黑色为底。

03

字体

monospace

  • display56px · 400
  • body12px · 400

所有文本元素均使用等宽字体排印。 · 导航和正文内容保持严格的格式小写。 · 交互式文本元素使用水平线作为下划线。

04

间距

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

内容部分之间以大量内边距隔开,垂直方向留白充足。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

导航链接使用1px实线灰色下划线,其余部分无边框。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

非对称网格布局,采用混合图片尺寸和充足的负空间。

07

动效与交互

250msmicro
400mssmall
750msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

图像和文本过渡使用平滑的透明度淡入淡出。 · 导航链接采用微妙的悬停交互。

文本透明度降低或颜色偏移。 · 标准导航链接行为。

08

组件

  • button 仅包含文本的链接,样式为底部边框下划线。
  • card 全出血摄影案例研究卡片,带有叠加标签。
  • chip 简单的带下划线文本标签,用于分类(例如“品牌形象”、“动态”)。
  • hero 大幅、全宽摄影背景,叠加字体排印元素。

09

文案语气与禁用清单

  • 语气 极简、专业、低调。
  • 标题风格 小写等宽文本,常直接置于摄影图片之上。
  • 按钮文案 带底部边框下划线的简单文本链接。
  • 避免使用明亮的强调色——截图显示为严格的黑、白、灰调色板。
  • 避免在导航中使用大写文本——截图显示全部为小写文本。
  • 避免在容器上使用圆角——截图显示为锐利的方形边缘。
  • 避免在元素上使用投影——截图显示为扁平化的层叠美学。
  • 避免使用装饰性衬线字体——截图显示完全使用等宽字体排印。
  • 避免用元素过度填充布局——截图显示充足的留白和稀疏的内容。
  • 避免: 装饰性元素
  • 避免: 明亮的强调色
  • 避免: 圆角
  • 避免: 投影
  • 避免: 大写文本
  • 避免: 复杂动画

10

包内真实截图

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

11

System Prompt

这是一个设计工作室作品集网站,其定义是严格的极简主义和字体排印的精确性。视觉识别建立在纯黑色 (#000000)、白色 (#FFFFFF) 和中灰色 (#787878) 的单色系调色板上,没有任何强调色。字体排印完全使用等宽字体,导航和元数据部分采用小写渲染,交互状态常使用水平线作为下划线。布局是非对称且稀疏的,大量依赖高质量的摄影图片和充足的负空间。关键约束:避免大写文本,避免圆角或投影,并且绝不引入鲜艳的强调色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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