Roberta's Pizza 网站预览
Roberta's Pizza 网站预览

Roberta's Pizza

白色基底、手绘图形与视频展示。

页面以白色为基底，搭配深蓝色文字。局部操作控件以红色强调。字体采用 Offset TM、Borensa。视觉特点包括手绘图形、视频展示、满幅色块、宽松留白。适合参考的场景：品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • Roberta Red #ed2023 仅用于表面上唯一最重要的操作，以及满幅品牌展示场景。绝不用它装饰。
  • 标题使用 Borensa，字号为 80–120px，字间距为 -0.02em，行高为 0.88，让文字叠成海报区块。
  • 正文、界面标签和按钮保持 Offset TM、14–24px，并采用固定 0.04em 正字间距。这种松展感是标志。
  • 所有矩形按钮使用 7.2px 圆角，标签和汉堡菜单使用 9999px 胶囊圆角。
  • 硬朗复古阴影 rgba(0,0,0,0.25) 0px 4px 4px 0px，只用于链接悬停或激活状态，绝不作为静止悬浮效果。
  • 区块铺满 100vw，其内部内容以居中单列叠放，最大宽度为 600–1200px。
  • 文字区块通过红色星形色带或棋盘格边框缎带区分，而不是只依赖留白。

建议避免

  • 不要引入任何新颜色。系统由两种中性色加一种红色构成，添加第四种颜色会破坏海报逻辑。
  • 不要使用柔和模糊阴影，包括 12px+ 模糊或大扩散。唯一阴影是偏移 4px 的硬朗复古投影。
  • 任何可见文字都不要采用小于 22px 的 Borensa。它的紧窄形态在小字号下无法辨认。
  • 超过四行的正文不要居中。长篇文字采用左对齐行宽，或拆成较短的居中段落。
  • 红色背景上不要使用红色 CTA。此时切换为炭色或白色，以保持对比。
  • 不要添加渐变、玻璃拟态或任何装饰性模糊。系统平面、像印刷品，也像独立杂志。
  • 按钮的四个角不要全部圆成胶囊。7.2px 才是按钮圆角，9999px 只留给标签和菜单图标。

相似设计语言