Wise 网站预览
Wise 网站预览

Wise

深苔藓上的青柠电压。近黑森林地面闪烁青柠火花,巨大的块状展示文字宣告每个动作。

Wise 的语气自信而略显高声:深森林绿(#163300)承担大部分视觉面积,包括文字、导航、深色区块与图标;单一电光青柠色(#9fe870)则在行动号召、选中标签页和关键强调上充当功能标点。展示字体近乎强势:900 字重的 Wise Sans 采用紧密字间距,以 100px+ 的块状大字在首屏高声表达。其余系统保持克制,以近白画布和柔和灰色表面(#e8ebe6)承托内容。组件默认采用胶囊形,包括按钮、导航分段、旗帜缩略图与图片遮罩;柔和的 10px 圆角留给卡片与输入框。色彩很少渐变;区块转为深色时,青柠与森林绿的组合直接反转,形成无需装饰的节奏。

查看原始网站

使用规范

建议采用

  • 展示标题使用 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)是基线,可避免页面显得生硬。