Redbrick Coffee 网站预览
Redbrick Coffee 网站预览

Redbrick Coffee

白色基底、摄影展示与衬线字形。

页面以白色为基底。字体采用 Surt、Editorial Old。视觉特点包括摄影展示、衬线字形、细线分隔、满幅色块。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有交互文本元素、所有区块标签和所有轮廓式操作均使用砖红 #e82c2a,系统为单色,仅有一条色彩主线。
  • 展示标题使用 Editorial Old 字重300,尺寸100–150px,行高约1.0;永不加粗,永不使用400及以上字重。
  • 为 Surt 字体保持一致的正向字间距:15px时为0.013em,20px时为0.017em,30px时为0.03em,35px时为0.04em,10px标签时为0.06em。
  • 所有卡片和图像区块使用25px圆角;胶囊形按钮和输入控件使用50px圆角;行内文本链接使用3.75px圆角。
  • 每张图像区块必须配以文本区块,比例为50/50——系统为编辑式,而非满幅视觉冲击。
  • 运行标题、公告文本和箭头链接使用10px GTStandard-M,字间距0.06em——工具标签绝不使用更大字号。
  • 产品卡片置于#f2f2f2背景上,内边距30px;不使用阴影,由25px圆角完成立体感表达。

建议避免

  • 不要引入填充(实底)按钮样式——Redbrick 唯一的操作表面是轮廓化的彩色链接。
  • 不要加粗展示标题;字重300的纤细衬线字体才是层级,增加字重会破坏品牌调性。
  • 不要引入第二套品牌色;系统为红底奶油白,而非多色搭配。
  • 不要在卡片或图像上使用阴影;立体感通过25px圆角和#f2f2f2背景的偏移表达。
  • 不要在窄列中居中展示标题——它应位于左右宽栏中,左侧留有充足内边距。
  • 不要将白色文字直接置于#f2c2f2背景(对比度过低)或公告栏中,除非使用纯白色。
  • 不要使用白底产品电商摄影;所有图像必须为温暖的顶视生活场景,包含木质表面、书籍和手部触碰。