Origin Financial 网站预览
Origin Financial 网站预览

Origin Financial

近黑色基底、衬线字形与等宽文字标注。

页面以近黑色为基底,搭配白色文字。字体采用 Suisseintltrial、Lyon Display。视觉特点包括衬线字形、等宽文字标注、居中构图、网格布局。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示标题均使用 Lyon Display(或 DM Serif Display 替代字体)300 字重——绝不使用粗体显示
  • 所有按钮、输入框和导航项使用 8px 圆角;卡片使用 16-30px;仅对真正的胶囊形控件使用 9999px
  • 将彩色色彩(如 Iris Gleam、Cyan Signal、Orchid Bloom 等)仅限于满幅色块特征分类标签中——绝不作为内联装饰或边框使用
  • 使用白底黑字(#ffffff 填充,#000000 文字)作为唯一的主行动;对比度比值为 21:1
  • 所有标签、徽章和数据注释均使用 Roboto Mono 大写,字号 10-12px,字间距 0.016-0.182em
  • 在 Lyon Display 96px 标题中保持 0.9 的行高——紧凑的行距是其标志性特征
  • 通过颜色阶梯(#0f1011 → #2e2e2 → #cacaca)区分表面,而非阴影

建议避免

  • 不要对 Lyon Display 使用粗体——300 字重是系统的基调张力
  • 不要在卡片上添加阴影;该系统刻意保持扁平化
  • 不要在小于 18px 的文字上使用彩色强调色——它们在深色背景下会产生震颤感
  • 不要将正文使用全白 #ffffff——描述文字使用 #9f9fa0(灰白),标题使用 #f5f5f7(云)替代
  • 不要打破三声调字体系统:情感表达用衬线字体,界面用无衬线字体,数据用等宽字体
  • 不要在 UI 表面添加装饰性渐变——唯一的合法渐变是深黑铬色渐变(rgb(43,43,44) → rgb(19,19,19))
  • 不要将 #00b3dd(Cyan Signal)用于正文颜色或大面积填充——它仅限于数据信号和折线图中使用