Hims App 网站预览
Hims App 网站预览

Hims App

白色基底、大字排版与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 sofia。视觉特点包括大字排版、细线分隔、摄影展示、居中构图。适合参考的场景:健康产品介绍页、服务展示页。

查看原始网站

使用规范

建议采用

  • 仅在展示标题和偶尔的 1px 边框中使用 Hims 紫色 #5d48db —— 从不用于填充按钮、背景或正文文本
  • 标准卡片的边框半径设为 30px,重点/首屏卡片为 45px,导航胶囊控件(胶囊形)为 52px
  • 为标准卡片应用阴影 rgba(0,0,0,0.12) 0px 27px 104px —— 长跨度的阴影是实现漂浮效果的关键
  • 页面背景设为 #ffffff,卡片共享相同颜色;差异来自阴影和半径,而非填充
  • 所有正文和展示文本使用 sofia 400 字重;仅在强调时谨慎使用 500 字重
  • 将 84px+ 字号的标题居中,字间距设为 -0.017em 到 -0.047em;紧致的字间距是其标志性特征。
  • 主要区块之间保持 90px 的垂直间距,卡片内部填充间距为 32px

建议避免

  • 营销界面中不可引入第二个强调色——紫色 #5d48db 是唯一的色彩表达
  • 不可使用填充色按钮——操作风格为白色胶囊控件搭配 30px 半径的黑色边框
  • 不可使用紧致阴影(0 2px 4px)——本系统中所有阴影在垂直方向上均需扩展 27px 以上
  • 标题文字不要使用比2e2e2更深的黑色——略柔和的石墨色可以避免白色背景上的生硬感。
  • 不可在界面表面添加装饰性渐变——渐变仅用于手机 展示模型 内部的产品图像
  • 卡片半径不可低于 30px 或高于 52px——系统仅有三个明确的半径层级
  • 正文字号超过 20px 时,必须转为标题角色并应用 -0.017em 字间距