color.md
基础 · FOUNDATION

色彩 Color

黑、白、朱砂红。红只出现一次,永远标「你在这里 / 下一步」。白就是中性白,不偏暖。

品牌与底面

样本令牌用途
#A6402F
#F6F6F4应用画布 / 侧栏底
#FFFFFF主内容面 / 卡片
#161616主文字墨色
#1D1D1B深墨(黑胶囊 CTA)

品牌朱有三个可选值 #A6402F(默认)/ #8C3A31 / #B5543F,由外壳在运行时注入 --zzm-accent。任何颜色引用都写 var(--zzm-accent, #A6402F),脱离外壳也有正确兜底。文字选区用朱色 16% 透明:rgba(166,64,47,.16)

文字灰阶

样本令牌用途
#26261F
#3F3F3B
#4A4A46
#6E6E6A
#72726E
#8B8B85
#A2A29C
#B0B0AA
#C6C6C0

正文用 text-2,说明文字用 text-5,元数据与标签用 muted-2,分隔符用 faint。灰都带一点点黄绿偏(例如 #8B8B85 而不是 #8B8B8B),和纸面同一个色温。

暗底

只用在封面、播放器、付款页这类「放内容」的深色面上;界面本身没有暗色主题。

样本令牌用途
#131316
#0E0E10
#0B0B0C

细线三档

黑色微透明只允许三档,同一用途同一档。深于 .18 的深色遮罩和滚动条不算细线。

样本令牌用途
rgba(0, 0, 0, 0.07)
rgba(0, 0, 0, 0.09)
rgba(0, 0, 0, 0.14)

课时档位信号色

黑白系统里唯一被允许的功能色,只用在档位胶囊上(见徽章与档位)。每档三件套:实色、浅底、深字。

样本令牌用途
#16A34A免费 · 绿
rgba(22, 163, 74, 0.12)
#157F3C
#E0920A会员 · 黄金
rgba(224, 146, 10, 0.18)
#8A5606
#A6402F拓展 · 红(品牌朱同族)
rgba(166, 64, 47, 0.11)
#A6402F

组件里的字面量对照

v4 组件大量直接写色值而不是 CSS 变量。复刻时遇到下面这些字面量,它们对应的就是这些令牌:

字面量令牌常见位置
#161616--zzm-ink标题、当前项文字
#1D1D1B--zzm-ink-strong墨键底、圆徽、开关开启、选中复选框
#3F3F3B--zzm-text-2正文、纸键文字
#72726E--zzm-text-5卡片简介
#8B8B85--zzm-muted面包屑、说明、元数据
#A2A29C--zzm-muted-2mono 小标签、表头
#C6C6C0--zzm-faint面包屑分隔符
#131316--zzm-dark-card封面与缩略图暗底
rgba(0,0,0,.09)--zzm-hairline-2卡片描边
#EFEFEC骨架块、中性标签底(无对应令牌)

铁律

✓ 要同一屏只出现一处朱色,标当前位置或下一步
✗ 不要鲜艳纯红,或把朱色当装饰
✓ 要颜色写 var(--zzm-*),带字面量兜底
✗ 不要奶油色、米色暖底
✓ 要朱色只做冗余信号:旁边总有图标或文字
✗ 不要档位色(绿 / 黄)出现在档位胶囊以外的地方