精选 · 开放 · 免费

Bang & Olufsen

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

01

设计气质 DNA

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

02

色彩

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

03

字体

geometric-sans · monospace

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 专业、权威、低调。
• 标题风格 简洁、直接，常使用句首字母大写。
• 按钮文案 大写，描边或文字按钮。

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

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko