跳到正文
小小东 UI

基础

颜色

黑 / 白 / 灰,强调靠墨色;颜色只留给意义和可选的主色。色块显示当前外观下的颜色,下面写着亮 / 暗两套值。

纸与线

--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.734.53 4.53
珊瑚 #e07a5f #d7755b#a15844 · 5.26 #e07a5f#e2856c · 6.134.54 4.61
琥珀 #c98a1a #c18419#916313 · 5.25 #c98a1a#cd932c · 6.134.56 4.58
驼色 #9c7a4a #9c7a4a#83663e · 5.34 #9c7a4a#b0956e · 5.794.58 4.58
橄榄 #7d8b3a #7d8b3a#646f2e · 5.45 #7d8b3a#97a261 · 6.024.67 4.67
苔绿 #5a8a3c #5a8a3c#4c7432 · 5.45 #5a8a3c#7ba163 · 5.604.53 4.53
玉绿 #3f9a6b #3f9a6b#307551 · 5.54 #3f9a6b#5eaa83 · 5.944.55 4.55
青绿 #2a8a7a #2a8a7a#237466 · 5.58 #2a8a7a#5da69a · 5.814.52 4.52
孔雀蓝 #2f8fa8 #2f8fa8#267286 · 5.48 #2f8fa8#59a5b9 · 5.904.66 4.66
X 蓝 #1d9bf0 #1d9bf0#1570ad · 5.31 #1d9bf0#2fa3f1 · 6.004.68 4.68
湖蓝 #3b74b8 #3b74b8#366ba9 · 5.48 #3b74b8#729bcc · 5.724.80 4.80
靛蓝 #4f5fb8 #4f5fb8#4f5fb8 · 5.74 #5665bb#8792cf · 5.545.74 5.28
紫藤 #7b61b0 #7b61b0#765da9 · 5.37 #7b61b0#a08dc6 · 5.605.03 5.03
葡萄紫 #a05aa6 #a05aa6#935399 · 5.33 #a05aa6#bb88bf · 5.814.66 4.66
樱粉 #cf5d8a #cf5d8a#a64a6e · 5.49 #cf5d8a#d97da1 · 5.814.52 4.52
胭脂 #c4495a #c4495a#b44353 · 5.43 #c4495a#d57c88 · 5.564.72 4.72
雾灰蓝 #5f7380 #5f7380#576a76 · 5.63 #5f7380#8c9aa4 · 5.724.94 4.94