暖白纸感、克制描边，
与一套自己会说真话的规范页。

主色板建立在暖白纸底（--v-bg）+ 深墨（--v-ink）+ 朱砂强调 （--v-accent）之上。V3 相比上一代的实质变化：每个前景色都实测过对 --v-bg 的 WCAG 对比度，注释直接写在 v3-tokens.css 里，不是拍脑袋定的。下面所有色块与数值 由脚本现场 getComputedStyle 读取，改了 token 这页立刻跟着变。

主按钮/徽章一律用 var(--v-on-accent) 做前景色，不要写死 #fff—— 这是 V3 修过的一处真缺陷：暗色下 --v-accent 是浅珊瑚色，白字压上去只有 2.61:1， 几乎看不清。--v-on-accent 会随主题翻转成深墨，两种主题下都保持 6.3:1 以上。

--v-ink4 是 V3 修过的第二处真缺陷：原值 #8B837A 实测只有 3.57:1，却被用在 9–10.5px 的微标签上，低于 AA 的 4.5:1。 已加深到 #6E665C（5.41:1），暗色同步提亮到同一档可读性。 --v-line/--v-line2 是描边色不是文字色，表格里的 ⚠ 只是通用阈值判断， 不代表真的不合格——WCAG 的 4.5:1 门槛本来就不适用于非文字元素。

五个字体族与上一代一致，未变：西文无衬线 Inter Tight、中文无衬线 Noto Sans SC / PingFang SC、西文衬线 Source Serif 4、中文衬线 Noto Serif SC / Songti SC（标题）、等宽 JetBrains Mono（索引/徽标/数据）。

已知缺口，原样还在：全站仍从 fonts.googleapis.com 拉字体，仓库零本地字体文件——大陆网络下这条链路不可靠， 真正兜住排版的是系统字体 PingFang SC。自托管子集是待办，V3 没有解决这个问题。

V3 没有一份 --fs-* 字号阶——各组件各写各的 px 值： hero 标题 clamp(2.2rem,4.6vw,3.4rem)、区块标题 2rem、卡片标题 1.04–1.24rem、正文 13.5–16.5px、mono 微标签 9–11px。 能用，但没有阶——这是留给下一步的治理项，不在这里假装它已经存在。

V3 新增，上一代没有这一层。v3-ui.js 没有引入图标库，而是用三种基本元件 自建了一套语法——圆＝思想、线＝路径、方＝结构，对应"把想法拆成原子、连成路径、搭成结构"这件事 本身。24 网格、1.7px 描边、圆头圆角、不填充。原文注释："通用图标表达通用定位，这个站不是通用的。"

V3 新增，上一代完全没有这一层。assets/mascot/ 是一套完整的人物系统—— 12 个姿势、6 个表情、42 个场景语境，另有一只电子宠物（8×11/73 帧图集，16 个方向，10 域 80 个 语义状态，接了 prefers-reduced-motion）。

已知缺口：整套系统零暗色模式—— qiu-mascot.css / qiu-pet.css 里没有一处 data-theme 或 prefers-color-scheme，深色页面上浅底透明资产会露白。目前唯一的真实接入点 是右下角悬浮聊天按钮（下方示例）；12 个姿势和电子宠物的绝大多数仍停在自己的演示页 mascot-system.html 上，没有进正式页面——下面先把系统本身展示全，接入点是下一步。

方形头像卡是裁切出来的局部；姿势是全身像，方裁会砍掉腿——单独用 2:3 竖版卡片， 真实素材原图就是 1024×1536。

73 帧精灵图集 · 16 个朝向 · 10 域 80 个语义状态 （idle/running/waving/jumping/failed/waiting/review 等）· 已接 prefers-reduced-motion，减弱动态时定格在当前动画首帧。 左图是 idle 状态第一帧的静态截图——这份文档没有嵌入真正跑动的精灵动画， 运行时靠 qiu-pet.js + qiu-pet.css，跟 v3-shell.css 同时加载会不会打架没验证过，所以这里只如实放一张静帧，不冒充"已验证可嵌入"。

2026-08-10 迭代到第四版：圆点 → 头像 → 脸部特写裁切 → 极简圆形头像，反馈是 "不要仅仅是头像"——圆形裁切再怎么调，露出的始终只是一张脸。换成 welcome 姿势的全身像， 不裁成任何形状，站在角落，更像一个真的站在那里等你的人。药丸上常驻的文字仍然收在 hover/键盘 focus 才弹出的提示条里（下面这个示例真的可以 hover）； aria-label 常驻，屏幕阅读器不受影响。素材从 780KB 的原图裁到 320px 高、11KB 的小图。

跟我聊聊

来自 v3-shell.css：a:focus-visible, button:focus-visible {outline:2px solid var(--v-accent);outline-offset:3px}。用 Tab 键聚焦下面这个按钮看效果—— 鼠标点击不会触发，这是 :focus-visible 的设计。

系统开启"减少动态效果"时：v3-shell.css 关闭全站过渡与动画 （压到 .001ms，不是 0——避免某些浏览器把 0s 动画的 animationend 事件吞掉）；电子宠物额外接了同一条媒体查询，自动停留在当前动画首帧。

见第 01 节表格——V3 相比上一代的实质差异就是每一个色值都实测过， 不是延续一份从未验证的旧规范。--v-accent-2（次强调）对比度刚过 AA（4.68:1）， 仍然只用于大字/图形，不做小字，这条约束延续自上一代。

这一节最容易过时，所以按日期钉死当前真实状态，而不是写一份理想图。 虚线边框 = 已知债务，不是设计意图。

以上七节是对外的公开站。内部管理后台是完全独立的另一套视觉体系——深墨内壳、 legacy 令牌命名，靠 assets/ws-shell.js 给 25 个页面套一个三栏外壳（左导航栏 + 中内容区 + 右 AI 助理面板）。挤在同一份 V3 令牌文档里会显得不伦不类，2026-08-10 拆成了独立页面 ——那份文档本身就是一个真实的工作台页面，用真实 ws-shell.js 渲染，不是在这里复刻样子。