Buddy
白色基底、产品图像展示与胶囊形控件。
Deel
明暗对比、产品图像展示与胶囊形控件。
页面兼有浅色与深色区域。字体采用 BagossCondensedFont、BagossExtendedFont。视觉特点包括产品图像展示、胶囊形控件、圆角卡片、衬线字形。适合参考的场景：专题展示页、项目介绍页。
查看原始网站使用规范
建议采用
- 在深色 (#201547) 区域内的所有主要首屏标题中，使用 BagossCondensedFont 44-60px 字号、500 字重，-0.005em 字间距。
- 所有胶囊形按钮、搜索输入框和货币标签均设置 200px 边框半径 —— 这是系统的核心形状令牌。
- 将 #fffbf4（奶油暖色）作为页面主体背景色，绝不使用纯白色（#ffffff），用于所有位于首屏下方的亮色主题内容区域。
- 在每个首屏标题中突出最能引发情感共鸣的单个单词，使用 #a98df6（薰衣草脉冲）强调 —— 仅限一个单词，绝不使用短语。
- 将深色（#141414 或 #201547）区域背景与 Inter 正文文本搭配，使用 #d9d0ca（亚麻色）—— 不使用纯白色——以实现更柔和的对比，便于长时间阅读。
- 在亮色区域的输入框和卡片边框中，使用 rgba(27,27,27,0.16) 作为标准边框颜色 —— 绝不使用纯实色灰色。
- 将 #ffcf25（电光黄）严格限定于产品截图和图形强调中 —— 绝不将其用作按钮或文本颜色。
建议避免
- 在小于 16px 的字号下不要使用 BagossCondensedFont —— 在小字号时应切换至 BagossStandardFont 或 Inter 以保证可读性。
- 不要在主要行动号召（CTA）按钮上使用 8px 或 16px 的边框半径 —— 这些半径仅适用于次要徽章和图标容器。
- 不要在亮色（奶油）主体区域使用 #5938b7（中等紫色）或任何饱和的紫色 —— 紫色仅限于首屏区域。
- 不要为产品展示卡片添加阴影效果 —— 系统在亮色区域仅使用 1px #dbdbdb 边框作为卡片边界；阴影仅出现在浮动叠加层中。
- 不要在同一标题中同时使用 BagossExtendedFont 和 BagossCondensedFont —— 每个区域根据可用宽度选择一种切口版本。
- 不要将纯白色（#ffffff）作为页面背景 —— 系统采用的暖奶油色（#fffbf4）使 Deel 的亮色主题区别于通用的纯白页面 SaaS 产品。
- 不要为 BagossCondensedFont 的展示标题添加字间距 —— -0.005em 字间距已设定；增加正向字间距会破坏压缩的轮廓形态。
