<ColorSystem />
色彩系统 · 瑞士骨架 × 轻拟物
瑞士给骨架：网格、排印、留白、黑白灰信息层。拟物给物件：卡是纸、章是书脊、状态是票、课程关系是线路图。彩色与材质不上文字区。
Token 色板 · 四层分工
① 中性阶 纸与桌面——信息永远坐在这层
② 行动 · 靛蓝 「能去哪、做什么」——按钮 / 入口徽章 / 链接
accent-deep
#4f46e5
按下/hover
③ 旅程与完成 · 绿系 「走到哪了」——族内明度分层，路线灰绿 / 完成清绿
④ 章节书脊色 「这是谁」——身份不承载状态；tint 只上 16:9 预期区与图标瓦
ch2 React
#fce7f3
字 #be185d
四层分工
| 层 | 回答 |
|---|
| 中性阶 | 信息是什么 |
| 靛蓝 · 行动 | 能去哪、做什么 |
| 绿 · 旅程 | 走到哪了 |
| 章节色 | 这是谁（身份） |
四层各管一个问题，互不兼职：状态不借用章节色，行动不借用绿。
设计原则
1文字坐中性面：标题正文只在白/灰底；彩色仅作淡底与小徽章。
2饱和度预算：一屏彩色面积 ≤ 10%，大底只有 canvas / paper / desk。
3章节色是身份不是状态：tint 不承载 done / lock。
4材质只上物件：纸卡、书脊、票券、线路可拟物；信息区永远平。
5不用渐变；阴影只三级海拔（见 02 页）。
6绿系族内分层：路线 sage 灰绿、完成 clear 绿，靠饱和与明度区分。
01 / 02
<ColorSystem />
色彩应用 · 海拔、票券与书脊
拟物出现在物件上：卡片是纸（三级海拔），状态是票（打孔撕线），章节是书脊（竖排 tint）。拿起卡片时播放 GIF——e2 阴影即「被拿起」。
海拔三级 · 卡片是纸
e0 · 信息区
无阴影，发丝线定界。表格、正文、目录。
box-shadow: none
e1 · 纸卡静置
1px 落影，纸放在桌上的重量。
0 1px 2px · .06
e2 · 拿起
hover 播放 GIF：卡片浮起 3px，大而软的影。
0 8px 24px · .12
海拔只上白纸卡；信息区用发丝线定界，不用阴影造假层级。
票券 · 状态是票
完成票沿撕线打孔（拟物：检票）；未开始不打孔、撕线为实线。票号 = 章程序号。
书脊与组合 · 章节是书
快速开始
React
更多示例
更多
全栈基础
高级教程
线路 token 仅两枚：sage 线 + 站点绿；多线卡口用胶囊。
海拔表
| 级 | 阴影 | 场景 |
|---|
e0 | 无 · 发丝线 | 信息区 |
e1 | 0 1 2 · .06 | 纸卡静置 |
e2 | 0 8 24 · .12 | 拿起 / hover |
e3 | 0 16 48 · .16 | 弹层 |
e2 同时 translateY(-3px)；海拔只上白纸卡。
票券与书脊
1打孔即完成：✓ 票沿虚线撕线打双孔；未开始实线无孔。
2书脊恒宽：34px 竖排，章节 tint 全高铺，名称用配套字色。
3撕线即虚线：票券撕线与路线用同一 4:2 点划语言。
02 / 02