Varo Bank 网站预览
Varo Bank 网站预览

Varo Bank

白色基底、满幅色块与网格布局。

页面以白色为基底，搭配近黑色文字。字体采用 Neue Haas Grotesk Display、National 2 Compressed。视觉特点包括满幅色块、网格布局、大字排版。适合参考的场景：支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示标题使用 76–147px 的 National 2 Compressed，行高 0.80–0.95；展示字号的行高绝不超过 1.0。
  • 所有填充式主要操作都使用唯一的紫罗兰色 #8c58d0；登录链接、开始使用按钮和了解更多都使用这一确切填充色。
  • 只组合两个字体家族：National 2 Compressed 用于展示文字，Neue Haas Grotesk Display 用于 72px 及以下的所有文字，绝不混入第三种字体。
  • 所有圆角设为 4px；按钮、输入框、卡片、图片与标签共用相同圆角，形成统一的贴纸质感。
  • 所有卡片、输入框与图形元素使用 1px solid #000000 边框；颜色放在填充中，而不是描边中。
  • 每个区块都在展示标题上方放一个引导标签，14–16px、字重 500，用来命名产品或概念。
  • 大字号收紧字间距：National 2 Compressed 使用 -0.0100em，52px 及以上的 Neue Haas Grotesk Display 使用 -0.0200em。

建议避免

  • 绝不将 #8c58d0 用于装饰填充或区块背景；它专用于交互元素。彩色区块条带改用奶油色、鲑鱼色、梅子色或青柠色。
  • 绝不引入投影、模糊效果或多层浮起效果。系统刻意保持平面；表面需要分隔时，添加 1px 黑色边框或改变颜色。
  • National 2 Compressed 的行高绝不超过 1.0；压缩字形需要紧密行高才能形成图形块，疏松行高会破坏这个效果。
  • 绝不将彩色按钮放在同色系的彩色区块背景上；紫罗兰色按钮只能放在白色、奶油色或深梅子色上。
  • 绝不使用衬线、等宽或手写字体；压缩展示字体与中性无衬线组成的双字体系统就是完整排版身份。
  • 圆角绝不超过 4px，也不使用胶囊形按钮；4px 是整个系统的硬性规则。
  • 绝不使用 #0000ee 或浏览器默认链接色；所有链接文字与下划线都用 #000000 或匹配所在区块的颜色。

相似设计语言