Bose 网站预览
Bose 网站预览

Bose

白色基底、大幅摄影展示与大字排版。

页面以白色为基底,搭配近黑色文字。字体采用 Bose Headline、Bose Text。视觉特点包括大幅摄影展示、大字排版、细线分隔、分屏构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 使用 Soprano White #ffffff 作为页面背景,默认页面画布,产品卡片字段使用 Studio Mist #f8f8f8。
  • 将宣传展示标题设置为 Bose Headline 900 字重:60px/53px 字号,字间距 1.2px,或 96px/84px 字号,字间距 1.44px。
  • 将公共导航设置为大写 Bose Text 15px/18px 字重 400。
  • 使用 Bass Black #131317 作为主要文本、图标笔画、1px 行动边框、深色填充以及反色徽章的颜色。
  • 为矩形购买控件使用 2px 圆角,仅在状态徽章和胶囊控件中使用 88px 或 9999px 圆角。
  • 为产品卡片的购买控件提供 12px 垂直和 24px 水平内边距。
  • 仅将 Chord Blue #005bff 用于内联学习链接;保持商业控件为单色。

建议避免

  • 不要使用圆角卡片边框;产品与宣传面板使用 0px 卡片圆角。
  • 不要为卡片、页眉、搜索框或按钮添加阴影效果;通过 #ffffff 细线规则和表面变化实现分层。
  • 不要用宽体几何无衬线字体替代 Bose Headline,也不要将其用于小于 32px 的字号。
  • 不要让所有按钮都使用深色填充;在图像和产品卡片表面使用 Soprano White #ffffff 边框控件。
  • 不要将 Chord Blue #005bff 用作填充型操作背景。
  • 不要在页面表面或控件中引入渐变。
  • 不要使用 Steel Gray #949494 作为正文文本;仅保留用于精细边框和非激活的轮廓线。