WHOOP
白色基底、胶囊形控件与圆角卡片。
Peloton
近白色基底、胶囊形控件与摄影展示。
页面以近白色为基底，搭配近黑色文字。字体采用 Inter。视觉特点包括胶囊形控件、摄影展示、居中构图、产品图像展示。适合参考的场景：品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- #df1c2f 仅用于主要操作、品牌标志和常驻聊天控件。没有其他颜色承担转化分量。
- 展示标题使用 48px 的 Inter、字重 300 和 -0.384px 字间距。轻声般字重是标志性选择。
- 所有主要和次要按钮都使用 28px 圆角，以保持宽裕的胶囊柔和感。
- #181a1d 的满幅首屏色带与 #f7f7f7 的浅色内容区块交替，建立深色舞台与浅色目录的节奏。
- 产品卡片背景保持纯 #ffffff，置于 #f7f7f7 画布上，并配 #e4e6e7 细线边框。卡片不使用投影。
- 300deg 闪光渐变只用于骨架屏或加载状态，绝不用作装饰性表面处理。
- 表单输入框使用 1px 的 #888b93 边框与 6px 圆角；获得焦点时，边框变为 #df1c2f，并配轻微外环。
建议避免
- 不要引入 #df1c2f 之外的任何彩色。单一强调色纪律是系统的定义性特征。
- 卡片或按钮不要使用投影。纵深来自表面层次对比，而非悬浮效果。
- 标题不要使用字重 700 或 800。系统建立在字重 300 的展示文字，以及 400-500 的正文上。
- 深色首屏色带上不要放白色卡片或浅色内容区块。深色舞台只承载文字与 CTA。
- 不要采用完全方形的 0px 圆角，也不要采用完全圆润的 9999px 圆角。系统位于 6px、24px 和 28px 这几个尺度。
- 204px 胶囊圆角只用于聊天控件或真正胶囊形的状态指示器，不用于其他元素。
- 首屏背景不要添加彩色渐变。首屏保持平面 #181a1d，以聚焦文字和 CTA。
