深色剧场 · 档案式长页设计系统

用途

把一份单文件 HTML 长页做出「档案 / 剧场」的质感：全站只有一个底色，只用两枚强调色，
靠字距、hairline、层级编号和高字距标签营造精致感，靠一整套指针跟随微光与慢速过渡营造"活"的感觉。

适用于：人物专题页、艺人/品牌档案页、作品集、年度回顾、数据战绩页、企业故事长页。
不适用于：后台管理系统、电商列表页、需要明快活泼调性的营销落地页。

触发场景

• 需要做人物/品牌/项目「档案式」专题长页，且希望视觉高级、有编辑感
• 用户抱怨既有页面「模板感强、雾蒙蒙、配色乱、像套模板」
• 需要在暗色页面上实现指针跟随光效、大字漂移、点击漫开等有记忆点的动效
• 单文件 HTML 交付（无构建、无框架、可直接双击打开）

核心设计主张（六条铁律）

1. 一个底色，两个强调色。 全站底色只有一个墨黑；"分层"靠同一底色再深一档的内嵌面板，绝不靠换色块。
2. 文字是暖白不是纯白，强调是暖金不是亮黄。 禁用纯黑 #000、纯白 #fff，禁用色板外的任何杂色（常见错误：随手加一个蓝色链接色）。
3. 强调色的面积必须小。 金色只落在线、编号、年份、描边字、光晕上；朱砂红只落在印章、关键数字、当前态、主按钮上。整屏金色铺开就废了。
4. 字距是这个设计的一半。 小字号 + 超大 letter-spacing 的"标签"与超大衬线标题形成两个极端，中间不留平庸字号。
5. 一条缓动曲线走天下。 cubic-bezier(.22,.8,.2,1)，时长 .4–1.5s，永不使用弹跳/回弹缓动。慢 = 贵。
6. 动效必须可关、可兜底。 prefers-reduced-motion 全关；指针效果仅在有精细指针时启用；观察器失效时用滚动兜底，绝不允许白屏或错误数字。

工作流

1. 先定内容骨架，再写样式。 按 references/layout-recipes.md 的区块顺序列出所需 section。
   每个 section 必须有：衬线序号（01/02…）+ 英文 eyebrow + 中文标题 + 一句描述 + hairline 分隔线。
2. 复制 assets/starter.html 作为起手模板。 它包含完整的设计变量、基础排版、导航/进度条/章节索引、
   首屏、滚动带、通用区块、时间轴、作品卡（点击翻档案）、引文、收尾、页脚，以及全部交互脚本。
   按需增删区块，不要重写变量与动效核心。
3. 改内容前先改变量。 换主题只允许动 :root 里的色板与字体栈，不允许在具体规则里硬编码颜色。
4. 图片一律灰度化 + hover 归零。 filter:grayscale(.2~.34)，hover 时 grayscale(0) 并微缩放 —— 画面里唯一有彩色的地方就是图片本身。
5. 给每个可交互元素加指针反馈。 卡片/行/面板挂径向暖光，图片挂反向视差，按钮挂磁吸 + 涟漪。
6. 自检。 交付前逐条核对 references/anti-patterns.md，并确认窄屏（≤1080、≤760）下已折叠为单列。

关键实现约束

• 单文件、零依赖：所有 CSS 与 JS 内联，不引外部字体文件、不引 CDN 库。
• JS 用 IIFE + var，兼容旧内核；不使用构建工具与 ES 模块。
• 指针跟随统一走一个 rAF 循环（缓动核心），各元素只订阅回调；指针静止时循环直接空转返回，不在每帧做布局读取。
• 需要每帧读取的元素（如逐字 proximity）必须缓存坐标，并在滚动/缩放时用 rAF 节流刷新。
• getBoundingClientRect 只在 pointermove/scroll 里调用，不在动画帧里反复调用。
• 装饰元素必须带语义：印章（nav-seal / dossier-seal）、45° 菱形分隔符、竖排英文、衬线编号 —— 不用无意义的形状堆叠。

资源索引