Leif Products 网站预览
Leif Products 网站预览

Leif Products

近白色基底、等宽文字标注与细线分隔。

页面以近白色为基底。字体采用 PP Right Grotesk、Söhne。视觉特点包括等宽文字标注、细线分隔、分屏构图、非对称构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 34px 及以上展示标题都使用 PP Right Grotesk 字重 200;超细笔画是标志,绝不替换为字重 400 或 500。
  • 所有小型大写标签,如香型、徽章和元数据,使用 Söhne Mono 11-12px,字间距 0.05em,创造博物馆标签节奏。
  • 所有转角保持 0px 圆角;每个组件都应有利落矩形边缘,维持编辑印刷感。
  • 页面背景只用 #fafaf9 Bone,绝不用纯白或灰色。
  • 让产品摄影承载色彩;界面色板保持暖中性,让植物与琥珀色瓶成为唯一彩色元素。
  • 所有分隔使用 1px 的 #e5e2dc Stone 或 #000000 Ink 边框,不用阴影、填充或背景色调建立深度。
  • 展示标题行高设为 1.0,使用紧密负字间距 -0.015em,让细笔画锁成连贯编辑块。

建议避免

  • 按钮、链接或行动入口不要使用任何彩色品牌色;系统刻意无彩色,颜色只出现在 Blush 公告栏与 Citron 推广色层中。
  • 按钮、卡片、图片或标签不要添加圆角;利落转角不可妥协。
  • 不要使用 box-shadow 或投影产生浮起;深度只来自留白和细线边框。
  • PP Right Grotesk 不要用于低于 26px 的字号;超细字重在小字号不可辨读,低于阈值的文字改用 Söhne。
  • 背景不要用纯白 #ffffff;略暖的 Bone #fafaf9 才是画布,纯白会显得无菌,破坏亚麻纸比喻。
  • 正文或长描述不要居中,所有段落左对齐;居中只留给公告栏和首屏副标题。
  • 图标、悬停或激活状态不要用鲜亮或饱和色;Ink #000000 与 Graphite #595959 是仅有的两种交互色。