/* ══════════════════════════════════════════════════════════════════ 悟垣设计系统 · brand token —— **唯一色源** 照抄自《悟垣设计系统手册 v1.9》(locked 2026-09-01, v1.9 2026-09-07)，一个字没改。规矩: 组件里不要写死色值字面量, 一律引用变量。要改颜色只能改这个文件 —— 改完全站跟着走。本仓库是**启明 story** 这条线, 所以上挂 `is-story`; 着色底(wx-tinted)只在产品自己的外壳上生效, 跨产品界面回纯中性。 base.html 里那套旧语义名(--ink / --card / --ember ...)现在全部指向这里的 --wx-*, 44 个模板不用动。别在别处再定义一份。 ══════════════════════════════════════════════════════════════════ */ /* 悟垣品牌 token —— 唯一色源。母版在 wutrix-internal。副本：wutrix-studio（成象）、wutrix-story（启明）。天枢与分光尚未接入 —— 见 docs/design-system.md 第 15 章。组件里不要写死色值字面量，一律引用变量。版本 1.9 · 2026-09-07（识别 / 色 / 字体 / 底定版；间距 · 字阶 · 动效 v0.1） */ :root { /* ── 母品牌 ─────────────────────────────── */ --wx-gold: #F8B450; /* 品牌金 · 母标右笔、主行动按钮 */ --wx-gold-lt: #FCC368; --wx-gold-dk: #E89C2C; --wx-gold-rgb: 248,180,80; /* ── 四条产品线 ─────────────────────────── */ /* 启明 story · 朱 · 破晓。色相 17.3° 与品牌金差 18.4°，是暖色区能拿到的最大值；同时下压明度与饱和度才真正分得开。 */ --wx-story: #F0703C; --wx-story-lt: #F58F66; --wx-story-dk: #D2551F; --wx-story-rgb: 240,112,60; /* 成象 studio · 紫。色相 252.0° —— 取自产品仓库 tailwind.config.ts 的 accent */ --wx-studio: #7C5CFC; --wx-studio-lt: #9B7CFC; /* 产品内的 hover 值 */ --wx-studio-dk: #6844E0; --wx-studio-rgb: 124,92,252; /* 天枢 flow · 电青。色相 186.5° —— 取自 flow 字标 */ --wx-flow: #3FB2C0; --wx-flow-lt: #57C3D0; --wx-flow-dk: #2A8B98; --wx-flow-rgb: 63,178,192; /* 分光 color · 品红。色相 331.9° 原为青绿 #4FD6C6，与天枢只差 12.9°，两标并排分不开；移到品红后最小色相间隔 45.4°，同时对上调色里绿—品红那根染色轴。 */ --wx-color: #E85D9E; --wx-color-lt: #F084B8; --wx-color-dk: #C9407F; --wx-color-rgb: 232,93,158; /* ── 中性 · N3 中性墨（2026-09-01 定版）─── 四个产品色横跨 17°/186°/252°/332°，底必须近中性，否则会偏袒某条线。实测：三种候选底的对比度极差只差 0.14，可读性不构成依据，色调才是。 */ --wx-ink: #0B0D12; /* 页面底 */ --wx-surface: #141821; /* 一级面板 */ --wx-card: #1B2029; /* 二级卡片 */ --wx-card-soft: #151922; --wx-border: #2A313D; --wx-border-soft: #202630; --wx-paper: #E8EFF5; /* 正文 */ --wx-paper-soft: #B8C5D0; --wx-muted: #7A8A98; /* 说明文字 */ --wx-muted-n3: #808A9B; /* 成象紫做文字不过 AA（4.44 < 4.5），文字场景一律用这个 */ --wx-studio-text: #9B7CFC; /* ── 产品线着色底 · 混入 4%（第二章 · 已定 2026-09-01）── 把中性底按 4% 混入该产品线自己的色，底 / 面板 / 卡片 / 边框同比例一起混。实测：正文对比 16.00–16.27（中性底 16.75），产品色在自己底上掉 3–5%，四个底彼此 ΔE 2.8–5.9 —— 单看认不出，并排能看出。7% 是上限，10% 不再是一家。基准已定 N3，下列色值即由 N3 混入 4% 算得。站点四个产品页在用，首页保持纯 N3。两条硬约束： ① 跨产品语境（官网首页产品矩阵、四条线并列的任何界面）一律用纯中性底， tint 只在单个产品自己的应用内生效。否则一个页面里出现四种底。 ② 成象的紫本来就卡在 4.44 不过 AA，往紫底偏之后变成 4.31 —— 越偏越差。无论 tint 与否，成象文字一律走 --wx-studio-text。 */ --wx-ink-story: #141114; --wx-surface-story: #1D1C22; --wx-card-story: #24232A; --wx-border-story: #32343D; --wx-ink-studio: #10101B; --wx-surface-studio: #181B2A; --wx-card-studio: #1F2231; --wx-border-studio: #2D3345; --wx-ink-flow: #0D1419; --wx-surface-flow: #161E27; --wx-card-flow: #1C262F; --wx-border-flow: #2B3642; --wx-ink-color: #141018; --wx-surface-color: #1C1B26; --wx-card-color: #23222E; --wx-border-color: #323341; /* ── 语义色（与产品线识别色分开，不可混用）── */ --wx-danger: #D26B6B; --wx-danger-soft: rgba(210,107,107,.08); --wx-ok: #5FBF8F; --wx-warn: #E0A340; /* 「进行中」—— 第五档。这一档是成象仓提出来的，理由站得住：上面四档说的都是**结果**（成了 / 该注意 / 坏了 / 中性），没有一档说「还在跑」。而生成类产品里一次任务要跑几十秒到几分钟，那段时间是用户盯着看的主要状态。缺了它的下场是具体的：成象代码里曾随手抄了四处 Tailwind 的 blue-400，于是产品里出现一个和体系毫无关系的蓝。选值的两条约束（数字是本仓库复核过的）： · 和成象紫 #7C5CFC（色相 252°）拉得开。blue-400 #60A5FA 是 213°，只差 39°，小字号下两者会混；#5AA9D6 是 202°，拉开到 50°。 · 过 AA 正文。对成象三档底（#10101B / #181B2A / #1F2231）分别是 7.27 / 6.57 / 6.07，和 ok(8.40) danger(5.45) 同一区间。注意它是**语义色不是身份色**：进度条用 --wx-busy，不要用 --wx-pc。身份色只表「属于哪条线」，而「还在跑」是状态 —— 拿产品色画它，天枢的进度是青、分光的是品红，同一个状态在四条线里长四个样。 */ --wx-busy: #5AA9D6; --wx-busy-lt: #82C3E4; --wx-busy-soft: rgba(90,169,214,.10); /* ── 间距 · 4px 栅格（第三章）─────────────── 只有这十一档。存量的 10 / 14 / 18 / 22 / 26 不批量替换，改到哪就近归位。 */ --wx-s1: 4px; --wx-s2: 8px; --wx-s3: 12px; --wx-s4: 16px; --wx-s5: 20px; --wx-s6: 24px; --wx-s8: 32px; --wx-s10: 40px; --wx-s12: 48px; --wx-s16: 64px; --wx-s20: 80px; /* ── 字号阶梯（第三章）·十档，半像素值一律不用 ── 12 与 14 之间必须有一档：紧凑界面（画布、流程、表格）在 14 下嫌大、在 12 下嫌小，缺了这一档就会有人自己补 12.5 —— 组件层原本正是这么干的。所以 compact 是阶梯里的正式一档，不是例外。 */ --wx-fs-xs: 11px; /* 角标、mono 标签 */ --wx-fs-sm: 12px; /* 辅助说明 */ --wx-fs-compact: 13px; /* 界面正文 · 紧凑档默认（.wx-compact） */ --wx-fs-base: 14px; /* 界面正文 · 舒适档默认 */ --wx-fs-md: 15px; /* 阅读正文 */ --wx-fs-lg: 18px; /* 小标题 */ --wx-fs-xl: 22px; /* 区块标题 */ --wx-fs-2xl: 28px; /* 页面副标题 */ --wx-fs-3xl: 40px; /* 页面主标题 */ --wx-fs-hero: clamp(32px, 5vw, 56px); --wx-measure: 70ch; /* 正文行长上限 */ /* ── 动效 · 三档时长两条缓动（第四章）─────── 不要写 transition: all —— 它会连带动画 layout 属性，掉帧且难查。只动 transform 与 opacity 是最优解，二者不触发重排。 */ --wx-dur-fast: .15s; /* 状态反馈：色、透明度、边框 */ --wx-dur-base: .22s; /* 位移与尺寸 */ --wx-dur-slow: .5s; /* 入场 */ --wx-ease: cubic-bezier(.4, 0, .2, 1); --wx-ease-enter: cubic-bezier(.22, 1, .36, 1); /* ── 圆角 ───────────────────────────────── */ /* 四档，不多不少 */ --wx-radius-sm: 6px; /* 小控件 */ --wx-radius: 12px; /* 卡片 */ --wx-radius-lg: 16px; /* 面板 */ --wx-radius-pill: 999px; /* 药丸 —— 站点原有 100px / 999px 两种写法已统一 */ --wx-radius-icon: 21.9%; /* app 图标：96 网格上的 21px */ /* ── 字体 ───────────────────────────────── */ /* 定版 T17：中文思源宋 × 拉丁 Sora —— 这是「字标与大标题」的配对。界面正文另有分工：产品已自托管 Inter 并量过体积（11 KB 单片）， Inter 的小字量产品质是 Sora 达不到的，故正文走 Inter。显示体与正文体本来就该分开。 */ --wx-font-display-cn: "Noto Serif SC", "Songti SC", serif; --wx-font-display-en: "Sora", system-ui, sans-serif; /* 字标与标题 */ --wx-font-body: "Inter", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --wx-font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; /* 字标专用字距：中文 .13em，末字后要用等量负 margin 抵掉多出的一份 */ --wx-lockup-cn-ls: .13em; /* 字标中文用 900（Black）不是 700。宋体的分量全靠竖粗横细的反差，而 44px 锁版下中文只有 18.9px，700 的横画实测 0.75 CSS px —— 不足一个设备像素，抗锯齿把它抹成灰，整行就"发虚"。900 把横画抬到 1.25px，落在实像素上才画得出来。实测 900 比 700：横画 +67%、竖画 +22%、墨量 +16%。 28px 下限即使 900 横画也只有 0.75px —— 这正是下限存在的原因。 */ --wx-lockup-cn-weight: 900; /* 字标里「wutrix」那一半的颜色。深底上是品牌金 —— 金在深底上会发光，是母品牌的记号。浅底上它另有一套（见浅色块），不要直接拿 --wx-gold 去用。 */ --wx-lockup-master: var(--wx-gold); } /* ══ 浅色主题（第五章 · v0.1）══════════════════ 深色是默认，浅色用于打印、外发文档、以及系统偏好为 light 时。关键约束：**五个品牌色在浅底上全部不过 AA，必须压暗**。实测原值对 #F7F8FB：启明 2.79 · 成象 4.13 · 天枢 2.37 · 分光 3.05 · 品牌金 1.70 —— 无一及格。 -on-light 一族是压暗后的值，只压明度、色相与饱和不动。目标取 4.8 而不是 4.5：贴着线走的话，字体抗锯齿和不同屏幕的伽马很容易把实际观感推到线下。深底上不要用这一族。 */ [data-theme="light"], .wx-light{ --wx-ink: #F7F8FB; --wx-surface: #FFFFFF; --wx-card: #FFFFFF; --wx-card-soft: #F1F3F8; --wx-border: #DDE1EA; --wx-border-soft: #E9ECF3; --wx-paper: #141821; --wx-paper-soft: #3E4658; --wx-muted: #666E7D; --wx-story-on-light: #C2430F; --wx-studio-on-light: #6F4CFC; --wx-flow-on-light: #2B7882; --wx-color-on-light: #D01D71; --wx-gold-on-light: #9D6006; /* 浅底上身份色一律走 -on-light；深底那套原值在这里全部不过 4.5:1 */ --wx-story: var(--wx-story-on-light); --wx-studio: var(--wx-studio-on-light); --wx-flow: var(--wx-flow-on-light); --wx-color: var(--wx-color-on-light); /* -rgb 必须跟着上面一起换。漏了的话 rgba(var(--wx-story-rgb),.12) 这类浅底描边、浅底填充在浅色主题下仍旧用深色主题的橙 —— 不报错，只是色不对。启明仓里这么用了 13 处。build-handbook.py --check 现在会盯着这四行。 */ --wx-story-rgb: 194, 67, 15; --wx-studio-rgb: 111, 76, 252; --wx-flow-rgb: 43, 120, 130; --wx-color-rgb: 208, 29, 113; --wx-studio-text: var(--wx-studio-on-light); /* 浅底上「wutrix」走墨，不走金。两笔账： · 金 #F8B450 对浅底只有 1.70:1，看不见；压暗到 #9D6006 能到 4.81，但它和启明的朱 #C2430F 色相只差 18°、ΔE 29.9 —— 「wutrixstory」糊成一整块棕，这套字标的全部表达就是那一笔颜色分割，分割没了字标就废了一半。 · 换中性色，扫了一遍：次墨 #3E4658 对天枢的 #2B7882 只有 ΔE 27.1（都是暗蓝灰）， #242A36 / #2E3542 也不够；**只有正墨 #141821 对四条线全部 ≥ 40** （story 85.8 / studio 102.5 / flow 43.8 / color 79.0）。所以浅底上分割靠「中性 vs 彩色」而不是「暖色 vs 暖色」。印刷上本来也是这么干的：名字用墨，只有产品名上色。 --wx-gold-on-light 仍然只是定义、未启用 —— 浅色主题的行动色（按钮）还没定，那是第五章 v0.1 的未做项，和这条无关。 */ --wx-lockup-master: var(--wx-paper); }