Era 网站预览
Era 网站预览

Era

近白色基底、胶囊形控件与文字主导。

页面以近白色为基底,搭配近黑色文字。字体采用 Saans VF。视觉特点包括胶囊形控件、文字主导、大字排版、紧密字距。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 任何30px或更大的标题都采用Saans VF 380字重;轻得如低语的字重是标志性特征。
  • 卡片圆角设为12px,按钮圆角设为9999px;这两种数值定义表面语言。
  • 页面画布保持#f3f3f1(Parchment),而非纯白;温暖米白使编辑式比喻成立。
  • 主要操作采用Ink(#191a17)作为填充按钮背景,搭配Paper(#ffffff)文字。
  • 30px+字号采用-0.02em letter-spacing,20px及以下采用-0.01em。
  • 所有数字内容都启用tnum和lnum字体特性;金融信息对齐依赖等宽数字。
  • 通过Sage、Slate、Dusk和Ink面板的表面颜色传达抬升,而非阴影。

建议避免

  • 标题不要使用600+字重;轻字重展示文字是品牌反常规的标志性特征。
  • 不要给卡片、按钮或弹窗添加投影;系统刻意保持平面。
  • 不要引入红、蓝、绿等饱和品牌色;调色板刻意保持近乎单色。
  • 合作伙伴标志不要使用其完整品牌色;全部必须去饱和为Smoke(#868784)。
  • 页面背景不要采用纯白(#ffffff),始终使用Parchment(#f3f3f1)。
  • 圆角只采用9999px按钮、12px卡片和6px徽章;这三个数值承载形状系统。
  • 大字不要省略letter-spacing;紧密的-0.02em字间距让56px标题像经过排版,而非默认文字。