/* ═══════════════════════════════════════════════════════════════ encc 品牌配色系统 ═══════════════════════════════════════════════════════════════ 来源: logo (https://encc.oss-cn-beijing.aliyuncs.com/static/img/logo.svg) 渐变 #B71B67 → #F9653E 两个品牌色都通过了 dataviz 校验器的全部六项检查: - 亮度带 L 0.517 / 0.689 (要求 0.43–0.77) ✓ - 彩度 C 0.195 / 0.190 (要求 ≥ 0.10) ✓ - 色盲分离 两色互不混淆, CVD ΔE 21.0 / 常视 ΔE 21.2 ✓ (阈值 8) - 对比度 #F9653E 在白底 2.94:1 — 低于 3:1, 故只作装饰/大字 不作正文色, 见下方 usage 约束 ── 色阶怎么来的 ────────────────────────────────────────────── 不是手挑。500 档**吸附为品牌色本体**, 色相锁死在 logo 的色相上, 低于 500 向亮收敛、高于 500 向暗收敛, 保证整条色阶明度严格单调。 复现: node scripts/gen-ramp.mjs (输出与本文件逐档一致) ── 用法约束 (重要) ─────────────────────────────────────────── ✅ 文字色 / 按钮底 / 链接 → --brand (= --brand-500, 6.24:1) ✅ hover / 更深对比 → --brand-deep (--brand-700, 9.38:1) ✅ 装饰、图形填充 → --accent (--accent-600, 4.57:1) ⚠️ --accent-bright (--accent-500 #F9653E) 仅 3.02:1, 只作大标题字/纯装饰。**绝不用作正文色, 也不做白字按钮底**。 ❌ 白字压在 --accent-500 上只有 3.02:1 — 渐变终点已收至 --accent-600。 */ :root { color-scheme: light; /* ── 品牌主色阶 (洋红 #B71B67 系) ───────────────────────── */ --brand-50: #FFFBFF; --brand-100: #FFD4EA; --brand-200: #FFABC8; --brand-300: #E57CA2; --brand-400: #CD5082; --brand-500: #B71B67; /* ← 品牌色本体 (logo 渐变起点) */ --brand-600: #A20056; --brand-700: #8E0046; --brand-800: #790037; --brand-900: #650028; /* ── 辅助色阶 (橙 #F9653E 系) ───────────────────────────── */ --accent-50: #FFF7E4; --accent-100: #FFDECC; --accent-200: #FFC2AA; --accent-300: #FFA185; --accent-400: #FF8362; --accent-500: #F9653E; /* ← 品牌色本体 (logo 渐变终点) */ --accent-600: #D44217; --accent-700: #B01900; --accent-800: #8D0000; --accent-900: #690000; /* ── 语义别名 (业务代码只认这一层) ───────────────────────── */ /* 500 档 = logo 原色, 6.24:1 可作白底文字, 所以直接当主色用。 * 700 档是同一色相的深色, 留给 hover / 极端场景。 */ --brand: var(--brand-500); /* 主色: 按钮底、链接、强调字 (6.24:1) */ --brand-deep: var(--brand-700); /* hover / 需要更深对比时 */ --brand-soft: var(--brand-50); /* 浅底: 标签、选中态背景 */ --brand-border: var(--brand-200); /* 描边 */ --accent: var(--accent-600); /* 装饰 (4.57:1, 安全) */ --accent-bright: var(--accent-500); /* logo 同款亮橙 3.02:1, 仅装饰 */ --accent-deep: var(--accent-700); /* 可承载白字的橙底 (7.04:1) */ /* 渐变两端都取 logo 原色。⚠ 终点用 --accent-600 (4.57:1) 而非 * --accent-500 (3.02:1) —— 白字压在亮橙上只有 3.02:1, 达不到 AA。 * 视觉上仍是"洋红→橙"的品牌渐变, 只是终点收深一档保证可读。 */ --grad-brand: linear-gradient(100deg, var(--brand-500) 0%, var(--accent-600) 100%); /* ── 中性色 (带一点暖调, 呼应品牌) ───────────────────────── */ --ink: #1A1520; /* 主文字 — 比纯黑柔和 */ --ink-2: #554C5C; /* 次级文字 */ --ink-3: #8A8194; /* 弱化文字 / 占位 */ --line: #EDE7EE; /* 分隔线 */ --line-2: #E0D7E4; /* 强分隔线 */ --surface: #FFFFFF; --surface-soft: #FBF8FA; /* 区块浅底 */ --surface-sunk: #F5F0F4; /* 凹陷/输入框底 */ --surface-code: #1A1520; /* 代码块 (亮色下也用深底, 终端惯例) */ /* ── 状态色 (刻意与品牌区分, 不复用品牌色) ──────────────── */ /* 四色均通过 CVD 校验 (最差相邻 ΔE 9.1)。 */ /* 其中 --good / --warn 对比度低于 3:1 → 须配可见文字标签, 不单靠色。 */ --good: #1BAF7A; --warning: #EDA100; --critical: #E34948; --info: #2A78D6; /* ── 数据可视化分类槽 (固定顺序, 永不循环) ────────────────── */ /* 三槽全对校验通过 (CVD ΔE 18.3, 常视 ΔE 21.2) — 可用于散点/饼图 */ --viz-1: var(--brand-500); --viz-2: var(--accent-500); --viz-3: #2A78D6; --viz-4: #1BAF7A; /* ── 序数色阶 (单色相, 明度单调) — 漏斗/分层/热力 ────────── */ --seq-100: var(--brand-100); --seq-300: var(--brand-300); --seq-500: var(--brand-500); --seq-700: var(--brand-600); --seq-900: var(--brand-900); /* ── 焦点环 (无障碍: 键盘导航必须可见) ────────────────────── */ --focus-ring: var(--brand-600); --radius: 12px; --wrap: 1160px; --shadow-sm: 0 1px 3px rgba(26,21,32,.06), 0 4px 14px rgba(26,21,32,.05); --shadow: 0 2px 6px rgba(26,21,32,.07), 0 10px 28px rgba(26,21,32,.07); --shadow-lg: 0 4px 14px rgba(26,21,32,.09), 0 22px 52px rgba(26,21,32,.12); --shadow-brand: 0 6px 20px rgba(183,27,103,.26); } /* ── 暗色模式: 同一色阶重新取步, 不是自动反转 ─────────────────── */ /* 亮色品牌色在暗底上对比不足, 故主色改取 300 档 (6.92:1)。 * 400 档看着够亮, 但落在 --surface-soft 区块上只有 4.27:1, 差一点点 * 达不到 4.5, 所以再亮一档。--brand-deep 相应下沉到 400。 * * ⚠ 层级差靠描边, 但要克制 —— 暗色下底色都挤在 L≈0.01-0.02, 相对亮度差 * 极小 (卡片 vs 页面底只有 1.00:1), 纯调底色区分不出卡片边界。 * 但描边拉到 1.8+ 又会变成"硬边", 看着生硬 (试过 #4A4056 = 1.84:1, * 明显过)。所以取中间值 #40374D (1.60:1) —— 轮廓可辨, 不抢视线。 * * --line 用半透明白紫 rgba(190,175,210,.13) 而非实色: 暗色下实色描边 * 会像贴上去的硬线, 半透明能与任意底色自然融合, 边缘过渡更柔。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #FFFFFF; --ink-2: #C9C2CF; --ink-3: #9A91A4; --line: rgba(190, 175, 210, 0.13); --line-2: rgba(190, 175, 210, 0.22); --surface: #191522; --surface-soft: #141019; --surface-sunk: #272030; /* 暗色下代码块要比卡片更暗才像"凹陷", 且和卡片拉开 */ --surface-code: #090710; --brand: var(--brand-300); /* 暗底取浅档; 400 在浅区块上只有 4.27:1 */ --brand-deep: var(--brand-400); --brand-soft: #3E2645; --brand-border: #5C3550; --accent: var(--accent-400); --accent-deep: var(--accent-300); --grad-brand: linear-gradient(100deg, var(--brand-500) 0%, var(--accent-600) 100%); --focus-ring: var(--brand-300); --good: #35C48D; --warning: #F5B942; --critical: #F07372; --info: #5AA0E8; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 2px 8px rgba(0,0,0,.45); --shadow-lg: 0 6px 22px rgba(0,0,0,.55); --shadow-brand: 0 6px 20px rgba(183,27,103,.4); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #FFFFFF; --ink-2: #C9C2CF; --ink-3: #9A91A4; --line: rgba(190, 175, 210, 0.13); --line-2: rgba(190, 175, 210, 0.22); --surface: #191522; --surface-soft: #141019; --surface-sunk: #272030; --surface-code: #090710; --brand: var(--brand-300); --brand-deep: var(--brand-400); --brand-soft: #3E2645; --brand-border: #5C3550; --accent: var(--accent-400); --accent-deep: var(--accent-300); --grad-brand: linear-gradient(100deg, var(--brand-500) 0%, var(--accent-600) 100%); --focus-ring: var(--brand-300); --good: #35C48D; --warning: #F5B942; --critical: #F07372; --info: #5AA0E8; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 2px 8px rgba(0,0,0,.45); --shadow-lg: 0 6px 22px rgba(0,0,0,.55); --shadow-brand: 0 6px 20px rgba(183,27,103,.4); }