色彩

调色板分两层。原色持有原始取值,是唯一出现 hex 的地方;语义令牌引用原色并说明一个颜色是干什么用的,组件只引用语义层。换肤因此是改十几行,而不是改每个组件。

整个颜色层都是皮肤:这里的取值是平台默认值,五份模板就带着它们出厂;生成器可以整套替换。不变的是结构——每个令牌扮演的角色,和每个角色必须达到的对比度。

中性色阶

十一档近中性灰,点击复制 hex。令牌导出的灰阶共十四档——600、700、1000 属于平台自己的编辑器外框(网格线、投影基色),生成器区域用不到它们。最浅的三档(0 / 25 / 100)承担卡片、面板、控件底色;最深的三档(800 / 900 / 950)承担二级文本、品牌色与一级文本。

一个中性工作台加一个深色重音

面板是 bg-subtlest,面板上的卡片是纯白,预览所立的地面是 bg-editor——比面板深三档。地面是房间的地板,面板是立在上面的家具,预览读作放在地板上的物件。控件另取第三种灰 bg-control,比地面浅一档——它是白色表面上的一处凹陷,不是地板本身。

bg-editor
bg-default
bg-subtlest

三个表面只差一两档,却把「地面 / 面板 / 卡片」分得清楚。停靠区域之间没有阴影,只有色调和一条 1px 的 stroke-default

brand-default 是近黑(neutral-900)。它承担主按钮、滑块已填充段、开启状态的开关、工具栏中被选中的工具,以及缩略图的选中描边。hover 提亮一档到 neutral-800,按下压到最深的 neutral-950——按下永远比静止态更深。

emphasize-defaultatomm-600)是平台的红,中性外框唯一的例外:每屏最多一个强调操作,只给承担代价或后果的那一个。平台自己的生成器把 Generate 留在 brand-default 上,所以五份模板都不带强调按钮。

文本四档

text-primary字段标签、卡片标题、取值、标题17.90:1
text-secondary输入框与下拉内的文字、白底按钮文字、缩略图标签10.68:1
text-tertiary说明文字、「查看全部」、未选中的工具栏项3.60:1
text-disabled禁用文字、字数计数1.92:1

前两档在系统里的每个表面上都过 4.5:1。text-tertiary 不过——白底 3.60:1,控件底色上 3.13:1。由此推出它的用法:三级文本只装看漏了也没关系的字——说明行、占位符、未选中的标签。绝不装取值,绝不装消息,绝不装决策所依赖的标签。禁用档则本就不该被读。

描边三档

stroke-divider · 8% 墨色
属性卡片的边框、卡片标题下的线、悬浮面板的边缘。发丝线:只分隔,不勾边。
stroke-default · neutral-300
停靠侧栏的边、次级按钮、hover 时的缩略图、胶囊形的加工 Tips 按钮。
stroke-strong · neutral-400
所有带 stroke-default 边框之物的 hover 档。

输入框静止时没有边框:灰底本身就是可输入的暗示。边框只在聚焦时出现,且是 stroke-active

三档中性填充

它们看起来很近,但不可互换:

bg-hover · 6%
bg-active · 8%
bg-highlight · 12%

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-defaultwarning-default 落在自己浅底上只有 2.6–2.7:1。stroke-surround 是 4.76:1 的实心蓝,常常是键盘在哪的唯一线索,自己过 3:1 还有余量。

换肤

如果替换调色板:

  • 保持浅色——地面比面板深,绝不做暗色模式。
  • 把每档文本在它所处的每个表面上重算一遍,承载含义的那两档(text-primarytext-secondary)保持 4.5:1 以上。
  • stroke-divider / stroke-default / stroke-strong 三档彼此可辨、与底色可辨。
  • 改值,不改名。--color-brand-default 这类变量名已经发布给所有生成器,重命名是破坏性变更。
Esc
输入关键词搜索全部文档 · 切换 · 打开