Safepal 网站预览
Safepal 网站预览

Safepal

蓝色基底、胶囊形控件与大字排版。

页面以蓝色为基底。字体采用 AlibabaPuHuiTi-2。视觉特点包括胶囊形控件、大字排版、居中构图、网格布局。适合参考的场景:技术项目官网、区块链产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮和标签都采用100px border-radius;胶囊形是系统最容易辨认的标志性特征。
  • 首屏标题设为80px、800字重,可采用Deep Indigo(#0d0b33)上的白色,或紫罗兰色上的薄荷色(#79efbd);展示字重绝不要削弱至700以下。
  • #4a21ef作为占主导的页面中部分区背景,让紫罗兰色在大型纵向横带中舒展,而非作为小点缀。
  • 薄荷色(#79efbd)只作为紫罗兰区域上的强调文字或描边操作配色;绝不要在白色表面上作为填充。
  • 主要分区之间保持80-113px,保留宇宙般的宽敞感;密集堆叠会破坏氛围节奏。
  • 钱包硬件和手机的等距插画应作为空间中的悬浮物体,而非落在地面的产品照片。
  • 所有表面都保持无阴影;深度只通过颜色对比和插画叠层传达。
  • 分区标题和首屏文字都居中;不对称布局会破坏海报般的清晰感。

建议避免

  • #4a21ef绝不要作为小型强调;它必须主导分区,否则就不要出现。
  • 不要给卡片或按钮添加投影;系统刻意保持平面。
  • 避免正文字号低于14px;12px起始尺度只用于图片说明。
  • 薄荷色(#79efbd)绝不要作为内容分区的大面积背景填充;它只保留给强调和胶囊按钮。
  • 同一屏幕不要混用多个渐变方向;每个渐变应锚定一个氛围时刻。
  • 避免描边矩形按钮;所有交互元素都必须采用100px胶囊圆角。
  • 不要将白色文字放在#f7f6ff上;这一组合的对比度不合格。
  • 标题绝不要使用400字重;系统要求任何标题层级都采用700+。