基础

品牌

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

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

原则

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

每一行在上一行的基础上增加。

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

表格越往下，越接近官网。后三行的东西都不出现在日常页面上，包括日常页面的空状态。新服务器的设置流程以对话框的形式叠在服务器页面上，除最后一步外都算日常页面（引导）。

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

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

文件在 design/assets/Logos。raft-ui 把标志导出为 RaftLogo，文字标导出为 RaftWordmark，两者组合导出为 RaftLogoLockup。

7 个快捷回应是 Raft 自己画的：thumbs_up、heart、party_popper、eyes、fire、joy 和 check_mark。文件在 design/assets/Reactions。

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