Acctual 网站预览
Acctual 网站预览

Acctual

白色基底、手写字体点缀与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 Open Runde、Caveat。视觉特点包括手写字体点缀、胶囊形控件、圆角卡片、几何图形。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有 20px 及以上标题使用 Open Runde 600 字重,并搭配 -0.03em 字间距——紧致的字间距是标题压缩感的标志性特征
  • 将主要操作按钮设为 #0d111b,文字为白色,圆角半径 100px——主要行动按钮绝不可使用彩色填充
  • #0098f2 Electric Blue仅用于行内图标(勾选标记)、费率提示和眉题标签,绝不用于按钮背景或大面积表面填充。
  • 所有内容卡片设置 16px 圆角,大功能面板设置 32px 圆角——圆角层级是视觉节奏的核心部分
  • 页面画布设为纯 #ffffff,仅在分节带之间使用 #fafafa 或 #f7fafc——保持页面尽可能明亮
  • 仅在证言归属处使用 Caveat 16px/600 字体——它是标志性元素,而非正文字体
  • 将开票预览卡片叠加并轻微旋转、错位重叠,以营造出层叠纸张效果,如首屏所示

建议避免

  • 不要使用 #0098f2、#6c56fc 或 #f200ca 作为按钮背景——品牌强调色仅作为装饰,而非交互元素
  • 不要使用纯 #000000 作为文字或按钮——文字使用 #1e1e1,按钮填充使用 #0d111b;近黑色调是刻意设计
  • 不要在功能卡片上添加阴影——层级感仅保留于开票预览图和证言卡片;平面表面是常态
  • 不要在任何交互元素上使用小于 10px 的圆角——胶囊(100px)、16px 和 32px 是唯一有效的圆角值
  • 不要在任何位置使用渐变背景——设计严格保持平面,仅使用实色填充
  • 不要将正文文字设得低于 #666666——可读性基准是 Smoke,而非更浅的灰色
  • 单屏上不要使用超过两种有色彩的强调色——系统依赖色彩作为稀疏的标点出现