Bang & Olufsen 网站预览
Bang & Olufsen 网站预览

Bang & Olufsen

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 BeoSupreme、object-fit: cover; object-position: center;。视觉特点包括胶囊形控件、细线分隔、宽松留白、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有尺寸均使用 BeoSupreme;绝不引入第二套字体
  • 所有按钮和交互型胶囊控件使用 40px 圆角
  • 仅将 #060daa 用作满幅背景平面——绝不作为文字颜色、图标或小装饰色
  • 所有卡片、输入框和容器使用 0px 圆角;卡片应完全不可见
  • 在 36px 展示尺寸下使用极紧字间距(-0.056em),在 9px 微标签尺寸下放宽字间距(+0.143em)——反向字间距是标志性特征
  • 产品摄影置于纯 #ffffff 或 #060daa 背景上;绝不叠加在杂乱背景上
  • 各区块之间保持 60-80px 的垂直节奏;让产品有呼吸空间

建议避免

  • 卡片、按钮或弹出框上不要使用阴影——系统整体无阴影
  • 不要将 #060daa 用作行动号召(CTA)填充色或链接色——它是背景平面,不是按钮
  • 除作为全屏背景外,文字中绝不使用任何彩色
  • UI 元素上不要使用渐变——仅在首屏摄影中允许使用
  • 默认状态下按钮不要使用实色填充——仅允许使用轮廓/透明描边处理
  • 按钮不要使用 2px 或小圆角;仅胶囊形(40px)是按钮形态
  • 不要在产品单元格中堆叠徽章、评分或促销标签——价格和名称已足够