Perk 网站预览
Perk 网站预览

Perk

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

页面以暖白色为基底,搭配近黑色文字。字体采用 OTSono。视觉特点包括胶囊形控件、紧密字距、宽松留白、产品图像展示。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 使用 #beff50 作为唯一填充按钮颜色——禁止引入任何其他色彩动作色
  • 所有卡片和主要按钮的圆角半径设为 28px,胶囊控件和标签设为 9999px
  • 所有标题、标签和行动号召(CTA)使用 OTSono 500 字重;正文和辅助文本使用 400 字重
  • 在 28px 及以上字号的文本上应用 -0.03em 字间距;正文文本使用默认字间距
  • 构建表面层级为 白色 → 羊皮纸(#f5f5eb) → 青柠色(#beff50)——禁止使用阴影分层
  • 10–12px的分类眉题采用大写文字和0.1em字间距。
  • 所有文本由偏暗的 #14140f 载入——禁止使用纯黑色 #000000,除非在输入框中
  • 保持区块间距在 80–120px 之间,以维持编辑式呼吸节奏

建议避免

  • 禁止为卡片添加盒阴影——系统依赖色调对比而非层级抬升
  • 禁止在正文文本中使用 #000000——#14140f 更温暖且更符合品牌调性
  • 禁止引入蓝色、红色或任何次级强调色——青柠色是唯一的色彩语调
  • 禁止在同类型组件内混合圆角值(所有按钮统一为 28px,所有胶囊控件统一为 9999px)
  • 禁止在大字号显示场景中使用系统字体作为后备——60px 以上使用 OTSono 且带 -0.03em 字间距为标志性设定
  • 禁止在无足够内边距的白色背景上放置青柠色按钮——该对比强烈,需留出空间
  • 禁止使用 600 或 700 字重——系统仅运行于 400 和 500 字重
  • 禁止使用渐变——青柠色已足够饱和,渐变会破坏其纯净性