bashi-website/overview-icon-color-audit.md

色彩 & 图标审计与修复 — 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。