Alpine Hearing Protection 网站预览
Alpine Hearing Protection 网站预览

Alpine Hearing Protection

白色基底、大幅摄影展示与产品图像展示。

页面以白色为基底,搭配近黑色文字。字体采用 Antarctica、GTStandard-M。视觉特点包括大幅摄影展示、产品图像展示、扁平表面、居中构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有正文、图标和边框均使用可可墨水(#200e0e),禁止使用纯黑色(#000000)或灰黑色;温暖的底色是品牌特征
  • 所有表面(包括卡片、按钮、徽章、输入框、图片)均使用 2.23px 圆角——锐角是不可妥协的
  • 仅在三个位置使用信号红(#ed212d):品牌栏、保证栏和产品状态徽章——绝不用于行动号召、链接或正文
  • 将展示标题压缩字间距至 -0.02em(例如 42px 时为 -0.84px)以增强编辑上的紧凑感;正文及以下内容保持正常字间距
  • 交替使用白色(#ffffff)和淡粉奶油色(#f8f0ec)作为节区背景,以形成节奏,无需使用阴影
  • 将分类导航栏和‘帮我选择’按钮居中对齐——左对齐的导航会破坏印刷目录的质感
  • 英雄区域和编辑性板块使用全幅生活方式摄影(竖版裁剪、自然光、浅景深);网格区域仅使用纯色背景的产品图片

建议避免

  • 任何组件均不添加盒阴影——抬升感来自背景色变化,而非模糊或偏移
  • 所有圆角不得超过 2.23px——禁止使用胶囊形按钮、大半径圆角;近锐角的美学定义了整个系统
  • 按钮、链接或悬停状态绝不使用信号红(#ed212d)——它是品牌标识色,而非行动色
  • 禁止引入投影、渐变或玻璃态设计——整体设计刻意保持平面和印刷感
  • 禁止将产品色样(薄荷绿雾 #9ac9b5、尘粉玫瑰 #dbb0b3)作为全局性辅助色——它们仅是产品变体颜色
  • 禁止对正文段落进行居中对齐,或使用除 Antarctica(或其替代字体)以外的字体;单一字体的纪律性是让系统感觉像一本刊物的关键
  • 禁止使用纯黑色(#000000)作为文字或图标——始终使用可可墨水(#200e0e)以维持温暖的色调和谐