<Colors /> 1/3
颜色 · 基础
鲜艳与碰撞是情绪燃料，黑描边是收束，纸色是阅读的安静。三个组成部分：撞色对、中性阶、分工。
撞色对 鲜艳的全部来源——共三对六色，相邻必撞
对 1 · coral × teal
#FF6B6B × #4ECDC4
主用对：课程相框与主图形。
对 2 · mustard × violet
#FFD93D × #A78BFA
辅助对：指派与脱靶等警示类。
对 3 · pink × blue
#FF8FAB × #5B8DEF
点缀对：代理区与散落形状。
相邻必撞：任何相邻的两个鲜艳色块必须来自不同撞色对；同对两色只允许出现在同一物件的两端（如撞色对样票本身）。鲜艳总面积一屏 ≤ 10%。
中性阶 纸的世界——字、边、投影、底
ink
#111111
描边 2px / 标题正文 / 硬投影 / 站点描边
paper
#FFF9F0
卡面 / 页面大底 / 票券面
stack-1
#FFFFFF
纸叠亮边（卡片第一层 3px）
stack-2
#EADFC4
纸叠暗层（卡片第二层 5px）
色彩分工 三层各就各位
| 层 | 用色 | 承载 |
| 背景层 | paper 纯色 | 整页与画布底，永不鲜艳 |
| 物件层 | paper 面＋ink 边＋纸叠边 | 课程卡、票券、脱靶注 |
| 强调层 | 撞色对六色（黑描边内） | 16:9 相框、语义形状、站点 |
色彩立场
1为什么鲜艳碰撞：教程漫长，撞色给持续的情绪燃料与章节识别度。
2为什么黑描边：无收束的鲜艳会散架；2px ink 让一切彩色变"印刷品"。
3为什么纸底：阅读区永远安静；鲜艳只出现在被框住的局部。
鲜艳预算
1一屏鲜艳面积 ≤ 10%（相框＋形状＋站点合计）。
2同一视口内每对至多两处主用，避免轮转失衡。
3禁色彩渐变：立体感只来自描边、硬投影、内阴影。
01 / 03
<Colors /> 2/3
颜色 · 章节色与轮换
六章六色是章节的身份，只进 16:9 相框与图标瓦；站点四色沿先后线轮换。身份不承载状态。
章节色 六章六色——相框底与图标瓦同源
⚛️
ch2 React
#FF8FAB · 对3
界面主线
🔗
ch5 全栈基础
#5B8DEF · 对3
连接与部署
站点轮换色 只上先后线（实线），四色沿线路轮换
描边 2px ink，r=6；同色不相邻；虚线（相关）与点线（同族）不带站点。
收束示例 鲜艳 × 黑描边 × 纸底的合作
🌐
⚛️
相邻相框取不同撞色对（ch1 coral × ch2 pink 跨对相邻）；黑描边与内阴影把鲜艳压回纸面。立体感来自描边＋内阴影，不来自渐变。
章节色规则
1只进相框：16:9 预期区底色与图标瓦；卡面永远纸色。
2身份非状态：章节色不表达 done / 进行中；状态用形状。
3相邻即撞色：并排卡片的相框色跨撞色对取色。
4新增章节：优先复用六色；超六章再扩第七色（新撞色对）。
状态即形状，不是颜色
1完成＝打孔：票券沿撕线打双孔；未开始无孔。
2进度＝积木点：卡头点列，实心=已学。
3无锁：状态是推荐不是门槛，卡片永远可入（死原则）。
02 / 03
<Colors /> 3/3
颜色 · 规则与反例
每条规则配一对正反示例：左边是禁止的，右边是正确的。审查时逐条对照即可。
✗
vs
✓
相邻必撞色：同色相邻失去碰撞（✗）；相邻鲜艳必须来自不同撞色对（✓）。
✗
vs
✓
黑描边收束：无描边的鲜艳漂浮刺眼（✗）；一切鲜艳以 2px ink 描边为界（✓）。
✗
大底鲜艳，字被淹没
vs
✓
纸底安放正文
大底纸色：背景与正文区永远 paper（✓）；鲜艳只出现在相框等局部（✗ 为反例）。
✗
渐变按钮（本稿不渲染，示意）
vs
✓
纯色＋硬投影
禁色彩渐变：任何色彩过渡都不用（✗）；立体感来自描边、硬投影与内阴影（✓）。
✗
✓ 完成（绿色状态）
vs
✓
● ● ● ○＋打孔票
状态即形状：不用颜色表达完成（✗ 绿 pill 是旧方案）；完成=打孔＋积木实心点（✓）。
用色规则速查
1鲜艳预算 ≤ 10%/屏。
2相邻必撞色（跨对取色）。
3黑描边收束 2px ink。
4大底纸色，白只作纸叠亮边。
审查方法
1截图转灰度：层级仍可辨＝描边结构成立。
2数鲜艳面积：框选相框＋形状＋站点，估算占比。
3找同色相邻：任何两块同色鲜艳贴在一起即违规。
03 / 03