Mr. Pops 网站预览
Mr. Pops 网站预览

Mr. Pops

白色基底、大幅摄影展示与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Cervo、HelveticaNeueCyr。视觉特点包括大幅摄影展示、胶囊形控件、大字排版、细线分隔。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • Cervo 展示文字深叠四行,144px 首屏字号的行高压至 0.75。
  • Cherry Marquee #b00e2f 用于轮廓、链接与强调文字,绝不用作按钮背景填充。
  • 22px 及以上所有 Cervo 字号设为 0.05em 正字间距。
  • 每个交互元素都使用 300px 胶囊圆角。
  • 次要内容用 40px 圆角的 Cream Bisque #fee5ca 填充托起,而不是阴影。
  • 首屏摄影边到边铺满,文字直接叠在图片上,不使用遮光覆盖层。
  • 正文使用 HelveticaNeueCyr 字重 400,15-16px,行高 1.3-1.4,让展示文字保持页面最响亮。

建议避免

  • 按钮不要填充实色 Cherry Marquee,品牌信号是红轮廓,而不是红块。
  • 卡片、按钮或面板不要用投影,深度来自奶油表面,而非浮起叠层。
  • 展示字号 Cervo 行高不要超过 1.0,压缩行高就是标志。
  • 不要引入灰或冷中性色,所有中性色应是暖奶油、白,或纯黑。
  • 不要使用第二种彩色强调,奶油、黑、白系统之外只允许 Cherry Marquee。
  • 画布不要切至深色,也不要使用深色模式,品牌锁定日光浅色主题。
  • Cervo 不要使用负字间距,0.05em 向外展开的字间距让招牌呈现标识感。