Skip to content

Commit e3df416

Browse files
AparenciaAparencia
committed
docs: 设计系统色表同步生物发光叙事
1 parent ef10ae5 commit e3df416

2 files changed

Lines changed: 39 additions & 38 deletions

File tree

‎.superdesign/design-system.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
| 累计专注 | 珊瑚地形 |
1616
| 灵感数 | 萤火 |
1717

18-
品牌美学 DNA：「深海生物发光美学」——深海萤火 / 认知琥珀金 / 赛博青。
18+
品牌美学 DNA：「深海生物发光美学」——深海萤火 / 磷光青绿 / 认知琥珀金。
19+
AI 专用色：深海磷光蓝 `#4A9BD9` / `#2B5F9E`（仅 AI 功能）。
1920

2021
**第二条 焦虑防线**：零负向语言、零倒计时（禁止红色倒计时压力）、零赤字、一切可关闭、回归奖赏。
2122

@@ -30,10 +31,10 @@
3031
| | 深色「深海意识」（主用） | 浅色「晨曦穹顶」 |
3132
|--|--|--|
3233
| 背景 | `#0C1524` / `#12203A` / `#182A48` | `#FAF8F5` / `#F2EDE6` / `#EBE5DC` |
33-
| 品牌主色 | 靛蓝 `brand-400 #6366F1` / `brand-500 #818CF8` | 蓝 `brand-500 #3B82F6` / `brand-600 #2563EB` |
34-
| 品牌辅色 | 赛博青 `accent-500 #06B6D4` / `accent-600 #22D3EE`（AI 呼吸灯） | 琥珀金 `accent-500 #F59E0B` |
34+
| 品牌主色 | 磷光青绿 `brand-400 #40AB92` / `brand-500 #57C6A9` | 晨光琥珀金 `brand-500 #B05E12` / `brand-600 #C9761F` |
35+
| 品牌辅色 | 认知琥珀金 `accent-500 #D18A2A` / `accent-600 #E8A74A` | 晨空蓝 `accent-500 #4A7DB0` / `accent-600 #3B689A` |
3536
| 文字 | `#E0E6F0` / `#90A0B8` / `#607088` | `#2C2720` / `#7A7570` / `#9C9590` |
36-
| 功能色 | `--kb-amber #FBBF24`（顿悟）、moss `#82C9A3`（进展）、cyber-cyan `#22D3EE`（AI） | 同族浅色 |
37+
| 功能色 | `--kb-amber #FBBF24`（顿悟）、moss `#82C9A3`（进展）、深海磷光蓝 `#4A9BD9`（AI） | 同族浅色 |
3738

3839
模块色（Tailwind 级）：pomodoro `#5B8A72`（深潜）、note `#6B9BD2`（结礁）、flashcard `#7BC4B8`（反衰减呼吸）、feynman `#C4956A`（浮出水面）、classroom `#14B8A6`（回声定位）。
3940

@@ -56,14 +57,14 @@
5657
## 组件风格约束
5758

5859
- 毛玻璃面板：`bg-bg-secondary/60 backdrop-blur-xl border border-border/40`
59-
- 按钮：primary `bg-brand-600` / secondary 边框 / ghost / ai 渐变 `from-accent-500 to-brand-500`；active:scale-0.97
60+
- 按钮：primary 双光源材质（kb-btn-primary-material：环境光+自发光+微噪点+按压点亮）/ secondary 边框 / ghost / ai 磷光蓝材质（kb-btn-ai-material）；active:scale-0.97
6061
- 图标：Lucide 线性 1.5 stroke；尺寸 14/16/20/24/32
6162
- 卡片 hoverable：-translate-y-0.5 + shadow 增强
6263
- 布局三层：Layer 0 3D 场景（z-0）/ Layer 1 功能面板（毛玻璃）/ Layer 2 标题栏
6364

6465
## 已知设计缺口（改进方向线索）
6566

66-
1. **硬编码色**：InspirationPage 用 `from-purple-400 to-purple-600`、`purple-500 to-cyan-500`、slate 灰，偏离品牌靛蓝/赛博青令牌
67+
1. ~~**硬编码色**：InspirationPage 用 `from-purple-400 to-purple-600`、`purple-500 to-cyan-500`、slate 灰，偏离品牌靛蓝/赛博青令牌~~ ✅ 2026-08-08 已归位（生物发光色板 + 材质类落地）
6768
2. **3D 场景仍为概念原型**：深海缺粒子系统/生物发光体/焦散光落地
6869
3. **动效分布不均**：灵感激活动效集中在 inspiration 模块；仪表盘统计卡 `kb-stat-breathe` 为唯一常驻动效
6970
4. **叙事弱化**：部分状态直接暴露内部数据（如星座 title=sortStatus），未做叙事化翻译

‎docs/product/ui-ux-system.md‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -51,28 +51,28 @@
5151

5252
##### 视觉概念
5353

54-
深海的隔绝感与安全感。如潜入静谧深海——没有刺眼的白光，只有生物荧光般的微光引导前行，赛博青的 AI 呼吸灯消解孤独感。
54+
深海的隔绝感与安全感。如潜入静谧深海——没有刺眼的白光，只有生物荧光般的微光引导前行，深海磷光蓝的 AI 呼吸灯消解孤独感。
5555

5656
**情绪/氛围关键词**: 沉浸、神秘、隔绝、安全、生物荧光、深海暗流、专注
5757

5858
##### 色彩体系
5959

60-
**品牌主色 — 深空蓝紫（靛蓝色系）：**
60+
**品牌主色 — 磷光青绿（磷光绿色系）：**
6161

6262
| 令牌 | 色值 | 用途 |
6363
|------|------|------|
6464
| `--kb-brand-50` | `#1A1B3A` | 最浅品牌色 |
6565
| `--kb-brand-100` | `#252755` | 浅品牌色 |
6666
| `--kb-brand-200` | `#353878` | 品牌淡色 |
6767
| `--kb-brand-300` | `#4A4E9E` | 品牌中间色 |
68-
| `--kb-brand-400` | `#6366F1` | 品牌强调色（主用） |
69-
| `--kb-brand-500` | `#818CF8` | 品牌核心色 |
70-
| `--kb-brand-600` | `#6366F1` | 品牌深色 |
68+
| `--kb-brand-400` | `#40AB92` | 品牌强调色（主用） |
69+
| `--kb-brand-500` | `#57C6A9` | 品牌核心色 |
70+
| `--kb-brand-600` | `#40AB92` | 品牌深色 |
7171
| `--kb-brand-700` | `#5558E0` | 品牌更深 |
7272
| `--kb-brand-800` | `#4649C8` | 品牌极深 |
7373
| `--kb-brand-900` | `#373AB0` | 品牌最深 |
7474

75-
**品牌辅色 — 赛博青（Cyan）：**
75+
**品牌辅色 — 认知琥珀金：**
7676

7777
| 令牌 | 色值 | 用途 |
7878
|------|------|------|
@@ -81,8 +81,8 @@
8181
| `--kb-accent-200` | `#164E63` | 辅助淡色 |
8282
| `--kb-accent-300` | `#0E7490` | 辅助中间色 |
8383
| `--kb-accent-400` | `#0891B2` | 辅助强调色 |
84-
| `--kb-accent-500` | `#06B6D4` | 辅助核心色 |
85-
| `--kb-accent-600` | `#22D3EE` | 辅助亮色 |
84+
| `--kb-accent-500` | `#D18A2A` | 辅助核心色 |
85+
| `--kb-accent-600` | `#E8A74A` | 辅助亮色 |
8686
| `--kb-accent-700` | `#67E8F9` | 辅助极亮 |
8787
| `--kb-accent-800` | `#A5F3FC` | 辅助近白 |
8888
| `--kb-accent-900` | `#CFFAFE` | 辅助最亮 |
@@ -95,7 +95,7 @@
9595
| `--kb-amber` | `#FBBF24` | 琥珀金（顿悟时刻） |
9696
| `--kb-moss-green` | `#82C9A3` | 苔藓绿（进展） |
9797
| `--kb-stone-purple` | `#3A3545` | 石灰紫 |
98-
| `--kb-cyber-cyan` | `#22D3EE` | 赛博青（AI标识） |
98+
| `--kb-cyber-cyan` | `#4A9BD9` | 深海磷光蓝（AI标识） |
9999
| `--kb-color-error` | `#F87171` | 错误红 |
100100
| `--kb-color-warning` | `#FB923C` | 警告橙 |
101101
| `--kb-color-success` | `#4ADE80` | 成功绿 |
@@ -166,7 +166,7 @@
166166

167167
##### 色彩体系
168168

169-
**品牌主色 — 蓝色系（专注/平静）：**
169+
**品牌主色 — 晨光琥珀金（温暖/专注）：**
170170

171171
| 令牌 | 色值 | 用途 |
172172
|------|------|------|
@@ -175,13 +175,13 @@
175175
| `--kb-brand-200` | `#BFDBFE` | 品牌淡色 |
176176
| `--kb-brand-300` | `#93C5FD` | 品牌中间色 |
177177
| `--kb-brand-400` | `#60A5FA` | 品牌强调色 |
178-
| `--kb-brand-500` | `#3B82F6` | 品牌核心色 |
179-
| `--kb-brand-600` | `#2563EB` | 品牌深色 |
178+
| `--kb-brand-500` | `#B05E12` | 品牌核心色 |
179+
| `--kb-brand-600` | `#C9761F` | 品牌深色 |
180180
| `--kb-brand-700` | `#1D4ED8` | 品牌更深 |
181181
| `--kb-brand-800` | `#1E40AF` | 品牌极深 |
182182
| `--kb-brand-900` | `#1E3A8A` | 品牌最深 |
183183

184-
**品牌辅色 — 琥珀/青色系（成就/温暖）：**
184+
**品牌辅色 — 晨空蓝（通透/开阔）：**
185185

186186
| 令牌 | 色值 | 用途 |
187187
|------|------|------|
@@ -190,7 +190,7 @@
190190
| `--kb-accent-200` | `#FED7AA` | 辅助淡色 |
191191
| `--kb-accent-300` | `#FDBA74` | 辅助中间色 |
192192
| `--kb-accent-400` | `#FB923C` | 辅助强调色 |
193-
| `--kb-accent-500` | `#F59E0B` | 辅助核心色 |
193+
| `--kb-accent-500` | `#4A7DB0` | 辅助核心色 |
194194
| `--kb-accent-600` | `#D97706` | 辅助深色 |
195195
| `--kb-accent-700` | `#B45309` | 辅助更深 |
196196
| `--kb-accent-800` | `#92400E` | 辅助极深 |
@@ -204,7 +204,7 @@
204204
| `--kb-amber` | `#F59E0B` | 琥珀金 |
205205
| `--kb-moss-green` | `#6BAF8A` | 苔藓绿 |
206206
| `--kb-stone-purple` | `#8B8494` | 石灰紫 |
207-
| `--kb-cyber-cyan` | `#06B6D4` | 赛博青 |
207+
| `--kb-cyber-cyan` | `#4A9BD9` | 深海磷光蓝 |
208208
| `--kb-color-error` | `#EF4444` | 错误红 |
209209
| `--kb-color-warning` | `#F97316` | 警告橙 |
210210
| `--kb-color-success` | `#22C55E` | 成功绿 |
@@ -801,24 +801,24 @@ pointer-events-auto（遮罩拦截事件，点击遮罩可关闭）
801801
| 100 | `#DBEAFE` | `#252755` |
802802
| 200 | `#BFDBFE` | `#353878` |
803803
| 300 | `#93C5FD` | `#4A4E9E` |
804-
| 400 | `#60A5FA` | `#6366F1` |
805-
| 500 | `#3B82F6` | `#818CF8` |
806-
| 600 | `#2563EB` | `#6366F1` |
804+
| 400 | `#60A5FA` | `#40AB92` |
805+
| 500 | `#B05E12` | `#57C6A9` |
806+
| 600 | `#C9761F` | `#40AB92` |
807807
| 700 | `#1D4ED8` | `#5558E0` |
808808
| 800 | `#1E40AF` | `#4649C8` |
809809
| 900 | `#1E3A8A` | `#373AB0` |
810810

811811
**品牌辅色对比表：**
812812

813-
| 级别 | 浅色模式（琥珀） | 深色模式（赛博青） |
813+
| 级别 | 浅色模式（晨空蓝） | 深色模式（认知琥珀金） |
814814
|------|-----------------|-------------------|
815815
| 50 | `#FFF7ED` | `#0A1E28` |
816816
| 100 | `#FFEDD5` | `#0E2E3C` |
817817
| 200 | `#FED7AA` | `#164E63` |
818818
| 300 | `#FDBA74` | `#0E7490` |
819819
| 400 | `#FB923C` | `#0891B2` |
820-
| 500 | `#F59E0B` | `#06B6D4` |
821-
| 600 | `#D97706` | `#22D3EE` |
820+
| 500 | `#4A7DB0` | `#D18A2A` |
821+
| 600 | `#D97706` | `#E8A74A` |
822822
| 700 | `#B45309` | `#67E8F9` |
823823
| 800 | `#92400E` | `#A5F3FC` |
824824
| 900 | `#78350F` | `#CFFAFE` |
@@ -1276,11 +1276,11 @@ Canvas WebGL 渲染器配置：
12761276

12771277
#### 深色模式（深海意识）
12781278

1279-
**品牌色（靛蓝）：**
1280-
`#1A1B3A` `#252755` `#353878` `#4A4E9E` `#6366F1` `#818CF8` `#6366F1` `#5558E0` `#4649C8` `#373AB0`
1279+
**品牌色（磷光青绿）：**
1280+
`#1A1B3A` `#252755` `#353878` `#4A4E9E` `#40AB92` `#57C6A9` `#40AB92` `#5558E0` `#4649C8` `#373AB0`
12811281

1282-
**辅助色（赛博青）：**
1283-
`#0A1E28` `#0E2E3C` `#164E63` `#0E7490` `#0891B2` `#06B6D4` `#22D3EE` `#67E8F9` `#A5F3FC` `#CFFAFE`
1282+
**辅助色（认知琥珀金）：**
1283+
`#0A1E28` `#0E2E3C` `#164E63` `#0E7490` `#0891B2` `#D18A2A` `#E8A74A` `#67E8F9` `#A5F3FC` `#CFFAFE`
12841284

12851285
**背景：**
12861286
`#0C1524` `#12203A` `#182A48`
@@ -1292,15 +1292,15 @@ Canvas WebGL 渲染器配置：
12921292
`#223550` `#2E4568`
12931293

12941294
**功能色：**
1295-
`#60A5FA` `#FBBF24` `#82C9A3` `#22D3EE` `#F87171` `#FB923C` `#4ADE80`
1295+
`#60A5FA` `#FBBF24` `#82C9A3` `#4A9BD9` `#F87171` `#FB923C` `#4ADE80`
12961296

12971297
#### 浅色模式（晨曦穹顶）
12981298

1299-
**品牌色（蓝）：**
1300-
`#EFF6FF` `#DBEAFE` `#BFDBFE` `#93C5FD` `#60A5FA` `#3B82F6` `#2563EB` `#1D4ED8` `#1E40AF` `#1E3A8A`
1299+
**品牌色（晨光琥珀金）：**
1300+
`#EFF6FF` `#DBEAFE` `#BFDBFE` `#93C5FD` `#60A5FA` `#B05E12` `#C9761F` `#1D4ED8` `#1E40AF` `#1E3A8A`
13011301

1302-
**辅助色（琥珀）：**
1303-
`#FFF7ED` `#FFEDD5` `#FED7AA` `#FDBA74` `#FB923C` `#F59E0B` `#D97706` `#B45309` `#92400E` `#78350F`
1302+
**辅助色（晨空蓝）：**
1303+
`#FFF7ED` `#FFEDD5` `#FED7AA` `#FDBA74` `#FB923C` `#4A7DB0` `#D97706` `#B45309` `#92400E` `#78350F`
13041304

13051305
**背景：**
13061306
`#FAF8F5` `#F2EDE6` `#EBE5DC` `#FFFFFF`
@@ -1312,7 +1312,7 @@ Canvas WebGL 渲染器配置：
13121312
`#DDD5CA` `#CCC3B7`
13131313

13141314
**功能色：**
1315-
`#3B82F6` `#F59E0B` `#6BAF8A` `#06B6D4` `#EF4444` `#F97316` `#22C55E`
1315+
`#B05E12` `#4A7DB0` `#6BAF8A` `#D18A2A` `#EF4444` `#F97316` `#22C55E`
13161316

13171317
#### 3D 场景专用色
13181318

@@ -1403,7 +1403,7 @@ Canvas WebGL 渲染器配置：
14031403
---
14041404
### 四、 总结：用户的第一眼体验
14051405
当用户打开课伴：
1406-
* **如果是夜晚**，他潜入了一片**静谧的深海**。没有刺眼的白光，只有生物荧光般的微光引导他前行，孤独感被赛博青的AI呼吸灯消解。
1406+
* **如果是夜晚**，他潜入了一片**静谧的深海**。没有刺眼的白光，只有生物荧光般的微光引导他前行，孤独感被深海磷光蓝的AI呼吸灯消解。
14071407
* **如果是清晨**，他推开了一扇**林间书房的窗**。宣纸般的底色让眼睛瞬间放松，留白让思维自然舒展，每一处交互都像触碰晨光一样温润。
14081408
这套设计不是“好看”，而是一种**视觉认知策略**——让用户在无意识中，被引导向更专注、更深沉、更持久的学习状态。
14091409

0 commit comments

Comments
 (0)