Graf Lantz 网站预览
Graf Lantz 网站预览

Graf Lantz

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

页面以白色为基底,搭配深灰色文字。字体采用 NeueHaasUnicaW1G、Instrument Sans。视觉特点包括胶囊形控件、摄影展示、细线分隔、宽松留白。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅将 #574cd5 用作填充按钮背景,禁止用于卡片表面、边框或强调线条。
  • 所有按钮和标签的边框半径均设为 50px(胶囊形);输入框和图片保持 0px 半径。
  • 正文文字使用 NeueHaasUnicaW1G 16px / 行高 1.5,颜色 #474747,留白负责层级结构的表达。
  • 产品摄影应完全填满其框内,半径 0px,不添加叠加层、徽章或图注等外围元素。
  • 仅在公告栏使用 Mist Sage #d5e4e8 柔洗效果——禁止引入第二个装饰性表面。
  • 导航和信息标题使用 Instrument Sans;品牌标识和每屏一个展示时刻使用 accessibly。
  • 区块间距设定在 50–80px 范围内,卡片内边距为 24–28px;避免过度收紧。

建议避免

  • 禁止引入额外的强调色——系统中仅存在一个紫色,背景为单色系。
  • 禁止为卡片、按钮或图片添加阴影;设计刻意无阴影。
  • 禁止在新页面中使用 Source Sans Pro;该字体为遗留方案,会破坏 NeueHaas/Instrument/accessibly 三体统一性。
  • 禁止使用 1px 至 49px 之间的半径值;系统为二元结构——胶囊形或方形。
  • 禁止将紫色叠加在有色背景上;紫色仅应出现在 #ffffff 或产品摄影背景上。
  • 禁止在导航链接静止时添加下划线;下划线仅在悬停时出现,位于基线,而非整个框体。
  • 禁止在正文文字中使用 #000000,当 #212121 或 #474747 已满足对比度时;仅将 Onyx 用于图标和最高强度的强调时刻。