01 · 样张总览
三份样张，三种外放方式
三款均使用完全相同的文案骨架与信息顺序，只改变视觉皮肤，便于横向比较与后续选型。
02 · 三款对比
差异只有皮肤，信息架构完全一致
横向替换样张时，文案位置、卡片顺序与 CTA 位置不变，品牌记忆点不漂移。
| 维度 | A · 深色对比度修复版 | B · 全彩渐变版 | C · 科技蓝纯色版 |
|---|---|---|---|
| 背景 | 深蓝黑渐变 #0b1020 → #150e21，弱光晕 + 细网格 | 蓝紫粉渐变 #3d7bff → #ff4f9a → #ff83bd，顶部白色光雾 | 纯蓝 #103a9e，轻微明暗与细网格层次 |
| 卡片 | 深色玻璃卡 rgba(255,255,255,.05–.12) + blur 10px | 白色玻璃卡 rgba(255,255,255,.74–.92) + blur 18px + 1px 白描边 | 白色玻璃卡 rgba(255,255,255,.87–.97) + blur 16px + 1px 白描边 |
| 文字 | 白字 + 文字投影；正文 #d9deee，次要 #b9c1da | 深墨字 #15162b；正文 #1c1e33，卡片正文 #3a3f5c | 白字；标签 #dce7ff；白玻璃卡内深墨字 #101a3d |
| 按钮 / 数字 | 深品牌渐变底 + 白字，玫瑰光晕 | 墨黑底 + 白字，CTA 辅助说明加白玻璃胶囊 | 白底 #0b3fb8 亮蓝字；关键数字 #0b5cff |
| 气质关键词 | 大胆 / 科技 / 暗场冲击 | 明亮 / 外放 / 社交记忆点 | 专业 / 克制 / 可信 |
| 最适合 | 官网 Hero、技术长文配图、暗场大屏 | 朋友圈 / 小红书 / 微博封面、活动 KV | B2B 提案、销售资料、路演与行业社群 |
| 对比度实测 | 31/31 通过 AA；正文/标签最低 8.26:1 | 31/31 通过 AA；正文/标签最低 6.41:1 | 31/31 通过 AA；正文/标签最低 6.47:1 |
03 · 对比度说明
对比度不是感觉，是算出来的
三款样张的关键文字全部按 WCAG 2.x 相对亮度公式实测。流程：Playwright 以 @2x 渲染样张 → 隐藏文字再截一张“只有背景”的图 → 两张图差分定位文字真正着墨的像素 → 逐像素计算对比度，取 2% 分位作为保守最差值。
深色版严格执行 DESIGN_SYSTEM.md 第 2 节：标题文字投影、正文 #d9deee、次要文字 #b9c1da、装饰光斑透明度 ≤ 0.5，并给 Hero 文字列加深色遮罩。
1固定 540×960 舞台，Chromium dpr=2 截图，动效冻结，避免排版抖动。
2第二遍将文字颜色设为透明（不改布局），得到文字后方包含渐变、玻璃、光晕的真实合成底色。
3A/B 差分定位着墨像素，用前景色与该像素底色计算对比度。
4按字号区分门槛：正文 ≥4.5:1，大字（≥24px 或 ≥18.66px 粗体）≥3:1。
WCAG 相对亮度与对比度公式
L = 0.2126·R + 0.7152·G + 0.0722·B
R/G/B 为 sRGB 通道线性化后的值
对比度 = (L_亮 + 0.05) / (L_暗 + 0.05)
取值 1:1–21:1，数值越大越清晰
4.5:1正文 / 小字 AA 门槛
3:1大字 AA 门槛
| 深色版关键文字（修复前 → 修复后） | 修复前基线 | 修复后实测 | 结论 |
|---|---|---|---|
| Hero 主标题后方合成底色 | #131632（光晕强、无投影） | #0a0e1b（光晕减弱 + 暗色遮罩） | 光晕压字风险显著下降 |
| 数据条标签（10.5px） | 3.88–4.18（未达 AA） | 8.28–8.99（通过） | 灰字提亮 #7b839c → #b9c1da |
| 卡片正文（13px） | 3.96–4.89（部分未达 AA） | 9.46–10.57（通过） | 正文提亮 #8f97b2 → #d9deee |
| CTA 辅助说明（11.5px） | 3.97（未达 AA） | 8.35（通过） | 次要文字 #7b839c → #b9c1da |
| 页脚品牌水印（12px） | 4.43（未达 AA） | 9.29（通过） | 水印文字提亮 |
| 全部 31 项审计文字 | 10 项未达 AA | 0 项未达 AA | 深色版全量通过 AA |
注：修复前数值由“修复前基线”诊断夹具实测——按问题描述复刻的无投影、深灰字（#8f97b2 / #7b839c）、强光晕（opacity .5 / blur 70px）参数，用于量化修复幅度；并非仓库历史文件原值。
A · 深色修复版
31/31 通过 AA
正文/标签最低 8.26:1 ｜ 全页最低 5.37:1（19px 粗体编号，门槛 3:1）
B · 全彩渐变版
31/31 通过 AA
正文/标签最低 6.41:1 ｜ 全页最低 4.69:1（12px 页脚水印，门槛 4.5:1）
C · 科技蓝版
31/31 通过 AA
正文/标签最低 6.47:1 ｜ 全页最低 4.41:1（27px 数据条数字，门槛 3:1）
04 · 选择建议
按渠道选气质，而不是三选一
三款可以并行使用：主站用 A 保持品牌张力，社媒用 B 抢注意力，B2B 触点用 C 建立可信感。
选 A · 深色修复版
需要品牌张力和暗场高级感，同时要求长文、注释、数据都清晰可读。
- 官网首页 Hero / 品牌落地页
- 知乎长文、B 站封面与配图
- 发布会暗场大屏、LED 屏
选 B · 全彩渐变版
需要一眼抓住注意力、愿意被转发，明亮渐变比纯暗色更适合信息流缩略图。
- 朋友圈 / 小红书 / 微博封面
- 活动 KV、社群裂变海报
- 需要“明亮、年轻、有记忆点”的场景
选 C · 科技蓝版
需要传递稳定、专业、可合作信号，让客户第一眼觉得“这家公司靠谱”。
- B2B 官网、销售提案与报价附件
- 路演 / 招商 / 行业峰会材料
- 脉脉、LinkedIn 等专业社群