Buddy
白色基底、产品图像展示与胶囊形控件。
bunny.net
浅蓝色基底、渐变展示与大字排版。
页面以浅蓝色为基底，搭配蓝色文字。字体采用 Rubik。视觉特点包括渐变展示、大字排版、分屏构图、圆角卡片。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 使用 Cloud Canvas #e1f2ff 作为长篇页面的默认背景，特征卡片使用 White Surface #ffffff。
- 将主浅色表面标题和正文内容设为 Edge Navy #183d6d。
- 使用 Rubik 700 字号 54px/64.8px 用于深色首屏大标题，45px/54px 用于浅色区块标题。
- 产品能力卡片保持 10px 圆角，内边距为 18px 20px 18px 32px，阴影为 0px 6px 40px rgba(0, 0, 0, 0.04)。
- 大型插画宣传面板使用 Launch Bay #051e38 或 Network Deep #022e57，搭配白色文字。
- 将 Coral Launch 渐变（#ff7a53 到 #ffa84a）保留用于公开试用和开始使用转化控件。
- 保持标准内容间距为 15px，组内页面模块之间使用 32px 的区块间距。
建议避免
- 不要将整个页面的画布从 #e1f2ff 替换为纯白色。
- 不要将 Coral Launch 或 Signal Orange #fd8d32 作为通用状态色系统使用。
- 不要将浅色表面标题使用黑色显示；应使用 Edge Navy #183d6d。
- 不要将特征卡片设计为正方形或胶囊形；保持 10px 的卡片圆角。
- 不要对标准白色卡片应用超过 0px 6px 40px rgba(0, 0, 0, 0.04) 的阴影。
- 不要使用实心蓝色转化按钮替代 Coral Launch 渐变处理。
- 不要将公开导航链接设置在大于 16px/19px 或字重超过 Rubik 400 的情况下。
