+
+
<DesignStyles />
+
设计风格探索 · 七种风格 × 课程书架
+
同一套课程卡信息（章节卡 · 16:9 预期区 · 状态 · 路线）在七种风格语言下重演，供横向对比与择路。均遵守：不用色彩渐变。
+
+
+
+
+
+
瑞士风格 Swiss02
+
+
网格与排印承担一切，红色只做信号。信息密度的最优解。
+
+
+
孟菲斯 Memphis03
+
+
粗黑描边、硬投影与几何涂鸦，欢乐但吵闹。
+
+
+
拼贴风 Collage04
+
+
纸片、胶带与图钉：知识像剪报被钉在线上，手作感强。
+
+
+
波普风 Pop Art05
+
+
本戴点与爆炸框，完成章节像漫画的 POW！情绪最强。
+
+
+
扁平风 Flat06
+
+
纯色块分层、无影无纹理，工程实现最省。
+
+
+
像素风 Pixel07
+
+
任务地图与 HP 条：学习像通关，游戏化拉满。
+
+
+
极简风 Minimal08
+
+
留白与发丝线，颜色退到墨阶，仅 sage 一点呼吸。
+
+
+
怎么选
+
教程站的主风格建议在瑞士 / 扁平 / 极简中取一（信息效率）；孟菲斯 · 波普 · 像素适合做成就与彩蛋层；拼贴适合实践经历栏目。风格可分层混用，规则见各页右栏。
+
+
+
+
+
+
01 / 08
+
+
+
Style · Swiss
+
瑞士风格 · 网格与排印承担一切
+
客观、齐左、大字号对比，红只做信号；卡片无影，靠发丝线与网格定位。信息密度最高的选择。
+
+
+
+
01
+
+
COURSE SHELF — FULL-STACK
+
课程书架 · 全栈工程师教程
+
+
+
+
+
+
+ ⚛️
+ 16:9
+
+
React✓
+
+
+
+
+
SEQUENCE 01–06 · GRID 12 COL · TYPE 2 STEP
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | 黑 / 白 / 灰 + 单一信号红 |
+ | 卡片 | 无影，1px 发丝边框 |
+ | 排印 | 大数字 + 小注释，齐左 |
+ | 线条 | 1px 黑实线 |
+ | 站点 | 6px 方块（红=当前） |
+ | 状态 | 黑块 ✓ / 灰框 ○ |
+
+
+
+
适配判断
+
1适合：教程正文与目录——信息效率天花板。
+
2慎用：儿童向或庆功场景太冷静。
+
3混用：可作全站骨架，其余风格做局部层。
+
+
+
+
02 / 08
+
+
+
Style · Memphis
+
孟菲斯 · 粗描边与几何涂鸦
+
反功能主义的欢乐：高饱和撞色、2px 黑描边、硬投影，圆点波浪三角当装饰。学习不必一脸严肃。
+
+
+
+
+
+
+
+
+
装饰不进正文区：涂鸦只出现在留白与卡片边缘。
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | 珊瑚 / 芥末 / 湖蓝 + 奶油底 |
+ | 卡片 | 2px 黑描边 + 5px 硬投影 |
+ | 形状 | 大圆角，允许 ±1.5° 旋转 |
+ | 线条 | 3px 黑实线 |
+ | 站点 | 描边圆点，四色轮换 |
+ | 状态 | 彩底描边胶囊 / 星形 |
+
+
+
+
适配判断
+
1适合：激励层——成就徽章、里程碑、空状态插画。
+
2慎用：正文阅读区，噪音大、久看累。
+
3规则：涂鸦只上留白与边缘，永不进文字。
+
+
+
+
03 / 08
+
+
+
Style · Collage
+
拼贴风 · 剪报、胶带与图钉
+
知识像剪报被钉在线上：牛皮纸、撕边纸片、和纸胶带、邮戳。手作感与档案感并存，适合"经历"类内容。
+
+
+
+
+
+
+
+
+
+ 🌐
+ 16:9 · GIF
+
+
快速开始✓ 完成
+
+
+
+
+ ⚛️
+ 16:9 · GIF
+
+
React✓ 完成
+
+
+
+
+
+ 🔗
+ 16:9 · GIF
+
+
全栈基础○ 待读
+
+
+
NOTES · 剪报
+
+
+
+
已归档
+
+
+
+
麻绳点划线 + 图钉：路线像钉在软木板上。
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | 牛皮 / 纸白 / 新闻灰 + 邮戳红 |
+ | 卡片 | 撕边圆角 + 微旋转 + 软影 |
+ | 固定 | 和纸胶带（半透米色） |
+ | 线条 | 麻绳点划（棕） |
+ | 站点 | 图钉圆（红/黄铜） |
+ | 状态 | 邮戳圆章「已归档」 |
+
+
+
+
适配判断
+
1适合：实践经历栏目、学员作品墙、更新日志。
+
2慎用：需要精确对齐的表格与代码块。
+
3规则：旋转只在卡片 ±1.5°，文字永不斜。
+
+
+
+
04 / 08
+
+
+
Style · Pop Art
+
波普风 · 本戴点与爆炸框
+
漫画分格的 3px 黑描边、本戴点半调、四色撞色；完成章节就该像一格漫画里的 POW！情绪最强的选择。
+
+
+
+
+
+
+
+
+
POW!
+
DONE!
+
本戴点 = 硬边点阵图案（非色彩渐变）；爆炸框只给"完成"时刻。
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | 黄 / 粉 / 蓝 / 黑四色 |
+ | 卡片 | 3px 黑描边 + 6px 硬投影 |
+ | 底纹 | 本戴点（硬边点阵） |
+ | 线条 | 4px 黑实线 |
+ | 站点 | 五角星（黄/蓝/白） |
+ | 状态 | POW! 爆炸框 / 黑标未解锁 |
+
+
+
+
适配判断
+
1适合：庆功层——完成弹窗、里程碑海报、分享卡。
+
2慎用：整站主风格，视觉疲劳快。
+
3规则：爆炸框一屏至多一个，只用给"完成"。
+
+
+
+
05 / 08
+
+
+
Style · Flat
+
扁平风 · 纯色块与留白
+
无阴影、无描边、无纹理：层级靠色块对比与留白，状态即色块。工程实现最省、缩放最稳。
+
+
+
+
+
+
+
+
+
层级完全靠色相对比：章节色块在上、灰阶状态在下、蓝线管路径。
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | UI 蓝 / 绿 / 琥珀 + 灰阶 |
+ | 卡片 | 纯白圆角块，无影无边 |
+ | 层级 | 靠底色分区，不靠描边 |
+ | 线条 | 3px 主色实线 |
+ | 站点 | 实心圆，色即状态 |
+ | 状态 | 色块小标签（圆角 5） |
+
+
+
+
适配判断
+
1适合：主风格候选——与 Docusaurus 默认气质最近。
+
2慎用：层级多时区分度下降，需留白纪律。
+
3规则：色块只承载层级，文字永远白底。
+
+
+
+
06 / 08
+
+
+
Style · Pixel
+
像素风 · 任务地图与 HP 条
+
8-bit 语汇：阶梯硬边框、等宽字、方块点阵路线与进度条。学习即通关，游戏化拉满。
+
+
+
+
+
+ 🌐
+
+
+ 快速开始
+ ★ CLEARED
+
+
+
+
+
+
+
+ ⚛️
+
+
+ React
+ ▶ PLAYING
+
+
+
+
+
+
+
+ 🔗
+
+
+ 全栈基础
+ 🔒 LOCKED
+
+
+
+
+
+
+
+
QUEST MAP · 方块站点=关卡 · 旗=下一目标 · HP条=学习进度
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | PICO-8 子集（海军蓝底） |
+ | 卡片 | 2px 框 + 4px 阶梯硬投影 |
+ | 字体 | 等宽，全大写状态词 |
+ | 线条 | 4px 方块点阵（8/8） |
+ | 站点 | 12px 方块 = 关卡 |
+ | 状态 | ★CLEARED / ▶PLAYING / 🔒 |
+
+
+
+
适配判断
+
1适合：成就层与练习系统——关卡、积分、连击。
+
2慎用：长文阅读（等宽字排中文费力）。
+
3规则：像素装饰不缩放抗锯齿；中文正文回到 Noto。
+
+
+
+
07 / 08
+
+
+
Style · Minimal
+
极简风 · 减到只剩信息
+
留白即层级：发丝顶线代替卡片，文字即界面，颜色退到墨阶——只留 sage 一点呼吸。安静到极致。
+
+
+
+
+
+
+
+
+
唯一的颜色留给路径（sage）；完成的章节墨色加重，未到的退为浅灰。
+
+
+
+
+
+
风格 token
+
+ | 维度 | 取值 |
|---|
+ | 色彩 | 墨阶 + 唯一 sage 强调 |
+ | 卡片 | 发丝顶线，无底无框 |
+ | 排印 | 序号小字 + 标题，留白分层 |
+ | 线条 | 0.75px 浅灰 |
+ | 站点 | 2px 圆点（sage） |
+ | 状态 | 墨 ✓ / 浅灰 ○，无底色 |
+
+
+
+
适配判断
+
1适合：正文与长阅读——零干扰。
+
2慎用：营销页与激励时刻，太平静。
+
3规则：一屏只允许一个彩色元素（sage）。
+
+
+
+
08 / 08
+