模式
邮件
把 Raft 的字体排印、表面和操作用到系统触发的 HTML 邮件里。
系统触发的邮件在基于表格的 HTML 里沿用 Raft 的阅读表面和操作层级。邮件客户端无法运行 raft-ui 组件；用内联样式画出同样的视觉角色，并提供一套可用的系统字体作为后备。
适用范围
这个模式用于账户验证、找回密码、邀请、安全通知、App 审核通知、新手引导信和生命周期邮件。它不规定收件人、发送时间、用户同意或投递策略。
结构
用颜色、字体排印、形状和 Button 里定义的角色。品牌标识表明发件人是谁；它不是大幅的宣传头图。
规则
- 把语义 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；按层级的规定，操作不带硬阴影。 - 邮件里的操作：标签 15px、半粗，行高 22px，上下内边距 10px、左右 18px，1px 墨色边框：单行时高 44px。本地化的标签可以换行、把操作撑高，不要为此缩小点击区域。这些邮件专用的尺寸不改变应用内的按钮 token。
- 正文 16px，行高 24px；页脚至少 12px。读邮件的人经常在手机上看同一封邮件，所以不要为桌面端缩小阅读字号。
- 人说的话所用的字体栈里，Space Grotesk 排第一，后面是系统字体。不要让布局依赖远程字体加载成功才能正常显示。
- 保留邮件原有的操作指向的地址、发件人、回复地址、过期说明，以及必需的退订或法律页脚。视觉上的修改不改变投递策略。
- 在支持的地方提供深色样式，遵循深色模式。保留浅色模式的内联后备样式；邮件客户端可能会去掉样式，或自行转换颜色。
宽屏和窄屏
- 阅读栏最宽 520px，比这更窄时宽度随屏幕变化。
- 在手机上，邮件两侧至少留 16px；长名称、标识符和 URL 可以换行，不撑宽视口。
- 检查浅色和深色下的浏览器渲染、窄屏、禁用图片，以及很长或本地化的内容。浏览器截图不能证明在 Gmail、Outlook 或 Apple Mail 里没问题；在真实邮箱里的检查要单独记录。
无障碍
- 给布局用的表格加
role="presentation"，用标题表示邮件的结构，并把品牌名作为图片的替代文字。 - 把操作渲染成有名称的链接，不用 JavaScript 也能用。正文链接加下划线，这样颜色不是唯一的提示。
- 浅粉色的正文链接（
attention-400）在白底上达不到普通文字的对比度要求；正文的其余文字不是粉色的。把这个局限记录下来；它不算通过无障碍检查。必需的退订链接保持独立的中性颜色，并且必须通过对比度检查。 - 安全说明和过期信息用文字写，不要做成图片。