Wise 网站预览
Wise 网站预览

Wise

白色基底、胶囊形控件与渐变展示。

页面以白色为基底,搭配橄榄绿色文字。字体采用 Inter、Wise Sans。视觉特点包括胶囊形控件、渐变展示、紧密字距、居中构图。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 展示标题使用 Wise Sans 900 字重;105px 字号时字间距为 -3.15px。极重笔画是品牌标志,不能软化成 700。
  • Lime Voltage(#9fe870)仅用于主操作填充与选中状态;每个可见视口区块通常一个青柠色元素就已足够。
  • 所有按钮、标签与导航分段默认采用 9999px 圆角;胶囊形是基础,不是装饰。
  • 文字与深色表面使用 Forest Ink(#163300),不用纯黑;偏绿的近黑色更温暖,也更符合品牌。
  • 大字号采用紧密负字间距:100px+ 为 -0.030em,逐步降至 12px 的 -0.003em;标题应紧凑,不应松散。
  • 填充主行动号召搭配带下划线的文字链接作为次级操作;不能将两个填充按钮并排放置。
  • 将区块背景从白色反转为 Forest Ink 建立节奏;深绿色上的青柠文字是系统内置的强调方式。

建议避免

  • 展示标题不能使用 Charcoal(#454745);大字号要保留 Obsidian(#0e0f0c)或 Forest Ink,以取得最大对比。
  • 不能引入渐变、细线边框之外的投影或装饰模糊;系统刻意保持平面化。
  • 浅色背景上的文字不能使用 Lime Voltage,其对比度过低;它只适合填充或置于深绿色之上。
  • 按钮、标签和导航元素不能使用锐角,即 0–4px 圆角;胶囊形是默认形状语言。
  • 展示标题不能使用 Inter;60px+ 的文字只有 Wise Sans 900 这一种合适语气。
  • 不能将多个青柠色元素紧贴堆叠;应拉开间距,让强调色读起来像一个独立标点。
  • 正文不能使用 #000000;白底 18px Charcoal(#454745)是基线,可避免页面显得生硬。