基础
颜色
黑 / 白 / 灰,强调靠墨色;颜色只留给意义和可选的主色。色块显示当前外观下的颜色,下面写着亮 / 暗两套值。
纸与线
--bg
亮 #fcfcfc暗 #171612--paper
亮 #ffffff暗 #201f1a--wash
亮 #f4f4f5暗 #2a2822--wash-strong
亮 #ececee暗 #312f28--selected-bg
亮 #ededed暗 #38362e--line
亮 #e7e7ea暗 #34322b--line-strong
亮 #c9c9ce暗 #4c483f墨与文字
--ink
亮 #111111暗 #f3f0ea--muted
亮 #6b6b6b暗 #a7a194--muted-2
亮 #9a968d暗 #837d72--on-ink
亮 #ffffff暗 #171612语义色
--success
亮 #15803d暗 #4ade80--danger
亮 #b42318暗 #f87171--warning
亮 #b45309暗 #f0b35a--success-strong
亮 #15803d暗 #15803d--danger-strong
亮 #b42318暗 #d03a2f--warning-strong
亮 #b45309暗 #b45309对比度(测试门禁):正文与次要文字在 paper / bg / wash 上 ≥ 4.5;语义色 ≥ 4.5;*-strong 做底时白字 ≥ 4.5。
18 个主色
主色会被自动提亮或加深:标记(开关、tab 下划线、焦点)≥ 3:1;文字 ≥ 4.5:1;实心底(主按钮、实心徽标)单独压暗一点,让上面的白字 ≥ 4.5:1。亮暗两种纸上都成立。第一个是墨色,也是默认。
| 主色 | 亮 · 标记 | 亮 · 文字(对比度) | 暗 · 标记 | 暗 · 文字(对比度) | 实心按钮 亮 / 暗 |
|---|---|---|---|---|---|
| 暖橙 #d65f32 | #d65f32 | #ab4c28 · 5.53 | #d65f32 | #de7f5b · 5.73 | 4.53 4.53 |
| 珊瑚 #e07a5f | #d7755b | #a15844 · 5.26 | #e07a5f | #e2856c · 6.13 | 4.54 4.61 |
| 琥珀 #c98a1a | #c18419 | #916313 · 5.25 | #c98a1a | #cd932c · 6.13 | 4.56 4.58 |
| 驼色 #9c7a4a | #9c7a4a | #83663e · 5.34 | #9c7a4a | #b0956e · 5.79 | 4.58 4.58 |
| 橄榄 #7d8b3a | #7d8b3a | #646f2e · 5.45 | #7d8b3a | #97a261 · 6.02 | 4.67 4.67 |
| 苔绿 #5a8a3c | #5a8a3c | #4c7432 · 5.45 | #5a8a3c | #7ba163 · 5.60 | 4.53 4.53 |
| 玉绿 #3f9a6b | #3f9a6b | #307551 · 5.54 | #3f9a6b | #5eaa83 · 5.94 | 4.55 4.55 |
| 青绿 #2a8a7a | #2a8a7a | #237466 · 5.58 | #2a8a7a | #5da69a · 5.81 | 4.52 4.52 |
| 孔雀蓝 #2f8fa8 | #2f8fa8 | #267286 · 5.48 | #2f8fa8 | #59a5b9 · 5.90 | 4.66 4.66 |
| X 蓝 #1d9bf0 | #1d9bf0 | #1570ad · 5.31 | #1d9bf0 | #2fa3f1 · 6.00 | 4.68 4.68 |
| 湖蓝 #3b74b8 | #3b74b8 | #366ba9 · 5.48 | #3b74b8 | #729bcc · 5.72 | 4.80 4.80 |
| 靛蓝 #4f5fb8 | #4f5fb8 | #4f5fb8 · 5.74 | #5665bb | #8792cf · 5.54 | 5.74 5.28 |
| 紫藤 #7b61b0 | #7b61b0 | #765da9 · 5.37 | #7b61b0 | #a08dc6 · 5.60 | 5.03 5.03 |
| 葡萄紫 #a05aa6 | #a05aa6 | #935399 · 5.33 | #a05aa6 | #bb88bf · 5.81 | 4.66 4.66 |
| 樱粉 #cf5d8a | #cf5d8a | #a64a6e · 5.49 | #cf5d8a | #d97da1 · 5.81 | 4.52 4.52 |
| 胭脂 #c4495a | #c4495a | #b44353 · 5.43 | #c4495a | #d57c88 · 5.56 | 4.72 4.72 |
| 雾灰蓝 #5f7380 | #5f7380 | #576a76 · 5.63 | #5f7380 | #8c9aa4 · 5.72 | 4.94 4.94 |