Payments 网站预览
Payments 网站预览

Payments

皇家紫罗兰上的清爽柑橘。深电光紫像夜空,柠檬黄强调则如新鲜柑橘皮屑,在干净白色表面上闪亮。

Lemon Squeezy 采用电光柑橘的视觉逻辑:深皇家紫罗兰主导首屏与 CTA 画布,锐利柠檬黄强调则作为公告条和品牌展示场景的功能标点。文字将紧密负字间距的定制几何展示字体 Circular Pro Book,与正文 Inter 配对,形成自信、块状的标题,现代而不冰冷。卡片采用异常宽大的 48px 圆角,让每个表面柔和亲切;主要操作按钮则为更紧的 8px,刻意对比俏皮表面与果断行动号召。满幅紫色功能色带与白色内容区块交替,形成明亮平静、又被大胆品牌色点缀的节奏。产品模型漂浮在倾斜平板上,并带轻微悬浮感,通过视觉上的接近强化一体化平台叙事。

查看原始网站

使用规范

建议采用

  • 任何满幅首屏或 CTA 区块都使用 #5423e7 Royal Violet,它是主导品牌画布。
  • 所有卡片圆角都设为 48px,以形成柔和亲切的表面感。
  • 所有 26px 及以上标题都使用 Circularpro Book,字重为 400,字间距为 -0.04em。
  • #ffc233 Lemon Zest 只用于公告条和品牌强调场景,绝不作为内容背景。
  • 标题上方的所有眉题或区块标签,都使用 14px 的 Inter、全大写和 2px 字间距。
  • 产品模型以 15-20 degree 的角度漂浮,并配 0 20px 60px rgba(18,18,23,0.15) 阴影。
  • 所有主要操作按钮都采用 #121217 填充、#ffffff 文字和 8px 圆角,绝不使用彩色 CTA。
  • 紫罗兰背景上的图标描边使用 Electric Iris #7047eb,绝不在紫罗兰上使用 Royal Violet。
  • 垂直节奏基准保持 80px 区块间距与 40px 卡片内边距。
  • 所有 Circularpro Book 都启用 "ss04" 字体特性,采用符合品牌的字符替代形式。

建议避免

  • CTA 按钮不要使用彩色。Lemon Squeezy 的全部主要操作都采用中性深色或白色填充。
  • 卡片圆角不要小于 48px,按钮不要大于 8px。两者之间的 40px 差距是标志。
  • 未经测试,不要将全不透明度正文直接放在 #5423e7 上;只使用 80-100% 不透明度的 #ffffff。
  • 正文字间距不要宽于 -0.01em。负字间距对于几何感不可缺少。
  • #cf75ff、#db0bb9、#d50b3、#eb3a00 等装饰彩色,不要用于界面元素,只留给插画与图表强调。
  • 卡片不要添加重 box-shadows。悬浮保持轻微,采用 rgba 0.06-0.08,或改用边框。
  • 正文段落不要居中。标题和正文都在容器内部左对齐。
  • 同一视图不要使用超过两个字体家族。标题采用 Circularpro Book,其他全部采用 Inter。
  • 不要使用渐变。系统采用平面颜色,纵深只来自表面叠层和轻微阴影。
  • 图像圆角不要小于 16px。系统偏好宽大圆角或锐利直角,而不是中间值。