/* ══════════════════════════════════════════════════════════════════ 悟垣设计系统 · brand token —— **唯一色源** 照抄自《悟垣设计系统手册 v1.5》(locked 2026-09-01)，一个字没改。规矩: 组件里不要写死色值字面量, 一律引用变量。要改颜色只能改这个文件 —— 改完全站跟着走。本仓库是**启明 story** 这条线, 所以上挂 `is-story`; 着色底(wx-tinted)只在产品自己的外壳上生效, 跨产品界面回纯中性。 base.html 里那套旧语义名(--ink / --card / --ember ...)现在全部指向这里的 --wx-*, 44 个模板不用动。别在别处再定义一份。 ══════════════════════════════════════════════════════════════════ */ /* 悟垣品牌 token —— 唯一色源。两个仓库共用：wutrix-internal（官网）与 wutrixstudio（产品）。组件里不要写死色值字面量，一律引用变量。版本 1.3 · 2026-09-01（识别 / 色 / 字体 / 底定版；间距 · 字阶 · 动效 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; /* ── 间距 · 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; /* ── 字号阶梯（第三章）·九档，半像素值一律不用 ── */ --wx-fs-xs: 11px; /* 角标、mono 标签 */ --wx-fs-sm: 12px; /* 辅助说明 */ --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; } /* ══ 浅色主题（第五章 · 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); --wx-studio-text: var(--wx-studio-on-light); }