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 作为正文文本;仅保留用于精细边框和非激活的轮廓线。