Revenuecat 网站预览
Revenuecat 网站预览

Revenuecat

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

页面以近白色为基底,搭配近黑色文字。字体采用 Object Sans、Helvetica Neue。视觉特点包括胶囊形控件、紧密字距、扁平表面、分屏构图。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 仅使用 #576cdb 作为主要操作填充、激活链接以及每张卡片中的单个淡紫罗兰色图标强调——禁止在同一个表面中将其用于多个角色
  • 所有按钮设置为 9999px 圆角;所有功能与用户评价卡片设置为 16px 圆角——胶囊形与圆角矩形的对比是系统的核心形状语言
  • 显示标题使用 Object Sans 300 字重,负字间距(48px 时为 -0.03em,80px 时为 -0.07em)——轻盈的字重是标志性的风格,而非备选方案
  • 使用 #f9f9fb 作为页面画布,仅用 #ffffff 用于卡片或导航表面——两种值的表面提升是卡片实现分离而不依赖阴影的关键
  • 为任何浮动元素应用淡紫色调阴影(rgba(73,46,107,0.14) 或 rgba(71,92,133,0.25));禁止在提升的表面使用中性灰阴影
  • 保持各区块间垂直间距 80–96px,内部卡片内边距 32px 作为默认节奏
  • 仅将标志云渲染为单色 #575775 或 #1f1f47——彩色标志破坏了社交证明模式

建议避免

  • 禁止在卡片或区块中将 #576cdb 用作装饰性背景填充——该色仅用于交互时刻
  • 禁止为胶囊按钮添加边框;填充本身即定义了操作
  • 禁止将正文文本设置为 Object Sans——保留显示字体用于标题、导航和按钮标签;段落和表单文本使用 Helvetica Neue
  • 禁止应用中性灰阴影;系统中每处阴影均带有淡紫或靛蓝色调
  • 禁止使用 #000000——系统的黑色是无色的 #171a1c
  • 禁止引入额外的饱和色(绿色、橙色)作为功能状态——仅珊瑚红与薄荷绿为装饰性,绝不用于成功/错误状态
  • 禁止在卡片或容器上使用锐角(0–4px 圆角);本系统中最小有意义的圆角为 16px