Wealthsimple 网站预览
Wealthsimple 网站预览

Wealthsimple

毛绒内衬的保险库搭配画廊灯光

Wealthsimple 以编辑部精品店的身份伪装成金融科技公司:一片温暖、近单色的纸奶油与石墨色调的画布,其中大号 Tiempos 无衬线标题与静谧的几何无衬线字体用于正文和界面。其标志是并置——时尚杂志风格的衬线标题与胶囊形深色按钮并列,首屏区域切换为暖铜色深色背景以呈现雕塑感 3D 形态,插图则如同画廊展品,而非产品截图。在 界面外围元素 环境中,色彩几乎被完全抑制;温暖感来自偏白色堆叠(#fcfcfc → #faf8f5 → #e4e2e1),而非强调色。组件保持低矮且轻盈:细线分隔线、100px 圆润边角的卡片、胶囊按钮,无阴影,无渐变。密度舒适,长阅读行距与充足的 48px 区块间距——设计信任排版与留白来完成说服工作。

查看原始网站

使用规范

建议采用

  • 所有标题与区块标题使用 Tiempos 字体,字号范围 56–84px,字间距 -0.01em——衬线字体是品牌的编辑风格签名
  • 所有按钮、标签及胶囊形控件必须使用 1600px 圆角——胶囊形态不可妥协
  • 使用暖中性色(#fcfcfc、#faf8f5、#e4e2e1、#32302f)并保留青铜色背景 #3a3525 用于满幅深色特征区块
  • 将 Tiempos 衬线标题与 The Future 无衬线正文搭配——绝不将正文设为 Tiempos,绝不将标题设为 The Future
  • 按钮和导航控件内的所有 Wealthsimple Sans 标签需应用 0.025em 字间距
  • 保持约 80px 的区块间距和 32px 的卡片内边距;让留白承担层级关系,而非边框或阴影
  • 仅使用雕塑感 3D 插图作为视觉内容——绝不使用库存摄影,绝不使用产品界面截图,绝不使用扁平图标作为首屏

建议避免

  • 不要使用纯 #000000 作为主要文本——使用 Graphite Ink #32302f 以保持深色的温暖感
  • 不要引入强调色、渐变或品牌色——系统本为单色设计;色彩仅出现在 3D 插图内部
  • 不要使用方形或中等圆角按钮——所有交互元素必须为 1600px 胶囊形
  • 不要在卡片、弹窗或按钮上应用 CSS 阴影——依赖暖色表面堆叠和细线分隔
  • 不要将标题设为 The Future 或正文设为 Tiempos——衬线与无衬线的搭配是系统的节奏核心
  • 不要使用明亮或冷色调的灰、蓝或冷白——色彩轴保持温暖,限定在奶油-石墨之间
  • 不要在页面上堆叠过多卡片、边框或网格线——编辑风格依赖于充裕且无分割的留白