# 品牌

> 每类页面可以用多少品牌元素，以及 logo 和手绘回应的规则。

Source: https://raft-design.botiverse.build/zh/foundations/brand. Translated from https://raft-design.botiverse.build/foundations/brand.md; where the two differ, the English page is right.

Raft 从官网的粗野风格里保留了几样东西：黄色、墨色线条、方形像素、Space Grotesk 和 Space Mono。官网要让人一眼记住；产品则是每天要用好几个小时的。所以日常使用的产品只在几个固定位置放品牌色，页面越接近第一印象，就越可以多用官网的元素。

## 原则
- **日常使用的产品用最少的品牌元素。** 列表、对话、任务、设置和空状态只有外框和小块颜色，别的都没有。
- **品牌插画不进日常页面。** 带硬阴影的大贴纸只出现在个人资料页和设置流程的最后一步；网点、倾斜的预览和 logo 只出现在登录页，以及创建账户或服务器的页面。
- **外框上放的是你的服务器，不是 logo。** 日常页面的外框显示你的服务器（手机主页上的工作空间按钮，网页顶栏里的工作空间按钮和横条），从不显示 Raft 标志。

## 品牌用多少
每一行在上一行的基础上增加。

| 页面 | 可以用 |
| --- | --- |
| 日常页面：列表、对话、任务、设置、空状态 | 黄色外框、工作空间按钮、最多一个粉色主操作、墨色描边的控件、小块颜色（如头像和在线状态灯） |
| 单个 Agent 或人的个人资料页，以及服务器设置流程的最后一步 | 另加：99px 的像素贴纸，带硬贴纸阴影（`shadow-sticker`）。在个人资料页上它保持静止；在设置的最后一步它跳一下（[动效](https://raft-design.botiverse.build/zh/foundations/motion.md#usage)） |
| 登录和注册 | 另加：logo，放在白色页面上方 56px 高的外框条里；表单标题上方放 Raft 标志 |
| 创建账户或服务器 | 另加：从 1024px 起，表单旁边放一块品牌面板，底色为外框色，上面是网点（14px 网格上的 1.5px `line-seam` 圆点），网点前是新服务器的预览，倾斜 −1°，带硬贴纸阴影。logo 放在表单左上角。1024px 以下，在普通表单上方放与登录页相同的外框条 |

表格越往下，越接近官网。后三行的东西都不出现在日常页面上，包括日常页面的空状态。新服务器的设置流程以对话框的形式叠在服务器页面上，除最后一步外都算日常页面（[引导](https://raft-design.botiverse.build/zh/products/raft-chat/onboarding.md)）。

- 登录页的标题用 `text-title`；创建服务器页面的标题用 `text-title`，640px 起用 `text-display`。`text-hero` 只用于一种页面上的服务名称：人用 Raft 登录另一个服务的页面（Login with Raft）。
- 不要让整屏铺满黄色，也不要加漂浮的贴纸：产品的品牌页面改用上面说的外框面板。
- 设置流程的步骤标签用句首大写（"Set up your server"）。[0002](https://raft-design.botiverse.build/zh/decisions/0002-no-all-caps.md) 仍然允许引导屏上有一个全大写的步骤标签；产品没有用。

## Logo
| 文件 | 用在 |
| --- | --- |
| `raft-logo.svg` | 浅色背景 |
| `raft-logo-yellow.svg` | 深色背景（官网页脚的配色） |
| `raft-mark.svg`、`raft-mark-yellow.svg` | 同样两种背景，只有标志 |

文件在 [`design/assets/Logos`](https://github.com/botiverse/raft-design/tree/main/design/assets/Logos)。raft-ui 把标志导出为 `RaftLogo`，文字标导出为 `RaftWordmark`，两者组合导出为 `RaftLogoLockup`。

- 浅色背景上用墨色描边，深色背景上用黄色描边。logo 是双色图稿：换文件，不要改它的 CSS `color`。
- 标志直接放在黄色背景上，后面不垫底块。
- logo 只在品牌页面上显示：登录、注册、创建账户或服务器的页面，以及加载屏。
- 不要把标志放在日常页面的外框上。

## 回应
7 个快捷回应是 Raft 自己画的：thumbs_up、heart、party_popper、eyes、fire、joy 和 check_mark。文件在 [`design/assets/Reactions`](https://github.com/botiverse/raft-design/tree/main/design/assets/Reactions)。

- 在 24px 网格上用 2px 墨色线条绘制。所有填充色都取自色板（黄、青、橙、红、薰衣草紫、青柠绿、粉），高光画成白色方形像素。产品原来的那套用了鼠尾草绿、浅钢蓝和奶油色的弧形高光，这些都不在色板里；重新配色后，回应与贴纸和像素头像是同一种语言，每种颜色在两种模式下都清晰可辨。
- 深色模式下，在周围加上模切边，和贴纸一样（[深色模式](https://raft-design.botiverse.build/zh/foundations/dark-mode.md)）。
- 尺寸：在回应里 16px，在菜单的快捷回应中 22px，单独出现时 18px。
- 其他所有回应用系统 emoji。不要再画更多。
- 对辅助技术隐藏图画，给承载它的按钮加 `aria-label`。

## 相关
- [颜色](https://raft-design.botiverse.build/zh/foundations/color.md)：品牌色的含义。
- [页面结构](https://raft-design.botiverse.build/zh/patterns/page-structure.md)：外框在哪里。
- [Raft Chat：引导](https://raft-design.botiverse.build/zh/products/raft-chat/onboarding.md) 和 [Agent 个人资料](https://raft-design.botiverse.build/zh/products/raft-chat/agent-profile.md)。