<ColorSystem />
色彩系统 · 瑞士骨架 × 轻拟物
瑞士给骨架：网格、排印、留白、黑白灰信息层。拟物给物件：卡是纸、章是书脊、状态是票、课程关系是线路图。彩色与材质不上文字区。
Token 色板 · 四层分工
① 中性阶 纸与桌面——信息永远坐在这层
② 行动 · 靛蓝 「能去哪、做什么」——按钮 / 入口徽章 / 链接
accent-deep
#4f46e5
按下/hover
③ 旅程与完成 · 绿系 「走到哪了」——族内明度分层，路线灰绿 / 完成清绿
④ 章节书脊色 「这是谁」——身份不承载状态；tint 只上 16:9 预期区与图标瓦
ch2 React
#fce7f3
字 #be185d
⑤ 玻璃面 · 半透明白 表面而非颜色层——浮在任意色域之上，四层分工不变（样票铺在 sage 上演示）
glass-light
white ·40
HUD 图例
四层分工
| 层 | 回答 |
|---|
| 中性阶 | 信息是什么 |
| 靛蓝 · 行动 | 能去哪、做什么 |
| 绿 · 旅程 | 走到哪了 |
| 章节色 | 这是谁（身份） |
四层各管一个问题，互不兼职：状态不借用章节色，行动不借用绿。
设计原则
1文字坐中性面：标题正文只在白/灰底；彩色仅作淡底与小徽章。
2饱和度预算：一屏彩色面积 ≤ 10%，大底只有 canvas / paper / desk。
3章节色是身份不是状态：tint 不承载 done / lock。
4材质只上物件：纸卡、书脊、票券、线路可拟物；信息区永远平。
5不用渐变；阴影只三级海拔（见 02 页）。
6绿系族内分层：路线 sage 灰绿、完成 clear 绿，靠饱和与明度区分。
01 / 03
<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 / 03
<GlassStyle />
玻璃风格预览 · 表面而非颜色层
玻璃是纸之外的另一种表面：半透白 + 1px 亮边 + 内高光。它必须跨越色域边界才可见——平放在白桌上等于不存在。四层颜色分工不变，玻璃只换载体。
ch5 蓝色域
ch2 粉色域
ch4 绿色域
预期区 = 彩色磨砂：章节色透过 glass-light 显色；文字只上 glass-strong（白底 ≥ 72%）。
卡片跨在色域边界上——半透明在边界处才被看见，这是玻璃的构图纪律。
玻璃 token
| token | 值 | 用途 |
|---|
glass-strong | white ·72 | 文字面 |
glass | white ·55 | 卡面 |
glass-light | white ·40 | HUD / 图例 |
glass-line | 1px ·65 | 亮边 |
glass-edge | inset ·90 | 内高光 |
glass-shadow | 0 8 24 ·.10 | 投影 |
玻璃规则
1玻璃是表面不是颜色：四层分工不变，玻璃只是纸之外的载体。
2文字只上 strong：承载文字的玻璃白底 ≥ 72%，保住 ink 对比。
3必须跨色域：玻璃要骑在颜色边界上；平放白桌等于看不见。
4玻璃也是预算：一屏 ≤ 3 件，与饱和度预算同理。
5线可穿玻璃：线路与站点允许从 glass-light 下穿过（HUD）。
6不加渐变描边：亮度来自 1px 亮边 + 内高光，不是渐变。
03 / 03