Glow 网站预览
Glow 网站预览

Glow

近白色基底、产品图像展示与圆角卡片。

页面以近白色为基底,搭配近黑色文字。字体采用 Roobert。视觉特点包括产品图像展示、圆角卡片、渐变展示、紧密字距。适合参考的场景:技术项目官网、区块链产品介绍页。

查看原始网站

使用规范

建议采用

  • 首屏标题使用 Roobert 700/56px 字号,字间距 -1px —— 这是标志性的展示处理方式。
  • 使用 #cc62d5(Voltage Magenta)为每个视口仅出现一个元素——即主要 CTA 按钮——并让其独立承载品牌调性。
  • 所有按钮使用 19px 的圆角;这种半胶囊形状是系统的设计语言标志。
  • 产品卡片和手机 展示模型 包裹区域使用 40px 圆角——柔软的边界使整体布局呈现出画廊般的质感。
  • 使用大写 12px Roobert 500 字号,字间距 0.083em,用于区块标签、'新品' 徽章和博物馆风格的说明文字。
  • 在 48–64px 区块内嵌入 24px 卡片内边距,以营造宁静、宽敞的节奏感。
  • 页面整体色相保持至少 85% 无彩色;让洋红和橙色作为强调点,而非装饰性点缀。

建议避免

  • 切勿在正文、边框或非操作表面使用 #cc62d5 —— 过度使用会削弱品牌色彩的突出性。
  • 切勿使用系统字体或回退至 Arial/Helvetica —— Roobert 的几何字形(含 ss01/ss02 替代字)承载品牌身份。
  • 切勿在按钮上使用锐利的 0px 或 4px 圆角;19px 为标准。4px 仅保留用于桃色 '新品' 徽章。
  • 切勿为卡片或按钮添加阴影 —— 设计刻意保持扁平,通过表面颜色与圆角实现分隔。
  • 切勿在单屏中放置超过一个填充洋红按钮;应搭配一个透明描边按钮(#131517)作为配对。
  • 不要在标识标记之外使用Plasma Gradient — 它是身份元素,而不是装饰性水洗。
  • 切勿在瓷白色 #f4f5f6 基底上插入中灰卡片;仅 #ffffff 可置于其上。