视频加载失败

暖白编辑风实战:把配色收敛成七个 token

337 字
2 分钟
暖白编辑风实战:把配色收敛成七个 token
七个设计 token 的色板示意
全站的全部颜色:暖白底、墨色正文、次级灰、一个橘色 accent,再加三条结构色。

设计系统最容易失控的地方,不是没有规范,而是规范太多。这次的约束简单到近乎苛刻:全站只允许七个颜色变量出现裸值,组件里一律引用 token。

七个 token 的分工#

  1. 底色和正文构成阅读面;
  2. 次级灰负责日期、摘要和图注;
  3. accent 只准出现在链接、当前态和小标签上;
  4. 边框线、卡片白、代码底三个结构色兜住层次。

对比度不是玄学:正文对底色至少 7<1>,次级文字和 accent 链接至少 4.5<1>,达不到就改色值,不许找借口。

一个诚实的坑#

橙色 accent(#E8590C)在暖白底上的对比度实测只有约 3.4<1>,拿来做小号正文链接并不达标。目前的取舍是链接一律带下划线、并控制它出现的场景;后续如果严格按 WCAG AA 验收,就要考虑把 accent 往深里压一档(比如 #D9480F 或更深)。

先把这个矛盾记录在这里,等整站跑完 Lighthouse 再回来对账——设计稿和实现不允许两边各自漂移。

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
暖白编辑风实战:把配色收敛成七个 token
https://ryuki.icu/posts/warm-white-design-tokens/
作者
RK
发布于
2025-09-26
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
RK
朝花夕拾,写字为了想清楚。
公告
朝花夕拾——早晨的花,傍晚再拾起来。
分类
标签
最新动态
站点统计
文章
6
分类
3
标签
6
总字数
1,992
运行时长
0
最后活动
0 天前
站点信息
构建平台
Cloudflare Pages
博客版本
Firefly v6.16.4
文章许可
CC BY-NC-SA 4.0