腾讯蓝清华紫双色设计体系

解决什么问题

一份方案要在文档里讲清楚，在公众号里发出去，还要做成 PPT 和网页。五个媒介、五个人做，最容易出现的情况是：标题颜色各不相同，紫色一会儿做强调词、一会儿做正文色，有人直接把蓝字压在蓝底上。这不是某个人的问题，是缺少一套能落地的配色规则。

这个技能要解决的核心问题就是把“蓝紫怎么配”变成确定性判断：什么时候用蓝、什么时候用紫、什么时候必须用黑白字、渐变区怎么配字，全部有 token 和工具类兜底，而不是凭感觉调色板。

核心能力与关键规则

结构蓝 + 强调紫，两条线并行

• 腾讯蓝 #0052D9 承担一级结构：标题、导航、主按钮、链接、表头、顶栏
• 清华紫 #5B2C8C 承担经典强调：序号、关键词、次要按钮、页码
• 亮紫 #7E22CE 承担新主强调：标签胶囊、渐变中段、装饰圆点
• 蓝紫渐变 135deg #0052D9 → #7E22CE(55%) → #5B2C8C 用于封面、Hero、横幅等高光区

文字层永远干净

V2.2 的核心原则是文字只用黑/白：#18181B 或 #FFFFFF。蓝紫只出现在背景与结构层。彩色块、渐变区一律配白字，浅底配黑字。判据是明度阈值——背景明度 ≤50% 用白字，>50% 用黑字，这与清华 VI 规范一致。工具类 .text-on-color 和 .text-on-light 把这个判断封装好了，不需要每次手动算对比度。

跨媒介统一，靠 token 不靠截图

文档、公众号、PPT、网页用的是同一套 token：中文无衬线字体栈、4px 基准间距、胶囊圆角、紫调阴影。区别在于版式——PPT 封面用深蓝紫渐变底白字，文档章节用紫点+渐变细线分隔，网页 Hero 用蓝紫渐变+紫色胶囊 CTA。references/design-tokens.css 里已经实现了按钮、卡片、徽标、金句区、紫标签、章节分隔等组件，直接 @import 或复制就能用。

浅色与深色双形态

V2.4 引入了双形态：浅色品牌版对外，白底+蓝紫结构，高级清爽；深色产品版对内做产品演示，深空底+蓝紫渐变光效，原青色 #00E5FF 全部替换为 --grad，避免和腾讯蓝混用像两个品牌。金色 logo 不改色、不删，只在深色/浅色页用对应的承托类保证可见性。

适用边界与注意点

• 强调紫单页用量 ≤ 20%，避免艳俗；亮紫 #7E22CE 对比度约 5.9:1，只用于大字和标签，不要拿来做正文
• 不要紫字配紫底、蓝字配蓝底，这是体系里最明确的禁令
• 用户明确给出品牌规范或要求换风格时，遵循用户指令，不强行套用
• 青少儿课程 PPT 用独立的 kids-course-ppt 技能，不在本体系覆盖范围
• 深色模式不是另一套配色，而是在同一套 token 上切换 [data-theme="dark"]，青色光效一律换成蓝紫渐变