Hims App

印在犊皮纸上的水疗宣传册。
Hims App 以平静、单色的健康界面运作,其中仅用一个紫色强调色完成所有情感表达,其余部分则为无色彩的画布。系统的设计以呼吸为基调:采用定制几何无衬线字体(sofia)的超大字号,圆润的表面(30–52px 半径),以及长跨度的柔和阴影,使卡片看起来漂浮而非静止。首屏区域呈现摄影级且亲密的场景——一只手握着手机,产品颜色自然渗入真实皮肤——但整体界面保持简洁:白色画布、黑色文字、细线边框。紫色 #5d48db 仅用于标题和偶尔出现的边框,从不用于填充按钮。组件呈现出印刷版专题版面的感觉:大段留白,无金属色装饰渐变,且仅使用单一字体承载所有信息分量。
查看原始网站使用规范
建议采用
- 仅在展示标题和偶尔的 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 字间距