# 色彩 & 图标审计与修复 — bashi-website

> 角色：像素君（UI Designer）｜审计依据：Impeccable + UI/UX Pro Max 设计规范

## 已修复（明确违规 / 无障碍硬伤）

### 1. 图标：Emoji → 真实 SVG
- **Join.tsx 福利区** 原用 emoji `⏰🏠💪🎉📚`，违反「禁止 emoji 作图标」规范。
- 安装 **lucide-react 1.25.0**，替换为 `Clock / Home / Dumbbell / PartyPopper / BookOpen`，置于 `#brand-cream-light` 圆角方块中，与全站图标语言一致。

### 2. 图标：唤醒沉睡的 `icon` 数据
- `i18n/{zh,en}.ts` 中每个产品都带 `icon: 'heart'|'music'|…` 字段，但**从未渲染**。
- `Business.tsx` 新增 `productIcon` 映射，给每个产品芯片渲染真实 lucide 图标
  （heart/music/sparkles/briefcase/mountain/footprints/rocket/check-circle→CircleCheck/bot/ear）。

### 3. 色彩：状态徽章对比度硬伤（WCAG AA 失败）
- `.status-developing` 原为 **奶油色文字 `#F5DEB3` 叠在近透明奶油底** → 白底上约 **1.3:1**，文字几乎不可见。
- 修复：`color-mix(... cream-deep 20% + bg-primary)` 底 + `#8A6A2F` 文字（≈ **4.9:1**，通过）。
- `.status-planned` 文字加深到 `#1D4ED8`，留足 AA 余量。

### 4. 色彩：暖白微调
- `--brand-white` 由 `#FFFFFF` → `#FCFBF8`，与奶油暖调主题更协调（纯白在「温暖未来主义」里偏冷）。

## 验证
- `npx tsc --noEmit` → 0 错误
- `npm run build` → 1819 模块（lucide 已打包）
- 开发服务器 `/business`、`/join` 模块编译通过，全站页面 200

## 待你拍板（未改，属品牌级决策）

### A. 赛道色存在「双套定义」不一致
| 位置 | 社交 | 职场 | 支付 | AI |
|------|------|------|------|-----|
| 赛道卡片（Home/Business/Innovation） | `#E8A0BF` 粉 | `#7EC8E3` 青 | `#98D8AA` 薄荷 | `#C9B1FF` 薰衣草 |
| 全局强调 token `--track-*` | `#EF4444` 红 | `#2563EB` 蓝 | `#10B981` 翠 | `#8B5CF6` 紫 |

- 卡片用的是柔和粉彩，强调 token 是 Tailwind 默认饱和色，**色相不一致**（尤其「社交」= 粉 vs 红）。
- **建议**：统一为一套色相（例如让全局强调 token 与粉彩共享色相，仅提高饱和度用于小面积强调）。
- 需要你确认方向后我再改——这是品牌视觉基调，不想擅自重绘。

### B. 手写内联 SVG
- `Header / Contact / NotFound` 用的是手写 24×24 描边 SVG，风格一致、无问题；可选统一换成 lucide 做单一图标源。

## 你需要告诉我的
1. 赛道色要不要统一？统一到「粉彩色相」还是维持饱和色相？
2. 是否要把手写 SVG 也换成 lucide（单一图标源）？
3. 是否需要我补充一个 **SPA fallback** 部署配置（nginx / vercel / netlify），否则生产环境深链接 404。