WHOOP

白色基底、胶囊形控件与圆角卡片。
页面以白色为基底,搭配近黑色文字。字体采用 Proxima Nova。视觉特点包括胶囊形控件、圆角卡片、网格布局、大字排版。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有按钮使用 300px 边距半径——胶囊形状不可妥协,即使是小型工具按钮也必须如此
- 显示标题设置为 120px 字号,行高 0.71,字间距 -4.8px;这种紧密的字间距是品牌的视觉标志
- 全 满幅 黑色区块与全 满幅 白色区块交替出现,间距为 80-120px;禁止使用灰色过渡融合二者
- 仅在主要操作和公告栏使用 #4a53ff——其他任何元素不得承载色彩
- 卡片渲染为 24px 半径,无投影;高度感来自 #f3f5f9 填充,而非模糊效果
- 在导航、按钮和指标标签中所有 14-15px 字号的元素,统一使用 0.1em 字间距并转为大写
- 正文保持 19-20px 字号,字间距为 -0.57 至 -0.6px;任何更小的字号都会失去品牌自信的尺度感
建议避免
- 不要为卡片或按钮添加投影——WHOOP 仅使用平面色彩层次;唯一的 rgba(199,199,199,0.25) 投影仅用于浮动叠加层
- 不要引入第二个强调色——该系统为单色+紫色,任何其他色彩都会破坏实验室美学
- 在显示尺寸(50px 及以上)上不要设置行高超过 1.0——紧致的 0.71-0.80 比例才是让标题显得如刀刻般锐利的原因
- 不要居中正文段落——特征卡片和描述中的文本左对齐,最大宽度为 520px
- 不要使用方形或 8px 半径按钮——所有操作均为胶囊形,包括图标按钮和标签
- 不要在 UI 表面使用彩色渐变;检测到的三个渐变仅为装饰性背景水洗,不用于组件填充
- 不要将正文字号设得低于 16px——14px 仅用于大写标签与字间距,绝不能用于连续正文