OpenDesign·你的设计资产库

网页参考

Bou

拥有电影感主视觉与清晰高对比区块的精致编辑式设计机构网站。

AgencyEditorialPhotographicPremiumClean
Bou 网站截图

01

设计气质 DNA

品牌设计市场营销传播策略设计机构企业服务

融合高端摄影与简洁编辑式排版的精品设计工作室,塑造精致专业的数字形象。

02

色彩

#0A0A0AInk
#DBD7DCInk soft
#EBEBEBBG
rgba(10,10,10,0.15)Line

采用去饱和的单色系方案,以黑白为核心基调,完全依靠摄影提供色彩与温度。

03

字体

humanist-sans

  • display42px · 300
  • body16px · 300
  • caption14px · 300

所有主要文本使用字重300,保持优雅轻盈的视觉感受。 · 仅对小型标签(如“SERVICES”或“HELSINKI”)应用大写转换。 · 保持1.4至1.5的宽松行高以确保最佳可读性。

04

间距

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

采用统一的8px或16px垂直节奏规范,用于内边距与元素间距,确保布局规整且呼吸感充足。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 1400px

1px solid rgba(10,10,10,0.15) 或 1px solid rgb(219, 217, 220)

rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅摄影主视觉后接双栏内容与服务区划分,基于12栏网格实现灵活对齐。

07

动效与交互

200msmicro
300mssmall
500msmedium
cubic-bezier(0.29, 0.48, 0.5, 0.99)easing

链接与按钮采用平滑色彩过渡。 · 内容区块进入视口时触发细微淡入效果。

链接与按钮采用细微色彩偏移或透明度变化。 · 即时响应搭配平滑过渡效果。

08

组件

  • button 胶囊形按钮:黑色背景配白色文字,或深色背景上的极简幽灵按钮(白色边框)。
  • card 极简无边框卡片,依靠大幅摄影与简洁排版构建视觉层级。
  • chip 小型胶囊形标签,采用大写文本与细边框,用于标注地点或分类。
  • input 极简输入框,仅设1px底部分割线,无背景填充。
  • hero 全屏电影感摄影图,叠加居中的大尺寸排版文本。

09

文案语气与禁用清单

  • 语气 专业、自信、直接。
  • 标题风格 简洁优雅且具描述性,聚焦机构核心服务。
  • 按钮文案 极简风格,采用纯文本链接或小型胶囊按钮。
  • 勿使用高饱和度色彩——截图显示严格的单色黑白配色方案。
  • 勿使用粗重字体——截图显示主导的字重300营造轻盈优雅感。
  • 勿使用圆角阴影卡片——截图显示摄影定义边界的平面无边框布局。
  • 勿使用局促的小间距——截图显示充足内边距与间距(8px-16px)营造呼吸感。
  • 勿使用装饰性边框——截图显示仅对芯片或输入框等功能元素使用极简1px边框。
  • 勿使用复杂多色渐变——截图显示依靠摄影纵深感的纯净纯色背景。
  • 避免: 避免过度随意或俚语化表达。
  • 避免: 避免滥用感叹号。
  • 避免: 避免使用非服务必需的复杂技术术语。

10

包内真实截图

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

11

System Prompt

这是品牌公司“Bou”的高端设计机构网站。采用编辑式精致设计风格,严格使用黑色(#0A0A0A)与浅灰色(#EBEBEB)的单色配色方案,完全依靠高质量摄影呈现视觉吸引力。字体采用humanist-sans系列字重300,营造轻盈优雅感。布局简洁基于网格系统,间距宽松。关键禁忌:1.禁用高饱和度色彩(设计为严格单色系)。2.禁用粗重字体(保持轻盈精致的字重300)。3.避免装饰性边框或厚重阴影(保持平面摄影主导的表面处理)。整体语调专业直接。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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