+
+
<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
+
海拔只上白纸卡；信息区用发丝线定界，不用阴影造假层级。
+
+
+
票券 · 状态是票
+
+
+
🌐
+
快速开始✓ 完成No. 001
+
№01
+
+
+
🔗
+
全栈基础🔒 未开始No. 005
+
№05
+
+
完成票沿撕线打孔（拟物：检票）；未开始不打孔、撕线为实线。票号 = 章程序号。
+
+
+
+
+
书脊与组合 · 章节是书
+
+
+
快速开始
+
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
+