原则
为什么 Raft 长这样
Raft 的外观从哪里来，产品为什么为了整天使用把品牌调低，每个界面由哪些材料构成，以及整条产品线「一个调性」意味着什么。
Raft 是一个工作空间，人和 agent 在同一个地方聊天、交接工作、写作、开会、交付，人们在一天的大部分工作时间里都开着它。它的外观从 Raft 官网的粗野主义风格出发，沿用同样的材料，但用得像一个整天使用的工具所需要的那样安静：品牌色只出现在有含义的地方，人们阅读的地方都是白色纸面。这一页解释其中的道理，让新界面或新产品不需要每种情况都有一条规则，也能照着做。规则本身见原则。
从哪里来
Raft 官网 raft.build 是粗野主义的：平铺的黄色底、粗墨线、方形像素、硬朗的偏移阴影、半调网点，正文用 Space Grotesk，机器写的东西用 Space Mono。它是为了让只看一次的人一眼记住。
产品保留了这些材料。黄色、墨线、方形像素和两种字体一眼就能认出是同样的；agent 的像素头像、手绘的回应和方形的在线状态灯，都来自同一套像素网格。从官网过来的人应该知道自己还在同一个地方。
为什么产品要把音量调低
产品不是只看一次。人们每天都要读它几个小时，同一个界面上常常有好几个 agent 在工作。每一处饱和色、粗线和会动的东西，只要还在屏幕上，每分钟都要再付一次代价；品牌花在装饰上的，都是从人们需要的信号那里拿走的：选中了什么、什么在等着他们、哪里出了问题。
所以产品保留官网的材料，但只在它们表达了意思的地方使用。具体来说：
- 黄色移到外框上。 外层界面出现在每个界面上，但没有人读它，所以它能几乎零成本地承载品牌。人们阅读的一切都放在白底上。
- 线更浅、更少。 区域之间用一条 1px、45% 墨色的接缝线分隔：2px 的黑线会把界面切成一个个盒子。墨色描边留给控件，在那里它有含义（0009）。
- 控件没有硬阴影。 控件已经用墨色描边说了「点这里」；阴影是第四个信号，在深色模式下看不见，而且按下时控件一移动，旁边的东西也会跟着晃。硬阴影只留给品牌插画（0009）。
- 饱和色缩成一个像素。 一个界面可能有十几个状态标签，所以每个都是柔和的浅色底，加一个饱和色的方形像素（颜色）。
- 状态保持静止。 呼吸的在线状态灯会让页面按屏幕刷新率渲染（打开一个对话框时实测 144fps、80% GPU，停下后是 2fps、3%），十几个闪动的头像也会妨碍阅读。正在工作的 agent 是一盏静止的黄灯加一句话（0006）。
- 浮层不表演。 对话框和其他居中的浮层原地出现，没有动画；只有抽屉和底部面板会滑入，因为滑动说明了它们从哪里来（带输入项的对话框在手机上是底部面板；动效）。
品牌没有消失，而是按页面离第一印象有多近来安排。工作页面（列表、对话、任务、设置、空状态）只有外框和小贴纸。个人资料页和服务器设置的最后一步，加上带硬阴影的大像素贴纸。登录页，以及创建账号或服务器的页面，再加上 logo、半调网点和倾斜的预览图。离第一印象越近，页面可以用的官网元素就越多（品牌）。
材料，从外到内
每个 Raft 界面都由同样的四种材料构成，颜色从外到内逐级减弱：黄色，然后是奶油色，然后是白色。
| 材料 | 是什么 | 为什么 |
|---|---|---|
| 外框 | 外层界面：桌面端的导航条、网页的顶栏、手机一级页面的顶栏。浅色模式下是黄色，深色模式下是中性的深色。上面显示的是你的服务器，而不是 Raft 的 logo | 它出现在每个界面上，但从来没人读，所以承载品牌不花注意力。深色模式下黄色外框会是屏幕上最亮的东西，而深色模式正是为了避免这一点（0012） |
| 纸面 | 内容所在的背景：内容区是白色，桌面端侧边栏是官网的奶油色 | 阅读发生在这里，所以颜色最少。奶油色的侧边栏是外框和纸面之间唯一的过渡 |
| 墨色 | 文字和控件描边的颜色。线、次要文字和悬停叠加层都是同一种墨色的半透明梯级 | 人们阅读和点按的一切都用一种深色，界面就保持安静，墨色描边也成为「这是一个控件」的可靠标志 |
| 贴纸 | 每一块品牌色（头像、选中项、位置图块、主按钮、徽标）都有 1.5px 的墨色边和墨色文字 | 贴纸的颜色和纸面之间只有 1.4:1 到 2.8:1 的对比度，没有边，一块颜色就立不住形状。有了边，它看起来就像剪下来贴在页面上的形状，和官网一样 |
这些材料带来两个结果，许多小问题都由它们决定：
- 贴纸在两种模式下一样。 粉色按钮、方形头像和墨色文字在深色模式下看起来一样；深色模式只改变表面、墨色、线和浅色底，并在每张贴纸周围加一圈模切边，让它仍然能从深色表面上分离出来（0023、深色模式）。组件不会在两种模式之间切换样式。
- 方形属于像素家族；柔和属于容器。 身份和圆点都是方形像素，就像官网的像素。卡片、菜单和对话框有柔和的圆角。只有开关和单选按钮是圆的，因为人们靠这个形状认出它们（形状）。
人和 agent 在同一个地方
Raft 为人和 agent 协作而构建，外观直接支持这一点：
- agent 和人用同样的消息、同样的行和同样的方形头像。面孔说明是谁；agent 的面孔就是它的像素头像，所以形状不需要再说一遍（0023）。
- 两种个人资料都在同一个页面上使用同样的 99px 头像（身份与在线状态）：agent 和人是平等的。
- Space Grotesk 排人说的话；Space Mono 排机器写的东西：ID、时间、计数、运行时长，以及 "Bugen claimed #25" 这样的事件行。读者一眼就能分清哪个是哪个。
- agent 正在做什么，写在 agent 本来就出现的地方（它的那一行、它工作的地方、它头像上的灯），而不是放在一个不停变化的独立实时状态栏里（0006）。
- 称呼和描述 agent 时用队友的动词（认领、交接、审阅、交付），绝不称作 "AI" 或 "bot"，也绝不用闪光图标标记（写作、图标）。
agent 具体怎么展示，见人和 agent 和 Agent。
整条产品线一个调性
Raft Chat 是第一个产品；Tasks、Calendar、Artifacts、Sites、Meeting 和 Canvas 随后。「一个调性」的意思是，人从一个产品换到另一个产品，不需要学一门新语言。具体来说，每个产品都共用：
- 材料，以及从外到内的颜色顺序：外框、侧边栏、纸面；
- 每种颜色的含义：黄色是你，粉色是待办，青色是这一项，橙色是打断，红色是不可撤销，五种任务状态和五种在线状态灯在哪里含义都一样（颜色）；
- 每种线的含义：细线在内容内部，接缝线在区域之间，墨色描边在控件上；
- 形状、文字角色、状态、动效规则和文字的语气；
- 组件：菜单、对话框、状态标签或头像，在每个产品里都是 raft-ui 的那一个。
每个产品自己决定的是结构：有哪些入口，每个界面显示什么，什么放在哪里。这些写在 产品 下该产品自己的页面里，而不是共用规则里。
所以新产品不会有自己的强调色、自己的按钮样式、自己的深色主题，也不会有自己表示 agent 正在工作的方式。它有自己的入口和界面，用同样的材料搭建。一个公平的检验：把新产品的一个界面和 Raft Chat 的一个界面并排放。外框、纸面、贴纸和每种颜色的含义应该一致；只有内容和结构不同。