Cake Equity 网站预览
Cake Equity 网站预览

Cake Equity

近白色基底、胶囊形控件与紧密字距。

页面以近白色为基底,搭配近黑色文字。字体采用 Plus Jakarta Sans、Inter。视觉特点包括胶囊形控件、紧密字距、宽松留白、网格布局。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • Electric Violet(#4823ff)是唯一的填充按钮背景,每个主要操作都应坚持使用这一种深紫色。
  • 所有卡片和功能面板的圆角严格设为20px,这是系统的结构圆角,不应缩小。
  • 所有按钮使用100px圆角,形成完全的胶囊形,绝不采用矩形按钮结构。
  • 展示标题采用Plus Jakarta Sans 700、63-77px及-0.04em到-0.032em之间的字间距,绝不用Inter替代展示字体。
  • 黄绿色(#e7ff6e)强调只出现在促销横幅和深色卡片高亮中;让它像一张小票,而非整个主题。
  • 用1px浅色边框(#d9d2ff或#ede9ff)定义卡片,不使用投影;系统刻意保持平面化。
  • 展示标题下方的补充文案使用Inter 300,形成厚重展示文字与轻盈正文的排版对比。

建议避免

  • 不要引入第二种主要操作颜色;Electric Violet是唯一CTA填充,其他操作均应采用描边或无填充样式。
  • 正文内容、图标或大面积填充不要使用黄绿色(#e7ff6e);它仅用于横幅小票和深色卡片强调。
  • 展示标题不要使用Inter;Plus Jakarta Sans 700是唯一展示字体,在展示字号中混用字体会破坏系统语气。
  • 不要为卡片或面板应用投影;系统以边框定义形状,阴影会增加不必要的柔软感。
  • 不要使用矩形或8px圆角按钮;所有按钮必须是完全的胶囊形(100px)。
  • 不要将白色或近白卡片直接放在Bone Canvas上而不加边框;温暖近白色与纯白的亮度过于接近,需要浅色边框分隔。
  • 每个页面中不要有超过一个区块使用深色Midnight Surface(#1e1b22);深色表面是少量出现的标点,而非主导布局。