Wise Design 网站预览
Wise Design 网站预览

Wise Design

白色基底、大字排版与大幅摄影展示。

页面以白色为基底,搭配深绿色文字。字体采用 Inter、Wise Sans。视觉特点包括大字排版、大幅摄影展示、网格布局、宽松留白。适合参考的场景:产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 所有首屏展示文字使用 Wise Sans,字重 900、lineHeight 为 0.85,字号至少 288px;文字行必须紧密叠放,几乎相触。
  • 将整个首屏和导航区域填充为 #87ea5c —— 青绿是背景,而非强调色;它应主导,而非点缀
  • 在青绿和白色背景上,将 #083400(森林墨)作为主要文字颜色 —— 任何情况下均不可使用纯黑色 (#000000)
  • 为内容卡片和拼图瓷砖分配 86px 边距半径;仅将 9999px 保留给胶囊按钮和标签
  • 使用完整强调配色 (#ffea4b, #ffbd89, #ffd5f0, #2a0831, #370305) 作为满幅卡片背景 —— 每种颜色代表一个独立的‘房间’,而非细微的色调
  • 应用 Inter 字体特性设置:"calt", "ss01" —— ss01 变体会交替特定字形,构成字体身份的一部分
  • 在所有显示尺寸下,Inter 字体必须保持负字间距:72px 时为 -2.16px,缩放至 16px 时为 -0.08px

建议避免

  • 切勿将 #87ea5c 用作小细节强调 —— 必须在大尺度(完整背景、完整按钮)使用,或完全不使用
  • 切勿在正文文字中使用 700 字重 —— Inter 字重严格限定为 400(正文)和 600(标签/小标题)
  • 切勿使用阴影或层叠效果 —— 系统通过色彩对比与层级关系建立优先级,而非依赖阴影深度
  • 切勿使用矩形(0px 半径)卡片 —— 内容区块必须使用 86px 半径或 9999px 胶囊形;系统中不存在锐利的角
  • 切勿将传统金融科技蓝色作为主品牌色 —— #0097c7 仅用于语义性强调链接和焦点状态,绝不可作为主要 CTA 或品牌表达
  • 切勿在小于 187px 的尺寸下使用 Wise Sans —— 它是专用于显示的字体;所有 UI 和正文内容由 Inter 负责
  • 切勿在单个区块内混合多种色彩背景 —— 每个面板必须单色呈现,仅在完整区块切换时才更换颜色