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 字间距