You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.7 KiB
2.7 KiB
bashi-website — 色彩 & 图标 最终决策落地（像素君 / UI Designer）
用户拍板「听你的」，以下决策已直接执行并验证通过。
1. 赛道色统一（解决双套定义）
之前：赛道卡片用粉彩 #E8A0BF/#7EC8E3/#98D8AA/#C9B1FF，但全局 --track-* token 是饱和默认色 #EF4444/#2563EB/#10B981/#8B5CF6 —— 色相一致，唯独「社交」一边粉、一边红最扎眼。
改为：token 与卡片粉彩同色相，并加深以保证 WCAG AA（白底文字 ≥4.5:1；实心按钮白字 ≥4.5:1）：
| 赛道 | 旧 token | 新 token | 对齐的卡片粉彩 |
|---|---|---|---|
| 社交 Social | #EF4444 红 |
#C2416B 深玫瑰 |
#E8A0BF 粉 |
| 职场 Career | #2563EB |
#1C7AB6 深天蓝 |
#7EC8E3 蓝 |
| 支付 Payment | #10B981 |
#15803D 深绿 |
#98D8AA 绿 |
| AI | #8B5CF6 |
#7C3AED 深紫 |
#C9B1FF 紫 |
- 顺手删掉 4 个从未引用的
--track-*-bright死 token，设计系统更干净。
2. 图标全部统一为 lucide（单一图标源）
设计系统第一原则就是一致性。把所有手写内联 SVG 换成 lucide：
- Header：汉堡 ↔ 关闭 →
Menu/X - Contact：
💼→Briefcase、🤝→Handshake、CTA 箭头→ArrowRight、邮件→Mail - NotFound：返回箭头→
ArrowLeft、前往箭头→ArrowRight - Join：投递区残留的邮件 SVG →
Mail
全站已无任何 emoji（上次 Join 福利区已改，本次清掉 Contact 两处 + Join 邮件图标）。
3. SPA fallback（生产环境深链接不 404）
新增 public/_redirects：/* /index.html 200（Netlify 及多数静态托管通用，对其它平台无害），已随构建进入 dist/。
若用其它托管，规则如下：
- nginx：
try_files $uri $uri/ /index.html;- Vercel：
vercel.json→{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }- GitHub Pages：需用
gh-pages+ 404.html 拷贝，或 hash router
验证
npx tsc --noEmit→ 0 错误npm run build→ 1819 模块，新色已进入distCSS，_redirects已进distsrc/内 0 emoji- 开发服务器在线 http://localhost:4321：
//business/contact/join/en/contact/404全部 200，改动模块编译干净，lucide 依赖解析 200
仍可继续打磨（可选，未动）
- 字体层级/行高 token 化（目前散落在 class 里）
- 暗色主题目前由
page-enter/CSS 变量驱动，可补一套更完整的深色 token 校验 - 赛道卡片粉彩与全局 token 仍有「深浅两档」的语义区分，若想彻底单源，可把卡片色也改从
--track-*派生（需动 i18n 数据）