基础
形状
五种圆角、两种描边宽度，以及为什么圆角容器的边缘上不贴任何东西。
方形就是 Raft。每个身份都是一张方形贴纸，每个圆点都是一个方形像素；像素是硬的，容器是软的。只有开关和单选框是圆的，它们遵循平台惯例。
原则
- 身份和圆点是方的。 头像、工作空间图块、频道图块、在线状态灯、提醒圆点和像素加载指示器都用方形像素。圆点或环形加载指示器会成为一堆方形像素中唯一的圆形标记；方形像素是品牌自己的形状（原则）。
- 只有开关和单选框是圆的。 其他任何东西都不用全圆角。
- 两种描边宽度。 线条用 1px，所有控件、输入框和贴纸用 1.5px。
圆角
| Token | 用于 |
|---|---|
radius-sticker | 像素家族：头像、工作空间图块、频道图块、复选框、徽标、步骤、骨架屏；正文中的行内标记（行内代码、提及你的地方、搜索命中、引用标签） |
radius-chip | 标签（值标签、输入框里的标签、任务标记、回应）、工具提示、弹出层中高亮的项，以及所有嵌在其他组件外框里的控件（外框之内） |
radius-control | 独立存在的控件和选中贴纸：按钮、输入框、下拉选择、筛选、分段控件、选项卡、侧边栏行、导航条项、标签栏的图标贴纸、工作空间按钮 |
radius-container | 容器：卡片、内嵌分组、消息输入框、横幅、菜单、轻提示、个人资料卡、文件卡片 |
radius-dialog | 对话框，以及底部面板的上两个角 |
rounded-full | 仅限开关和单选框 |
- 在线状态灯，以及 9px 到 11px 头像里的图片，用 2px 圆角：它们太小，用不了
radius-sticker。
外框之内
圆角属于元素本身；它周围的留白随所在的外框调整。外框无论装着什么都保持自己的圆角：输入框和消息输入框、卡片、弹出层、工具栏和对话框都不会为了贴合里面的东西而变圆，因为硬朗的边是 Raft 的。
| 元素 | 圆角 | 到外框外边缘的距离 | 两个元素之间 |
|---|---|---|---|
| 独立存在的 Button | radius-control | — | — |
| 嵌在其他组件外框里的控件：输入框的清除、切换和末尾按钮，消息输入框的按钮和发送按钮，浮动工具栏的按钮（消息悬停工具栏、文字选择工具栏、图片查看器的信息栏、多选栏），卡片或媒体的角落操作（代码块的复制、视频、图库图片、文件卡片的下载） | radius-chip | 在输入框、消息输入框和角落里为 6px；在浮动工具栏里为 4px | 与到外框的距离相同 |
| 输入框里的标签 | radius-chip，它的移除按钮用 radius-sticker | 6px；移除按钮在标签内 2px | 6px |
| 弹出层中高亮的项 | radius-chip | 4px | 0 |
| 分段控件或切换组的滑块 | radius-control | 3px | 3px |
- 同一类东西用同一种形状。 同一个小按钮，在输入框、消息输入框、卡片角落和工具栏里都用同样的角，也和它旁边的标签用同样的角。如果用
radius-control，输入框里一个 20px 的按钮看起来几乎是圆的；用radius-chip，它看起来是硬的。 - 四周留白一致。 嵌在外框里的控件，到外框上、下、侧边的距离都相同，两个控件之间也隔这么远，所以没有哪道缝比其他的宽。在输入框里，嵌入的控件和标签的高度是输入框高度减去上下两侧的留白：桌面端 20px，手机 32px；放了标签之后，输入框仍保持 32px 或 44px 高。
- 浮动工具栏在按钮周围留 4px，这样按钮的角能均匀地落在工具栏的角里：留 2px 时，角上的缝比侧边宽。消息悬停工具栏高 36px。
- 离外框近时，内角跟随外框的角。 弹出层中高亮项在弹出层内 4px，分段控件的滑块在轨道内 3px，都紧贴外框的弧线，所以外框的角要选得让周围的缝保持均匀。再往里，比如输入框内 6px 的标签，元素看起来就是一个独立的对象，直接用自己的圆角。
- 不遮挡内容。 压在内容上的角落操作，比如代码块没有头部时的复制按钮，要预留出自己那一列：每一行内容都在按钮前停住。
- 标签的移除按钮用
radius-sticker，这是唯一的例外：它是一个更小的目标，位于标签内 2px，离得太近，要跟随标签的角，就像弹出层的高亮跟随弹出层一样。如果用radius-chip，它的角会撞上标签的角。 - 焦点环如果会被宿主裁掉，比如标签的移除按钮上的焦点环，就画在元素内部。
描边宽度
| 宽度 | 用于 |
|---|---|
| 1px | line-hairline 和 line-seam：内容内部和区域之间的线 |
| 1.5px | line-strong：按钮和其他控件的墨色边框、贴纸的边、带墨色边的标签和选中的行；line-field，输入框周围同样的墨色：Input、Textarea、InputGroup、Select、Combobox、ComboboxSelect、搜索框、消息输入框和选项卡片 |
-
输入框的外框按 1.5px 画，和按钮一样。输入框旁边是它的发送按钮、提交按钮和选中的行，都是 1.5px 墨色；用 1px 时，它是其中唯一的细控件，看起来像一种更轻的样式，而不是同一个 Raft。墨色只用一种粗细，才能保持系统硬朗的边。焦点、错误和选中状态叠加在它上面标记输入框。
-
99px 头像上的在线状态灯用 2px 的边，随头像一起放大。
-
引用前面那条 2px 的竖条是一个标记，不是线。
-
3px 到 4px 的进度条本身就是一条线：它没有边框。
圆角容器的边缘上不贴任何东西
不要在圆角容器（卡片、文件卡片、输入框、消息输入框或缩略图）的一条边上贴进度条、色带或加粗的强调边框：它和圆角相交的地方会被切成奇怪的形状。
- 把进度放在容器里面，用单独的 4px 轨道：2px 圆角，轨道用
fill-muted（在图片上用layer-card），进度用青色。进度是青色，不是粉色：它是被动的指示，而粉色表示待办。- 在文件卡片里，把它放在文件名下面，与文字对齐。
- 在缩略图里，四边各内缩 6px。
- 要强调整个容器，就改变它的填充或边框。不要在一条边上加色带。