色彩
调色板分两层。原色持有原始取值,是唯一出现 hex 的地方;语义令牌引用原色并说明一个颜色是干什么用的,组件只引用语义层。换肤因此是改十几行,而不是改每个组件。
整个颜色层都是皮肤:这里的取值是平台默认值,五份模板就带着它们出厂;生成器可以整套替换。不变的是结构——每个令牌扮演的角色,和每个角色必须达到的对比度。
中性色阶
十一档近中性灰,点击复制 hex。令牌导出的灰阶共十四档——600、700、1000 属于平台自己的编辑器外框(网格线、投影基色),生成器区域用不到它们。最浅的三档(0 / 25 / 100)承担卡片、面板、控件底色;最深的三档(800 / 900 / 950)承担二级文本、品牌色与一级文本。
一个中性工作台加一个深色重音
面板是 bg-subtlest,面板上的卡片是纯白,预览所立的地面是 bg-editor——比面板深三档。地面是房间的地板,面板是立在上面的家具,预览读作放在地板上的物件。控件另取第三种灰 bg-control,比地面浅一档——它是白色表面上的一处凹陷,不是地板本身。
三个表面只差一两档,却把「地面 / 面板 / 卡片」分得清楚。停靠区域之间没有阴影,只有色调和一条 1px 的 stroke-default。
brand-default 是近黑(neutral-900)。它承担主按钮、滑块已填充段、开启状态的开关、工具栏中被选中的工具,以及缩略图的选中描边。hover 提亮一档到 neutral-800,按下压到最深的 neutral-950——按下永远比静止态更深。
emphasize-default(atomm-600)是平台的红,中性外框唯一的例外:每屏最多一个强调操作,只给承担代价或后果的那一个。平台自己的生成器把 Generate 留在 brand-default 上,所以五份模板都不带强调按钮。
文本四档
前两档在系统里的每个表面上都过 4.5:1。text-tertiary 不过——白底 3.60:1,控件底色上 3.13:1。由此推出它的用法:三级文本只装看漏了也没关系的字——说明行、占位符、未选中的标签。绝不装取值,绝不装消息,绝不装决策所依赖的标签。禁用档则本就不该被读。
描边三档
输入框静止时没有边框:灰底本身就是可输入的暗示。边框只在聚焦时出现,且是 stroke-active。
三档中性填充
它们看起来很近,但不可互换:
6% 是面板上的 hover 档,8% 是面板上的按下或选中态,12% 是浮起列表里的行高亮。前两档放到浮层的白底上只有 1.10–1.14:1,等于看不见,所以浮起的行有自己的一档——看不见的菜单行等于不能用的菜单行。
状态
外框是中性的:需要重量的东西由 brand-default 承担,emphasize-default 则被限量到每屏一次。
参数已按最新模型约束重新计算。
文件已导出,尺寸 200 × 120 mm。
线宽 0.1 mm 在屏幕上就是一根头发丝,这是正确的。
宽度不能大于 300 mm。
状态色成对工作:浅色是底,实色是图标,文字始终是 text-primary(在每种浅底上都有 15–17:1)。彩色底上放彩色字是状态提示里最常见的无障碍错误——在这套取值下会直接失败,green-default 与 warning-default 落在自己浅底上只有 2.6–2.7:1。stroke-surround 是 4.76:1 的实心蓝,常常是键盘在哪的唯一线索,自己过 3:1 还有余量。
换肤
如果替换调色板:
- 保持浅色——地面比面板深,绝不做暗色模式。
- 把每档文本在它所处的每个表面上重算一遍,承载含义的那两档(
text-primary、text-secondary)保持 4.5:1 以上。 - 让
stroke-divider/stroke-default/stroke-strong三档彼此可辨、与底色可辨。 - 改值,不改名。
--color-brand-default这类变量名已经发布给所有生成器,重命名是破坏性变更。