OpenDesign·你的设计资产库

网页参考

Bang & Olufsen

一个精致的深色模式硬件产品网站,运用了细微的高质量交互和克制的、高对比度的配色方案。

HardwareAudio

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

01

设计气质 DNA

高级北欧音频精致极简

一个高级北欧音频品牌的展厅。

02

色彩

#2C622CAccent
#FCFAEEInk
#FFFFFFInk soft
#0D0C0BBG
#191817BG soft
#222222BG quiet
#555555Muted
rgba(85, 85, 85, 1.0)Line

采用高对比度中性色打造高级深色模式美学,并用柔和、自然的绿色点缀表示激活状态。

03

字体

geometric-sans · monospace

  • display56px · 500
  • headline35px · 700
  • body16px · 400
  • caption12px · 400

04

间距

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

基于一致的4px基础网格,采用标准间距,以营造宽裕、透气的布局。

05

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

sm · 2px
md · 4px
lg · 40px
pill · 999px

1px solid rgba(85, 85, 85, 1.0)

0 4px 24px rgba(0, 0, 0, 0.35)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽深色区块搭配居中容器。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing

平滑的颜色和透明度过渡,用于微交互。 · 按钮和链接悬停状态的细微缓动。

细微的颜色变化或透明度偏移,配合平滑的 cubic-bezier 缓动。 · 立即的视觉反馈,伴随微交互过渡。

08

组件

  • button 极简的描边或文字按钮,使用大写字母和细微的圆角。
  • card 深色、干净的卡片,带有细微边框和精致的内边距。
  • chip 胶囊形开关,激活状态为明显的柔和绿色。
  • input 干净、无边框的输入框,带有细微的下边线。
  • hero 深色、以摄影为主的主视觉区块,搭配高对比度、精致的排版。

09

文案语气与禁用清单

  • 语气 专业、权威、低调。
  • 标题风格 简洁、直接,常使用句首字母大写。
  • 按钮文案 大写,描边或文字按钮。
  • 不要使用明亮、饱和的强调色——截图中显示的是柔和、自然的绿色。
  • 不要使用厚重的投影——截图中显示的是细微、弥散的阴影。
  • 不要使用复杂的渐变——截图中显示的是纯色深色背景和扁平色彩。
  • 不要到处使用圆角——截图中显示的是尖锐或非常细微的圆角。
  • 不要将长段落文本居中对齐——截图中显示的是左对齐文本。
  • 不要将正文文本全部大写——截图中显示的是句首字母大写或标题式大写。
  • 不要使用趣味性或异想天开的UI元素——截图中显示的是精致、极简的界面。
  • 避免: 避免使用过于装饰性的字体或复杂的布局。
  • 避免: 避免使用明亮、高饱和度的强调色。
  • 避免: 避免使用杂乱的界面或过多的UI元素。

10

包内真实截图

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

11

System Prompt

这是一个为 Bang & Olufsen 设计的高级、精致的硬件产品网站,专注于高端音频设备。设计DNA以深色模式美学和高对比度中性色为特征。关键十六进制颜色包括 #0D0C0B(背景)、#FCFAEE(墨色/文字)和 #2C622C(强调色/开关)。排版以干净的几何无衬线字体类别(BeoSupreme、Lexend Deca)为主。布局极简、透气且结构严谨。关键禁忌:不要使用明亮、饱和的强调色;不要使用厚重的投影;不要使用复杂的渐变;不要到处使用圆角;不要将长段落文本居中对齐;不要使用趣味性或异想天开的UI元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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