基础 · 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-2 | mono 小标签、表头 |
#C6C6C0 | --zzm-faint | 面包屑分隔符 |
#131316 | --zzm-dark-card | 封面与缩略图暗底 |
rgba(0,0,0,.09) | --zzm-hairline-2 | 卡片描边 |
#EFEFEC | — | 骨架块、中性标签底(无对应令牌) |
铁律
✓ 要同一屏只出现一处朱色,标当前位置或下一步
✗ 不要鲜艳纯红,或把朱色当装饰
✓ 要颜色写
var(--zzm-*),带字面量兜底✗ 不要奶油色、米色暖底
✓ 要朱色只做冗余信号:旁边总有图标或文字
✗ 不要档位色(绿 / 黄)出现在档位胶囊以外的地方