设计令牌与双主题

背景

页面一多，颜色就开始失控：同一个「次级文字」在不同组件里出现了五种灰。于是先停掉写页面，把颜色、间距、圆角、阴影、动效时长整理成令牌。

设计约定

• 语义命名：--c-canvas / --c-surface / --c-ink / --c-ink-soft / --c-brand / --c-line，组件里只允许用语义名，不出现十六进制色值。
• 填充与文字分开：品牌色 #6598F5 好看但压不住白字（2.8:1），于是拆成 --c-fill-brand（填充）和 --c-brand-ink（文字），各自满足对比度。
• 间距与圆角成阶梯：4 的倍数做间距，10 / 14 / 16 / 22 做圆角，避免「随手 13px」。

踩坑记录

• 设计稿不等于可达标：#8993A7 在 #F6F8FC 上只有 2.91:1，200 多处不达标。写了个审计脚本遍历真实 DOM，沿祖先累加背景透明度算 WCAG 比值，最后把次级色改到 #566072（5.96:1）。
• 渐变背景算不出对比度：头像、封面这些渐变块上的文字，脚本按「白底」算会误判，最后统一改成 text-on-brand 这种「在深浅底上都够亮」的令牌。
• 主题与响应式都好，反倒被服务器配置绊住：Nginx 的 add_header 在 location 里出现就不再继承 server 块，HSTS 整组丢失——同一类「就近覆盖」的坑。

结果

七个页面 × 双主题全量审计 0 处不合规；换主题不需要动任何一个组件。