# 邮件

> 把 Raft 的字体排印、表面和操作用到系统触发的 HTML 邮件里。

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

系统触发的邮件在基于表格的 HTML 里沿用 Raft 的阅读表面和操作层级。邮件客户端无法运行 raft-ui 组件；用内联样式画出同样的视觉角色，并提供一套可用的系统字体作为后备。

## 适用范围
这个模式用于账户验证、找回密码、邀请、安全通知、App 审核通知、新手引导信和生命周期邮件。它不规定收件人、发送时间、用户同意或投递策略。

## 结构
| 邮件 | 结构 |
| --- | --- |
| 账户、邀请、安全或生命周期通知 | 占满栏宽的黄色区域上居中放一个小的品牌标识，标题和正文不加框，最多 1 个主操作，必需的页脚 |
| 以个人口吻写的新手引导信 | 问候语、段落、署名、必需的页脚；没有装饰性的卡片，也不另加操作按钮 |

用[颜色](https://raft-design.botiverse.build/zh/foundations/color.md)、[字体排印](https://raft-design.botiverse.build/zh/foundations/typography.md)、[形状](https://raft-design.botiverse.build/zh/foundations/shape.md)和 [Button](https://raft-design.botiverse.build/zh/components/button.md) 里定义的角色。品牌标识表明发件人是谁；它不是大幅的宣传头图。

## 规则
- 把语义 token 解析成内联的 sRGB 颜色和像素尺寸，以适配会去掉自定义属性或样式表的客户端。把这份对应关系写成文档，放在邮件渲染器旁边。
- 带下划线的正文链接用 `attention-400`，和主操作的填充色一致，浅色模式和支持的深色模式下都是（cindyz，2026-10-29）。应用内的链接仍然用 `foreground-link`。
- 主操作用 `attention-400` 配 `sticker-ink`，6px 圆角（`radius-chip`），加墨色边框。图片和网页字体被禁用时，操作也要能看清。
- 正文直接放在页面表面上，不加阅读卡片、边框、圆角或阴影。logo 居中放在黄色品牌区域上，没有正文卡片（cindyz，2026-10-29）。品牌区域 88px 高，114 × 28px 的 logo 居中，和正文之间隔 28px（cindyz，2026-11-03）。品牌区域和操作用 6px 圆角（`radius-chip`），不用应用内的 `control-radius`；按[层级](https://raft-design.botiverse.build/zh/foundations/elevation.md)的规定，操作不带硬阴影。
- 邮件里的操作：标签 15px、半粗，行高 22px，上下内边距 10px、左右 18px，1px 墨色边框：单行时高 44px。本地化的标签可以换行、把操作撑高，不要为此缩小点击区域。这些邮件专用的尺寸不改变应用内的按钮 token。
- 正文 16px，行高 24px；页脚至少 12px。读邮件的人经常在手机上看同一封邮件，所以不要为桌面端缩小阅读字号。
- 人说的话所用的字体栈里，Space Grotesk 排第一，后面是系统字体。不要让布局依赖远程字体加载成功才能正常显示。
- 保留邮件原有的操作指向的地址、发件人、回复地址、过期说明，以及必需的退订或法律页脚。视觉上的修改不改变投递策略。
- 在支持的地方提供深色样式，遵循[深色模式](https://raft-design.botiverse.build/zh/foundations/dark-mode.md)。保留浅色模式的内联后备样式；邮件客户端可能会去掉样式，或自行转换颜色。

## 宽屏和窄屏
- 阅读栏最宽 520px，比这更窄时宽度随屏幕变化。
- 在手机上，邮件两侧至少留 16px；长名称、标识符和 URL 可以换行，不撑宽视口。
- 检查浅色和深色下的浏览器渲染、窄屏、禁用图片，以及很长或本地化的内容。浏览器截图不能证明在 Gmail、Outlook 或 Apple Mail 里没问题；在真实邮箱里的检查要单独记录。

## 无障碍
- 给布局用的表格加 `role="presentation"`，用标题表示邮件的结构，并把品牌名作为图片的替代文字。
- 把操作渲染成有名称的链接，不用 JavaScript 也能用。正文链接加下划线，这样颜色不是唯一的提示。
- 浅粉色的正文链接（`attention-400`）在白底上达不到普通文字的对比度要求；正文的其余文字不是粉色的。把这个局限记录下来；它不算通过无障碍检查。必需的退订链接保持独立的中性颜色，并且必须通过对比度检查。
- 安全说明和过期信息用文字写，不要做成图片。

## 相关
- [写作](https://raft-design.botiverse.build/zh/content/writing.md)
- [品牌](https://raft-design.botiverse.build/zh/foundations/brand.md)