设计规范生成器

一套设计规范，包含哪几层

上面的配色方案可以拿来就用，但它只是设计规范里的一层。一份能在团队里落地、 不靠「凭感觉」维持一致性的设计规范，通常分成五层。第一层是色彩——同一个蓝， 在设计师的屏幕上、印刷打样上和用户手机上，可能呈现三种颜色， 所以规范里必须给出明确色值，而不是「深一点的蓝」这种描述。

前面四层解决的是「一致」，最后一层解决的是「可用」，两者经常打架： 一个好看的低对比度浅灰字，视觉上显得高级，但对比度可能只有 2:1，远低于无障碍要求。 根据 W3C 的 WCAG 2.2，正文文字与背景的对比度至少要 4.5:1，大号文字至少 3:1—— 这是可核验的硬阈值，不是审美偏好。实际上，改掉「浅灰字」这类习惯最直接的办法， 就是在交付前跑一遍对比度检查，把它当成和错别字同级的必查项。

中文语境里还有一层容易被跳过：国家标准《中国颜色体系》（GB/T 15608-2006） 规定了颜色的分类与标号方法，用于颜色的保存、传递与交流。 换句话说，如果品牌色要在屏幕、印刷和喷绘三种介质之间保持一致， 色值的表述方式就得按色彩空间与色彩管理的口径来，而不是只丢一个屏幕取色值。

上面这份检查清单里，「对比度是否达标」这一项可以直接算出来，不必靠肉眼比对。 本站做了一个专门算这件事的工具：看得清 · 配色对比度检查器——输入两个色值即得 WCAG 2.2 的比值与判定；卡片带透明度时会先与底色复合再算， 还能用 L* 差值检查暗色界面的分层是否看得出来。规范里的阈值和工具里的结论用的是同一套算法。

说白了，设计规范的作用是把「每次都要重新决定的事」变成「查表就知道的事」。 配色方案是入口，不是终点；真正省时间的，是字阶、间距与版式这三层被固定下来之后， 新页面不用再从零讨论留白多少、字号多大。

关键在于验收口径：改稿时不要只说「这个颜色不好看」，而要落到可检查的项—— 对比度是否达标、字号是否在字阶序列上、间距是否落在栅格刻度上。 举个例子，把「再高级一点」换成「主色与背景对比度提到 4.5:1 以上」， 设计方才知道往哪个方向改。我在交付时会把这份检查清单附在规范后面， 引用其中的条目就能对齐双方预期，不必再回去翻聊天记录。

这份清单上的每一项都标了可核验的出处——对比度阈值引 W3C 的 WCAG， 色值与颜色标号口径引国家标准 GB/T 15608。比如色值表里的每一个色， 都写明它该用在什么场景，而不是只给一串十六进制数字。