{
  "version": "2.2.0",
  "updated": "2026-09-29",
  "name": "PersonalWeb · Web VI",
  "reference": {
    "task": "AriadneVI",
    "threadId": "01a08520-ae7b-7ed3-882b-ed4e5a69cb77",
    "manifestUpdated": "2026-09-10",
    "sha256": "55d563ff9d2468e373f7730f9b53e2867c0d83270a3e8164953f5b7d52c85943",
    "scope": "图标几何延续既有母版；字体与颜色由 PersonalWeb 的内容、调性及用户 2026-09-16 的选择决定。"
  },
  "tokens": [
    {
      "name": "--vi-canvas",
      "value": "#fafafa",
      "group": "color",
      "label": "中性白 · 页面底色"
    },
    {
      "name": "--vi-surface",
      "value": "#ffffff",
      "group": "color",
      "label": "白色表面 / 深底文字"
    },
    {
      "name": "--vi-ink",
      "value": "#111111",
      "group": "color",
      "label": "中性黑 · 主要文字"
    },
    {
      "name": "--vi-muted",
      "value": "#666666",
      "group": "color",
      "label": "灰色 · 辅助说明"
    },
    {
      "name": "--vi-text-secondary",
      "value": "#666666",
      "group": "color",
      "label": "可读次要文字"
    },
    {
      "name": "--vi-line",
      "value": "#d9d9d9",
      "group": "color",
      "label": "轻分隔线"
    },
    {
      "name": "--vi-action",
      "value": "#111111",
      "group": "color",
      "label": "黑色 · 主操作"
    },
    {
      "name": "--vi-action-hover",
      "value": "#333333",
      "group": "color",
      "label": "深灰 · 悬停层次"
    },
    {
      "name": "--vi-focus",
      "value": "#2447d8",
      "group": "color",
      "label": "群青 · 唯一强调色"
    },
    {
      "name": "--vi-processing",
      "value": "#2447d8",
      "group": "color",
      "label": "群青 · 动态点与进度标记"
    },
    {
      "name": "--vi-conversation",
      "value": "#f2f2f2",
      "group": "color",
      "label": "浅灰 · 图片容器"
    },
    {
      "name": "--vi-dialog",
      "value": "#ffffff",
      "group": "color",
      "label": "白色 · 浮层"
    },
    {
      "name": "--vi-danger",
      "value": "#111111",
      "group": "color",
      "label": "黑色 · 以文字明确移除动作"
    },
    {
      "name": "--vi-error",
      "value": "#111111",
      "group": "color",
      "label": "黑色 · 以文字说明错误"
    },
    {
      "name": "--vi-warning",
      "value": "#666666",
      "group": "color",
      "label": "灰色 · 以文字说明注意事项"
    },
    {
      "name": "--vi-folder-back",
      "value": "#e8e8e8",
      "group": "color",
      "label": "浅文件夹背板"
    },
    {
      "name": "--vi-folder-front",
      "value": "#fafafa",
      "group": "color",
      "label": "浅文件夹正面"
    },
    {
      "name": "--vi-folder-transition",
      "value": "#ededed",
      "group": "color",
      "label": "文件夹展开过渡"
    },
    {
      "name": "--vi-folder-paper-back",
      "value": "#f0f0f0",
      "group": "color",
      "label": "后层纸张"
    },
    {
      "name": "--vi-folder-paper-mid",
      "value": "#f5f5f5",
      "group": "color",
      "label": "中层纸张"
    },
    {
      "name": "--vi-site-background",
      "value": "#000000",
      "group": "color",
      "label": "官网视频与深色叙事背景"
    },
    {
      "name": "--vi-font-ui",
      "value": "\"Bricolage Grotesque\", \"PersonalWeb Han\", \"Source Han Sans SC\", sans-serif",
      "group": "type",
      "label": "英文 Bricolage Grotesque；中文思源黑体，本站子集优先"
    },
    {
      "name": "--vi-font-mono",
      "value": "var(--vi-font-ui)",
      "group": "type",
      "label": "数值和变量同样使用统一字体"
    },
    {
      "name": "--vi-icon-small",
      "value": "20px",
      "group": "geometry",
      "label": "常规图标"
    },
    {
      "name": "--vi-icon-inline",
      "value": "14px",
      "group": "geometry",
      "label": "行内图标"
    },
    {
      "name": "--vi-target",
      "value": "44px",
      "group": "geometry",
      "label": "独立图标操作热区"
    },
    {
      "name": "--vi-inverse-text",
      "value": "var(--vi-surface)",
      "group": "alias",
      "label": "深底主文"
    },
    {
      "name": "--vi-inverse-secondary",
      "value": "var(--vi-line)",
      "group": "alias",
      "label": "深底次要文字"
    },
    {
      "name": "--vi-inverse-muted",
      "value": "color-mix(in srgb, var(--vi-line) 72%, var(--vi-ink))",
      "group": "alias",
      "label": "深底弱说明"
    },
    {
      "name": "--vi-inverse-line",
      "value": "var(--vi-action-hover)",
      "group": "alias",
      "label": "深底分隔线"
    },
    {
      "name": "--vi-canvas-clear",
      "value": "color-mix(in srgb, var(--vi-canvas) 0%, transparent)",
      "group": "alias",
      "label": "同色透明渐变端点"
    },
    {
      "name": "--vi-overlay",
      "value": "color-mix(in srgb, var(--vi-dialog) 96%, transparent)",
      "group": "alias",
      "label": "浮层纸面"
    },
    {
      "name": "--vi-backdrop",
      "value": "color-mix(in srgb, var(--vi-ink) 70%, transparent)",
      "group": "alias",
      "label": "对话框遮罩"
    },
    {
      "name": "--vi-shadow",
      "value": "0 20px 60px color-mix(in srgb, var(--vi-ink) 8%, transparent)",
      "group": "effect",
      "label": "浮层阴影"
    },
    {
      "name": "--vi-shadow-soft",
      "value": "rgba(17,17,17,.10)",
      "group": "color",
      "label": "中性空间阴影"
    },
    {
      "name": "--vi-shadow-medium",
      "value": "rgba(17,17,17,.22)",
      "group": "color",
      "label": "中性空间阴影"
    },
    {
      "name": "--vi-shadow-clear",
      "value": "rgba(17,17,17,0)",
      "group": "color",
      "label": "中性空间阴影"
    },
    {
      "name": "--vi-motion-exit",
      "value": "220ms",
      "group": "motion",
      "label": "跨页离场"
    },
    {
      "name": "--vi-motion-enter",
      "value": "620ms",
      "group": "motion",
      "label": "页面入场"
    },
    {
      "name": "--vi-motion-exit-phone",
      "value": "160ms",
      "group": "motion",
      "label": "手机离场"
    },
    {
      "name": "--vi-motion-enter-phone",
      "value": "320ms",
      "group": "motion",
      "label": "手机入场"
    },
    {
      "name": "--vi-motion-ease",
      "value": "cubic-bezier(.22,1,.36,1)",
      "group": "motion",
      "label": "入场缓动"
    },
    {
      "name": "--vi-motion-exit-ease",
      "value": "cubic-bezier(.65,0,.35,1)",
      "group": "motion",
      "label": "离场缓动"
    },
    {
      "name": "--vi-motion-distance",
      "value": "18px",
      "group": "motion",
      "label": "内容入场位移"
    }
  ],
  "icons": [
    {
      "name": "chevron-left",
      "body": "<path d=\"M15 5.5 8.5 12 15 18.5\"/>",
      "stroke": 2.4,
      "label": "返回",
      "usage": "返回上一级 / 回到原卡片；不用长杆左箭头"
    },
    {
      "name": "chevron-right",
      "body": "<path d=\"M9 5.5 15.5 12 9 18.5\"/>",
      "stroke": 2.4,
      "label": "前往",
      "usage": "继续、进入下一层"
    },
    {
      "name": "chevron-down",
      "body": "<path d=\"M5.5 9 12 15.5 18.5 9\"/>",
      "stroke": 2.4,
      "label": "展开",
      "usage": "选择器；展开时旋转 180°"
    },
    {
      "name": "close",
      "body": "<path d=\"M6.5 6.5l11 11M17.5 6.5l-11 11\"/>",
      "stroke": 1.8,
      "label": "关闭",
      "usage": "关闭浮窗 / 取消临时界面；不代表删除数据"
    },
    {
      "name": "plus",
      "body": "<path d=\"M12 5v14M5 12h14\"/>",
      "stroke": 1.8,
      "label": "添加",
      "usage": "新增资料、职位、展开 FAQ"
    },
    {
      "name": "minus",
      "body": "<path d=\"M5 12h14\"/>",
      "stroke": 1.8,
      "label": "收起",
      "usage": "收起 FAQ；不代表删除"
    },
    {
      "name": "send",
      "body": "<path d=\"M12 18V6M7.5 10.5 12 6l4.5 4.5\"/>",
      "stroke": 1.8,
      "label": "发送",
      "usage": "仅用于提交对话；忙碌时由加载圈替换"
    },
    {
      "name": "check",
      "body": "<path d=\"M6.5 12.5 10.3 16.3 17.7 8.4\"/>",
      "stroke": 2.6,
      "label": "已选择",
      "usage": "选择器选中；不暗示事实经过外部核验"
    },
    {
      "name": "arrow-up-right",
      "body": "<path d=\"M6 18 18 6M6 6h12v12\"/>",
      "stroke": 1.8,
      "label": "跳转",
      "usage": "介绍页行动链接；外部链接仍需文字说明"
    },
    {
      "name": "arrow-down",
      "body": "<path d=\"M12 5v14m-6-6 6 6 6-6\"/>",
      "stroke": 1.8,
      "label": "向下",
      "usage": "同页跳转下方内容"
    },
    {
      "name": "arrow-up",
      "body": "<path d=\"M12 19V5m-6 6 6-6 6 6\"/>",
      "stroke": 1.8,
      "label": "回到顶部",
      "usage": "同页回到顶部；不要替代发送图标"
    },
    {
      "name": "check-circle",
      "body": "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m8.5 12 2.3 2.3 4.8-5\"/>",
      "stroke": 2,
      "label": "操作完成",
      "usage": "连接完成等技术状态；必须配状态文字"
    },
    {
      "name": "loader",
      "body": "<path d=\"M12 3a9 9 0 1 0 9 9\"/>",
      "stroke": 2,
      "label": "等待",
      "usage": "过程图形；减少动效时保留文字和忙碌状态"
    },
    {
      "name": "sliders",
      "body": "<path d=\"M4 7h5m4 0h7M4 17h9m4 0h3M9 4v6m4 4v6\"/>",
      "stroke": 1.8,
      "label": "调节",
      "usage": "ASCII 波纹调节；现有入口保持"
    },
    {
      "name": "menu",
      "body": "<path d=\"M5 8h14M5 16h14\"/>",
      "stroke": 1.8,
      "label": "导航菜单",
      "usage": "窄屏导航；现有两条线 CSS 为对应实现"
    },
    {
      "name": "grid",
      "body": "<rect x=\"4\" y=\"4\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"14\" y=\"4\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"4\" y=\"14\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"14\" y=\"14\" width=\"6\" height=\"6\" rx=\"1\"/>",
      "stroke": 1.8,
      "label": "总览",
      "usage": "返回全部项目或作品总览"
    }
  ],
  "colorRevision": {
    "date": "2026-09-16",
    "request": "黑白灰＋单色，选择群青，项目已有颜色保持原样",
    "decision": "网站唯一强调色 #2447D8；表面、文字与空间层次使用中性黑白灰。群青为本站屏幕适配值，不是历史颜料的标准 HEX。深底小字保持白灰；需要群青文字时使用浅色衬底。"
  },
  "typography": {
    "latin": "Bricolage Grotesque",
    "cjk": "思源黑体 · 简体中文",
    "license": "SIL Open Font License 1.1",
    "width": 100,
    "displayWeight": 600,
    "bodyWeight": 400,
    "decision": "常规宽度，自动光学尺寸；标题 500–600，正文 400。全站 DOM、图注、导航、数值与画布文字统一。",
    "source": "https://ateliertriay.github.io/bricolage/",
    "cjkSource": "https://github.com/adobe-fonts/source-han-sans"
  },
  "interface": {
    "iconFirst": {
      "principle": "图标优先，文字从简。",
      "rule": "返回、关闭、前后切换、菜单等含义明确的操作只显示统一 VI 图标，不重复添加可见文字；图标无法清楚表达含义时保留必要短标签。",
      "accessibility": "图标按钮保留准确的 aria-label、键盘焦点和足够的点击区域，辅助说明不常驻页面。",
      "scope": "精简操作与导航中的冗余文字，保留正文、作品名称及必要内容。",
      "controlSize": "24 × 24 母版；常规显示 20 px，最小点击区域 44 × 44 px。透明、无边框。",
      "labels": "含义明确的返回、关闭、菜单、前后切换、查看和展开只显示图标。链接目标、项目名称、语言选择及必要错误说明保留简短文字。",
      "component": "使用 vi-icon-control 和共享 data-icon；语言切换只更新 aria-label，不覆盖图标。"
    },
    "pageMotion": {
      "principle": "每个页面入口、页面切换与返回都提供连续、柔和的过渡。",
      "sequence": "旧页面淡出，目的页面内容与位置就绪后淡入；桌面内容可轻微上移。",
      "timing": "桌面离场 220ms、入场 620ms；手机离场 160ms、入场 320ms，以透明度为主。",
      "ownership": "既有首页、设备、图像桥接和 Project 环形开场保留专属时序，不叠加第二套入场。",
      "history": "返回保留来源、所选项目、阅读位置与焦点；缓存恢复只淡入，不重播加载开场。",
      "accessibility": "减少动态效果时直接呈现；保留键盘、触摸、修饰键新标签与下载的原生行为。",
      "resilience": "取消或失败不得留下透明、不可交互的页面；恢复时清理动画和锁定。",
      "implementation": "vi/page-motion.js 为跨文档导航提供共享离场和入场。页面内部转场继续由各模块负责。"
    }
  },
  "exceptions": [
    {
      "scope": "home/greeting-palette.js",
      "reason": "用户明确保留首页临时文字扰动的黄、淡紫、橙、橄榄绿；静态文字和其他界面继续遵循 VI。"
    },
    {
      "scope": "transition/device-palette.js",
      "reason": "设备材质保持真实表现；网站控件仍使用共享 VI。"
    },
    {
      "scope": "photography/gallery.css",
      "reason": "摄影返回按钮保持透明反色以适应照片；统一图标和点击区域。"
    }
  ]
}