Wealthsimple

白色基底、胶囊形控件与圆角卡片。
页面以白色为基底。字体采用 Tiempos、The Future。视觉特点包括胶囊形控件、圆角卡片、大字排版、细线分隔。适合参考的场景:支付服务首页、金融科技产品介绍页。
查看原始网站使用规范
建议采用
- 所有标题与区块标题使用 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——衬线与无衬线的搭配是系统的节奏核心
- 不要使用明亮或冷色调的灰、蓝或冷白——色彩轴保持温暖,限定在奶油-石墨之间
- 不要在页面上堆叠过多卡片、边框或网格线——编辑风格依赖于充裕且无分割的留白