Peppermint 网站预览
Peppermint 网站预览

Peppermint

深蓝色基底、手绘图形与胶囊形控件。

页面以深蓝色为基底,搭配白色文字。字体采用 Excon、Generalsans。视觉特点包括手绘图形、胶囊形控件、插画元素、紧密字距。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有标题显示使用 Excon,字号 48px 以上,字间距在 -2px 到 -5px 之间——紧密字间距是品牌的编辑风格标志
  • 使用午夜蓝(#0a1d4b)作为深色区域的主画布颜色——它既是背景,也是品牌基因
  • 所有交互按钮使用 48px 圆角,完整胶囊形状使用 100px 圆角——禁止使用尖角按钮
  • 在深海军块与温暖米色(#fcf6ea/#faedd2)区块之间交替,以创造节律,无需分隔线
  • 所有正文与UI文本使用 Generalsans 16–18px——任何低于 24px 的内容均不可使用 Excon
  • 通过色彩渐变(#0a1d4b → #162d67 → #9c8bf9)区分不同表面,而非阴影或边框
  • 主要视觉元素为平实的手绘插画,搭配流动缎带笔触,使用珊瑚粉、薄荷波纹和冰蓝——无摄影,无渐变

建议避免

  • 不使用投影阴影来营造立体感——设计系统依赖色彩对比与表面渐变实现视觉层次
  • 不使用 Excon 低于 24px——其紧密字间距和几何特征在正文尺寸下变得无法辨识
  • 不使用摄影或 3D 渲染——视觉语言完全限定于平实手绘插画
  • 不混合圆角与尖角——所有交互元素使用 48px 以上圆角,所有卡片使用 24px
  • 不将明亮紫(#9c8bf9)作为大面积填充——它仅作为罕见的点缀色,而非主色
  • 不使用渐变——设计刻意保持平面,由色彩对比完成视觉表达
  • 不使用可见的导航栏或菜单——品牌通过居中的标志单独表达