Cowboy 网站预览
Cowboy 网站预览

Cowboy

白色基底、胶囊形控件与紧密字距。

页面以白色为基底,搭配近黑色文字。字体采用 SuisseIntl、Intercom Sans。视觉特点包括胶囊形控件、紧密字距、细线分隔、大幅摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 每个按钮、导航项和标签都使用 9999px 圆角。胶囊是系统唯一的形态标志。
  • 标题使用 72–100px 和 -0.025em 字间距;正文保持 14–16px,并采用正常字间距。
  • 通过 1px 的 #e5e7eb 边框传达结构,而不是阴影或填充面板。
  • 全部彩色对比由产品摄影提供,界面表面保持无彩色。
  • 按钮默认使用 #1d1d1d 背景与 #ffffff 文字。这就是主要操作,不存在彩色 CTA。
  • 所有卡片、图像、输入框和容器都使用 8px 圆角,绝不采用 4px 或 12px。
  • 每个区块都由唯一的展示尺度编辑标题锚定。文字本身就是区块,而不只是标签。

建议避免

  • 不要引入彩色主要操作。实心按钮始终为 #1d1d1d。
  • 卡片、导航或内容区块不要使用投影。阴影会破坏编辑式平面感。
  • 承担区块含义的标题不要小于 36px。Cowboy 的层级是极端的。
  • 卡片或图像不要使用 4px 或 6px 圆角。系统只采用 8px 和 9999px。
  • SuisseIntl 不要搭配正字间距。字间距始终为中性或负值。
  • 界面框架不要将颜色作为装饰。#569d5f 和 #2563eb 仅用于语义状态。
  • 首屏或产品区块背景不要填充 #f3f4f6。白色是自行车唯一的画布。