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