暖白编辑风实战:把配色收敛成七个 token
337 字
2 分钟
暖白编辑风实战:把配色收敛成七个 token
设计系统最容易失控的地方,不是没有规范,而是规范太多。这次的约束简单到近乎苛刻:全站只允许七个颜色变量出现裸值,组件里一律引用 token。
七个 token 的分工
- 底色和正文构成阅读面;
- 次级灰负责日期、摘要和图注;
- accent 只准出现在链接、当前态和小标签上;
- 边框线、卡片白、代码底三个结构色兜住层次。
对比度不是玄学:正文对底色至少 7<1>1>,次级文字和 accent 链接至少 4.5<1>1>,达不到就改色值,不许找借口。
一个诚实的坑
橙色 accent(#E8590C)在暖白底上的对比度实测只有约 3.4<1>1>,拿来做小号正文链接并不达标。目前的取舍是链接一律带下划线、并控制它出现的场景;后续如果严格按 WCAG AA 验收,就要考虑把 accent 往深里压一档(比如 #D9480F 或更深)。
先把这个矛盾记录在这里,等整站跑完 Lighthouse 再回来对账——设计稿和实现不允许两边各自漂移。
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
暖白编辑风实战:把配色收敛成七个 token
https://ryuki.icu/posts/warm-white-design-tokens/相关文章智能推荐
1
重新开始写博客:一次暖白编辑风的自我改造
随笔把博客从仪表盘审美拉回杂志排版——为什么是暖白底、大留白和一个克制的强调色。
2
编辑感从哪里来:三条排版小抄
设计首字下沉、pull quote 和细线分隔——杂志质感的三块积木,以及它们的使用分寸。
3
Astro 内容管线速记:Content Collections 从入门到顺手
前端用 getCollection 替代散落的 import.meta.glob,让 frontmatter 有 schema 兜底,路由即数据。
4
散步、独处与长期主义
随笔把「坚持」翻译成每天二十分钟的散步——一些关于节奏的碎念。
5
都 2025 了,我为什么还写 RSS
随笔RSS 没有死,它只是退回了它最舒服的位置——一个安静、主动、零算法的订阅入口。
随机文章随机推荐













