Design

状态：生效中
最后更新：2026-10-22（修正 404 页导航与背景之间的留白及首屏高度）
适用范围：Blue Note 的首页、文章页、Gallery、归档、搜索、About、私密文章及后续新增页面

本文是 Blue Note 视觉、排版与页面组件的主要设计规范。涉及网页外观的新增或修改必须遵守本文；若实现与本文不一致，应先更新规范并说明理由，再修改代码。发布流程见 docs/PUBLISHING.md，作者文字的硬性边界同时受根目录 AGENTS.md 约束。

文中的“必须”“不得”是硬性规则；“应”是默认选择，只有明确理由才能偏离；“可以”表示允许但不要求。

1. 设计目标

Blue Note 是以文字为中心的个人笔记站。视觉应当安静、克制、清晰，有纸张与编辑出版物的质感，但不模仿纸媒装饰。

按优先级排序：

尊重作者原文与原有语义；
保证长文阅读舒适；
保持中文、英文、数字和公式协调；
让同类内容始终使用同一种视觉语言；
装饰只用于澄清结构，不用于制造原文不存在的层级。

任何“更醒目”“更丰富”“更像杂志”的处理，如果会改变原文的语气、停顿或结构，都不得采用。

2. 色彩系统

2.1 文章与列表页：浅色

角色	当前值	用途
纸张背景	`#ecebe6`	页面主背景；偏冷的纸色，与蓝黑横条相称；避免纯白
主文字	`#34393d`	正文与常规信息
标题文字	`#1d2226`	页面标题与真正的正文标题
次要文字	`#62686d`	日期、注释、辅助说明
链接	`#3d5a73`	正文链接
链接悬停	`#243c50`	hover 与 focus 状态
分隔线	`rgba(52, 57, 61, 0.15)`	边框、横线、列表分隔
横条	`#061521`	全站导航、首页底色与下横条；浅色与深色模式相同
横条文字	`#eeebe3`（站名）／`#bcc6cb`（菜单）	横条上的文字
克制金色	`#f3dca6`	仅用于导航与首页目录的悬停、焦点等极少量反馈

2.2 文章与列表页：深色（蓝调）

深色模式取首页照片的蓝调夜色，替代原先的暖灰色。

角色	当前值	用途
页面背景	`#0e1922`	深色阅读背景；比横条略亮，避免纯黑
横条	`#061521`	与浅色模式相同；不增加分隔线
主文字	`#cdd5d9`	正文
通用文字	`#d3dade`	页面信息
标题文字	`#edf0ec`	标题
次要文字	`#8d9ba4`	日期、注释、辅助说明
链接	`#a4c0d6`	正文链接
链接悬停与键盘焦点	`#f3dca6`	全站统一金色反馈（`--interaction-hover`）
分隔线	`rgba(205, 213, 217, 0.14)`	边框与横线

2.3 首页

首页首屏是蓝黑横条之间的影像，浅色、深色模式一致。下横条以下的目录随明暗模式变化：浅色模式落在文章页同一张纸上，沿用文章页的标题、次要文字和链接颜色，使从目录进入文章时底色与字色连续；深色模式保持横条的夜色。颜色由站点 colors.light / colors.dark 中的 index-bg、index-title、index-meta、index-hover 四个 token 设定。

角色	浅色模式	深色模式
上下横条	`#061521`	`#061521`
下横条文字	`#e6e2d8`	`#e6e2d8`
目录底色	`--paper`（`#ecebe6`）	`#061521`
目录标题	`--heading`（`#1d2226`）	`#eeebe3`
目录日期、年份、锁图标	`--muted`（`#62686d`）	`#8b9aa3`
目录悬停与键盘焦点	`--link`（`#3d5a73`）	克制金色 `#f3dca6`
手机菜单内部细线	`rgba(226, 232, 236, 0.09)`	同左

在任何尺寸下，首页首屏都只有上横条、封面与下横条，三者恰好占满最小视口高度（100svh），首屏内不露出目录底色；纸面目录从第一次滚动开始出现。

2.4 用色规则

文章页不得使用纯白背景、纯黑正文、高饱和色块或彩色渐变。
深色模式下，全站可用链接及操作控件的鼠标悬停与键盘焦点统一使用已有金色 #f3dca6（--interaction-hover），包括正文、导航、目录、搜索、Gallery、上下篇、方块及 RSS／Design Doc；链接文字与图标同步变色。自动与手动深色模式一致，保留原有下划线和焦点轮廓；静态文字、禁用控件及照片不染色。
浅色模式保留现状，尚未统一为单一反馈色：正文以蓝色为主，目录与方块用 #3d5a73，上下篇用 #243c50，关联阅读及 RSS／Design Doc 用深灰 #1d2226；深色导航栏使用金色。
金色用于交互反馈，不用于正文强调或大面积装饰。
普通内容框使用既有蓝灰透明底色，不为单篇文章另造新颜色。
新增颜色必须先对应到明确的语义角色，并同时定义浅色和深色表现。
普通文字与背景的对比度应至少达到 WCAG AA 的 4.5:1；大字和非文字控件至少 3:1。
不得只靠颜色表达状态；同时使用文字、边线或其他可感知线索。

3. 字体与字号

3.1 正文字体栈

全站界面与正文统一使用以下顺序：

font-family: "EB Garamond", Charter, Georgia,
  "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Blue Note Serif SC", STSong, serif;

浏览器按字符选择字形：

英文和阿拉伯数字使用本站自托管的 EB Garamond（拉丁子集，400/500 正体与斜体，size-adjust: 108% 使其与宋体同高）；缺字时回退到 Charter、Georgia；
中文优先使用 Songti SC，其他平台回退到系统已安装的思源/Noto 宋体；两者都没有时（Windows、多数 Android）使用本站自托管的 Blue Note Serif SC（Noto Serif SC 常规体，按 Google 的 unicode-range 分片，只下载页面用到的分片；样式表以不阻塞首屏的方式加载），最后才是 STSong 与系统衬线字体；
中文语境中的引号、破折号与省略号（“ ” ‘ ’ — …）在构建时标记为 .cjk-punct，改用只含中文字体的 --font-cjk（"Blue Note CJK Quotes", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Blue Note Serif SC", STSong, serif），呈现全角形态，—— 连成一线。Songti SC 的弯引号是西文宽度，因此引号统一取自只含四个引号字符的 Noto Serif CJK SC 子集 Blue Note CJK Quotes（约 3 KB，随首屏加载），破折号与省略号仍用宋体；判断依据是相邻文字是否为中文，或引号所含首尾字母是否为中文。英文中的同类字符（如 can’t 的撇号、英文引语）保持 EB Garamond。只改变显示，不改动原文字符；代码、公式等原样块不处理；
英文斜体使用字体自带 italic，不用人工倾斜模拟；首页与列表的日期使用斜体、等高数字（lining-nums）；
中文、英文和普通数字共享同一基线与 CSS 字号，不得为“看起来齐”而单独使用 vertical-align、相对定位或缩放；
正文（.markdown-body）使用 text-autospace: normal：汉字与西文字母、数字相接且作者未输入空格时，由浏览器加入约 1/8 字宽的间距；作者已输入的空格保持原样，不在源文中插入或删除空格。正文段落（.markdown-body > p）两端对齐（text-align: justify），左右边缘齐平；不使用 text-wrap: pretty，因为 WebKit 会据此重排整段，把中文行提前截断，造成右缘参差。手机上长英文单词折行时个别行字距会被拉开，属两端对齐的正常代价。方框、诗行、居中内容保持各自的对齐。不支持的浏览器保持原有排版；
中文引号与相邻的全角标点（如 ”， ，“ ）“）相接时，该引号使用半宽字形（OpenType halt），避免两段半角空白叠在一起；作者在中文引号与中文或全角标点之间键入的空格不显示（如 或是 “认清……” ，），源文不改；
TA、AI、GDP 等缩写按普通正文呈现，不设小型大写，不单独缩小或加字距；
英文诗行与引文框使用正文字体；公式仍使用第 7 节的数学字体。

3.2 字号等级

根字号以 16px 为换算基准。

内容	桌面	移动端	行距
正文中文	`1.0625rem`（17px）	`1.0625rem`（17px）	`1.78`
正文英文	`1em`，继承正文	`1em`，继承正文	继承正文
正文数字	`1em`，继承正文	`1em`，继承正文	继承正文
统一页首标题	`clamp(2.125rem, 3vw, 2.75rem)`	`1.875rem`	`1.25`
列表标题	`1rem`	`1rem`	随列表行
日期与元信息	`0.8rem`	`0.8rem`	默认
注释/图注	`0.8–0.88rem`	不低于 `0.8rem`	`1.55–1.65`
行内公式	`1em`	`1em`	随正文
独立公式	`1.28rem`	`1.05rem`	`1.35`
公式上标	父级的 `0.62em`	同左	—

规则：

普通英文、数字、缩写不得另设字号。
数字只有在表格、日期列表等需要纵向对齐时才使用 tabular-nums；正文数字使用正常比例数字。
加粗用于原文明确的强调或真实标题，不用作装饰。
英文术语可以按原文使用 italic；不得因为它是英文而自动斜体。
正文移动端不得为了容纳更多内容而缩至 16px 以下。

4. 行距、行宽与段落节奏

4.1 正文行宽

普通文章的目标视觉行宽为约 38rem，即通常每行约 34–40 个汉字；可接受范围为 36–42rem。当前实现为固定的 39.667rem（634px），不随视口变宽而拉宽。
同一篇普通文章中的段落、标题、列表与行内公式必须共享同一文字列，不得给个别段落任意缩窄、居中或加宽。
普通列表页最大宽度为 760px；页面标题块居中，最大宽度同为 760px。
独立 Gallery 的图片区最大为 1160px；《秋之纽约_2023.11》作为含多张照片的普通博客特例，保持既有 1080px 图片区，导语仍回到普通 760px 内容列。
超宽图片、表格或代码可以暂时突破正文行宽；前后正文必须恢复到统一文字列。
文末上一篇／下一篇导航独立按普通文章的 39.667rem 阅读列居中，不随摄影文章或宽图拉宽；保留两侧箭头各 0.35rem 的既有外伸量。窄屏随内容区收窄，上下外边距统一为 1rem。
文末导航采用左右等宽的两列布局，只保留上一篇与下一篇；不再放置中间菱形。左右折角共用同一条 SVG 路径，右侧仅作水平镜像；统一为 16 × 16px、线宽 1.5、圆角端点与连接，与文字垂直居中，图文间距 0.375rem。手机英文文案为 Prev／Next；关联阅读斜箭头保持原样。列间距 0.75rem，两处操作区域至少 44px 高。
正文结束处使用 7 × 7px 的实心方块作为结束标记和回到页首入口，颜色继承 --text。普通段落紧接末句，以不换行空格隔开；不在正文源码中追加字符，不改变原有文字、标点、段落和格式。没有可靠的末尾文字或段落锚点时（例如以图片、表格、代码块或其他非段落内容结束），标记在正文之后独占最后一行、按阅读列居中；单独一行时不让前置空格影响方块的视觉中心。私密文章只在解锁后的正文末尾显示，锁定面板不显示结束标记。
方块保持静止，悬停只变色、不显示下划线，沿用首页目录的 --index-hover：浅色模式为现有蓝色 #3d5a73，深色模式为现有金色 #f3dca6；键盘焦点使用同样的变色并保留清晰轮廓；不可见点击区域扩展至 44 × 44px，不撑高正文行距。悬停及辅助技术名称为 Back to top（中文界面为“回到页首”），无常驻说明文字。标记不依赖相邻文章是否存在或上下篇导航是否启用。
上下篇按时间正序理解：左侧 Prev／上一篇指向相邻较早文章，右侧 Next／下一篇指向相邻较新文章，桌面篇名与手机文案使用同一目标。最早文章左侧留空，最新文章右侧留空；不循环、不把剩余按钮挪到另一侧，空位仍保留等宽列。历史文章按成稿年份参与排序，保留原有链接；首页与归档仍按新到旧排列。
方块的页首入口使用指向文章页眉的原生页内链接，立即回到文档最顶部并将焦点带回页眉，完整显示顶部横条，无 JavaScript 时仍可使用。Letterbox 的页眉锚点以 scroll-margin-top 计入横条高度与顶部安全区，避免跳转只到标题区、截去横条；普通正文锚点仍保留原来的滚动安全区。不悬浮，不添加正文文案。
文末上一篇／下一篇的悬停与键盘焦点采用浅色 --link-hover、深色统一金色（§2.4）和文字 1px 细下划线（偏移 0.2em）；键盘焦点另有清晰轮廓。左右箭头保持静止，不播放位移动画。
摄影文章由 Front Matter 的 photo_layout: true 明确选择，不按图片数量推断；普通长文即使包含多张图，也保持统一正文列、已有目录与作者提供的图注。

4.2 行距与段距

正文行距统一为 1.78，约 30px；不得逐段调整。
普通段落下间距为 1.15em。
题材转换需要更明显停顿时，可以使用规范横线或约两行的额外留白；不得把下一句改成标题来制造停顿。
页面标题行距为 1.25；卡片摘要为 1.55；注释为 1.55–1.65。
诗歌、歌词或刻意保留换行的文本可以使用 1.9–2.05，但不得改动原稿换行。

4.3 间距尺度

新增布局优先从以下尺度取值，避免出现大量彼此接近但不相同的数字：

0.25rem · 0.5rem · 0.75rem · 1rem · 1.5rem · 2rem · 2.5rem · 3.5rem

小误差可以为适配既有组件保留；新组件不得无理由另建尺度。

5. 原文与页面层级

原稿是标题、措辞、顺序、分段、括号、重复、枚举和修辞停顿的唯一权威。

未经作者明确要求，不得：

改写、缩写、扩写或事实核查后直接改正文；
自拟标题、副标题、摘要、图注、脚注、参考资料或延伸阅读；
把“关于……。”一类完整正文句子改成标题；
把行内的 a、b、c、d 或其他枚举拆成列表；
把一句话抽成题记、引语、卡片或大字；
添加目录，或仅为视觉层级而新增标题；
改变括号内容的位置或把括号内容移出正文。

可以不经额外确认处理的内容仅限：明确错字、机械性的中英文空格与标点、忠实的公式排版，以及作者已经明确要求的视觉调整。如果事实或措辞有疑问，保留原文并向作者提出。

视觉层级必须来自原稿已有语义。无法判断时，默认使用普通段落。

5.1 文章末尾的关联文字入口

作者明确选择的文章通过 Front Matter 的 companion 链接到相关文字或 AI 回应。按最新确认，入口为正文与可选标签之后、上一篇／下一篇之前的狭长横框；关联文字入口保持独立，不占用上下篇导航中的位置。页眉和正文开头不添加入口。
横框与普通正文列等宽，最大为 --reading-width（39.667rem），居中；上方留 2.5rem，下方留 1.5rem。普通上下篇导航继续沿用 §4.1 的宽度和两侧箭头留白。
整框是一条原生 HTTPS 链接，最小高度 3.5rem（56px）、内边距 0.75rem 1rem，文字左对齐、右上箭头靠右，间距 1rem。窄屏必要时文字自然换行、框高随内容增长，箭头不收缩，不缩小字号。
沿用文学框的 --panel 低饱和透明底色与 1px solid var(--line) 边线；直角、无阴影。它是独立导航控件，使用自己的紧凑高度，不套用正文 .literary-panel 的内容型内边距，也不改变既有文学框。
文字沿用衬线字体，字号与上下篇导航一致，均为 0.9rem（14.4px），继承行距；文字与箭头使用现有的较深链接色 --link-hover，保证在 --panel 底色上的小字对比度。箭头为主题 SVG 图标 arrow-up-right，大小 1rem，保持明确的外站跳转含义。
悬停仅将边线加深至 --link、文字与箭头在浅色模式变为 --heading、深色模式变为统一金色（§2.4），并给文案细下划线；键盘焦点沿用主题轮廓与统一反馈色。不加动效、渐变、胶囊或额外说明。
入口同标签页打开，无 JavaScript 也可跳转。URL、文案和无障碍描述由元数据提供，主题不写死 ai-lab 域名；未配置及私密文章不显示横框。上下篇与页首导航遵循 §4.1。
首批四篇为《布涅星》《Z.A.T.O. 随想》《0902 - 随想》《修图》。文案为 Read the ai-written reflection，单数 reflection 指对应的一篇回应；末级地址沿用原文标题，包括中文、空格与标点。

5.2 经作者授权的手稿目录与篇章

只有作者明确要求时才增加目录。目录按原稿顺序列出篇名，使用正文内的原生折叠区域，默认收起；只标“目录”，不加摘要、页码、进度条或操作面板。
连续手稿按原有篇章组织，接合跨照片的续文，不把每张照片当作一篇文章。保留原有小节、日期、注释、诗行和图示。
正文沿用全站衬线字体、行宽、字号与行距。篇章间距为 3.5rem；篇名为 1.375rem、行距 1.5，下留 1.5rem，无边框或底色。小节层级沿用原稿语义，不由句式自动增设。
目录条目为 0.9375rem、行距 1.65，单列自然换行；原注与日期为 0.875rem、行距 1.65，使用 --muted，日期右对齐。保留换行的诗文行距为 1.95。原稿图示依 §8 保持比例，最大占正文宽度的 90%。
已保存解锁状态时，在首屏绘制前进入恢复状态，恢复期间不展示 Locked 密码面板；密文按内容版本缓存，解密成功后直接显示正文，失败或脚本不可用时恢复解锁入口。不得缓存明文。相邻文章的 LOCKED／UNLOCKED 标记位于标题下方，手机上位于“上一篇／下一篇”下方，箭头始终在导航外侧。
私密文章的目录、篇名、正文与图示一并加密，仅在解锁后进入页面；通用设计文档与截图基线不包含其内容。

6. 方框与特殊内容块

6.1 何时可以使用方框

只有内容本身是一个独立对象，而不是普通段落时，才可以使用方框。常见允许情形：

一组需要整体阅读的公式或推演关系；
原稿明确标示为题记、引文、信号、定义或独立材料；
必须与正文区分的技术状态，例如私密文章解锁后的特殊原始块；
作者明确要求装框的内容。

以下情况不得使用方框：

普通开头、导语或结尾；
仅仅“比较重要”或“写得漂亮”的一句话；
普通话题转换；
“关于……。”这样的正文起句；
为填补页面空白或增加视觉变化；
原文没有独立语义、但排版者想替作者总结的内容。

如果是否独立存在歧义，默认不使用方框。

6.2 通用方框

所有普通内容框必须使用 .literary-panel。视觉权威是《Z.A.T.O. 随想》的首个方框。

max-width: 48rem;
margin: 0 auto 2.5rem;
padding: 1.75rem 1.65rem 1.6rem;
background: rgba(99, 117, 131, 0.08);
border: 1px solid var(--line);
border-radius: 0;
box-shadow: none;

移动端内边距为：上 1.45rem、左右 1.1rem、下 1.35rem。

文章专属类可以控制框内的公式排列、对齐和换行，但不得重新定义方框的宽度、底色、边线、圆角、阴影和外部间距。不得出现“首个框一种样式、后续框另一种样式”的情况。

方框不得自行增加可见标题或说明；只有原稿提供时才能显示。为无障碍添加的 aria-label 可以不显示，但必须准确描述内容。

6.3 横线

普通主题转换优先使用留白；作者希望更明确分隔时，可以使用左对齐的 4rem × 1px 短横线。
主题分隔线的标准间距是上 3.6rem、下 2rem，颜色使用 --line。
横线不能把下一段暗示成标题，也不能在每个普通段落之间重复使用。
诗歌等独立结构可以使用贯穿内容块的上下边线，但不使用完整方框。

6.4 文章配乐

作者明确选曲时使用已确认的 D 封面式播放器，置于正文前，与普通正文同宽；无底色、无外框、无阴影、不悬浮。以文章的 music 元数据选择启用，歌曲信息不写入正文。添加方法与资源路径见 PUBLISHING.md §3.1。
横向排列专辑封面与歌曲信息、控制条。桌面封面 100px、间距 20px；手机（≤767px）封面 76px、间距 14px。封面保留完整比例，圆角 2px，不生成图注或接入图片灯箱。组件上下内边距 0.5rem，下方留 2rem 后进入原文。
沿用正文衬线字体。歌名桌面 1rem、手机 0.9375rem，艺人、专辑、时间及状态文字 0.8125rem，行距 1.65；歌名自然换行，不截断。文字及控件均使用既有 --heading、--prose、--muted、--link-hover 与 --line，明暗模式同时生效。
控制条提供播放／暂停、可拖动且可键盘调整的进度、已播／总时长。桌面另有静音和音量；手机沿用 D 版布局，音量交给设备系统控制。按钮及滑杆操作区域至少 44px 高，按钮宽 44px；进度轨道 2px，游标 8px，使用实际播放位置区分已播与未播段。
音频与封面全部自托管，不使用 Spotify 或第三方播放器。完整音频只在读者主动播放或调整进度时加载（preload="none"）；不自动播放、不循环、不自动记住播放进度或跨页续播。
控件有无障碍名称及可见键盘焦点。初始 HTML 与首屏样式直接呈现 D 版控件，脚本只绑定行为并启用操作，不在首屏绘制后替换原生播放条；脚本未就绪前操作暂不可用，但外观与尺寸不变。禁用 JavaScript 或播放器脚本加载失败时显示原生控件，仍能播放。加载失败显示提示和“打开音频”链接，再次点击播放可重试。不会因播放失败隐藏原文。
初次进入、刷新、播放、暂停、恢复与拖动缓冲过程不得改变播放器、封面、控制条或正文的位置。艺人／专辑信息始终可见，不用加载文字替换或遮住。等待持续超过 400ms 时，才在播放按钮的固定区域内显示细环，并向辅助技术报告加载状态；短暂等待不显示细环，减少动态效果时细环不旋转。只有实际失败时，才在控制条下显示错误与恢复链接。
样式和播放行为由站点统一组件维护，仅选曲文章加载资源；预览中的 A／B／C 不作为线上变体保留。

7. 公式、英文与数字

简短公式留在句内，字号与正文一致；变量使用数学斜体，上标使用规范的 sup。
两个以上需要比较或连贯推演的公式可以放入 .literary-panel，内部使用文章专属布局类。
公式与正文共用 EB Garamond："EB Garamond", Times, "Times New Roman", Georgia, serif（--font-math）。变量使用 EB Garamond 斜体，数字与上标随正文；EB Garamond 缺少的 ∝、→ 等运算符回退到 Times。行内公式与公式框不再与正文英文使用两种字体。
不把正文中的普通数字改成公式，也不为单个数字建立独立卡片。
数学框的目的必须是展示关系，不是把数字做大。
英文术语、缩写和数字在普通正文中遵守第 3 节，不单独抬高、缩小或加宽字距。

8. 图片与图集

普通文章图片默认不超过正文区域的 90%，居中展示，保留自然比例。
独立 Gallery 可以使用更宽的图片区；文章中不得因此把普通导语也拉宽。
图片圆角应为 0–4px，默认无阴影；不得使用厚边框、悬浮卡片或装饰性滤镜。
有意义的图片必须有准确、简短的替代文字。
图注只有原稿提供或作者明确要求时才显示，不根据图片内容自行撰写。
首页封面可以使用低对比度遮罩；文章正文图片不叠加渐变文字层。

8.1 图片交付

正文展示图片必须由 Blue Note 自身托管，不直接热链第三方图床；外部服务可以作为原图传递渠道，但不能成为线上文章的单点依赖。
摄影作品默认使用 sRGB 渐进式 JPEG。透明图形、界面截图或线条图才考虑 PNG；只有同时提供可靠回退时才使用 AVIF 或 WebP。
普通文章图集必须保留一份与作者交付图相同像素尺寸、宽高比和完整画面边界的高清主文件；不得裁切、拉伸、改变构图或擅自降低主文件分辨率。独立 Gallery 经作者授权采用下述网页发布规格。
图集照片另行生成长边 800px、1600px 和 2880px 三档预览。浏览器通过 srcset 按屏幕选择，不让手机下载不必要的原始大图；点击放大时使用高清主文件。
首图优先加载，其余图片原生懒加载；所有图片写入固有宽高，避免载入时页面跳动。
发布文件删除定位、拍摄时间等 EXIF 元数据并保留 sRGB 色彩描述；不得重新取景。普通文章图集的高清主文件不有损缩小；独立 Gallery 按下述规格生成。作者仍应在自己的照片库或备份中保留原始交付文件。
独立 Gallery 使用高质量网页发布副本：高清主文件长边以 3840px 为上限，不放大；预览仍为 800px、1600px、2880px。各档从未经本轮压缩的原分辨率文件独立生成，使用质量 90、4:4:4 色度采样的 MozJPEG 渐进式 JPEG，并保留 sRGB ICC。若重编码文件反而更大，保留原有较小文件及实际尺寸，不为统一参数增加体积或损失画质。保留完整画面、编排与色彩，不反复压缩网页副本；发布前检查暗部、颗粒、细密纹理和渐变。大图的 1:1 查看对应发布文件尺寸，界面称为“高清图片”，不暗示提供作者原文件。
清晰度优先于文件体积。若一组图的预计存储或访问负担接近平台限制，应先向作者说明具体体积、访问量假设和替代方案，不得自行降低高清主文件尺寸。

8.2 文章集与图集

Gallery 是约 50 张精选照片组成的独立页面，不是按月份不断新增的摄影文章或多级相册目录。
仅在主导航的 Archives 与 About 之间加入文字入口 Gallery；手机端进入既有菜单。不新增首页照片墙、浮动按钮或第二入口。
Gallery 共用 Blue Note 的颜色、字体、页眉和原文原则；照片记录独立于文章，不进入首页文章流、Archives 或文章搜索。
《秋之纽约_2023.11》仍是普通博客，保留原链接、正文、图片与归档位置，不迁移、不自动复制照片到 Gallery。
Gallery 只收录作者明确交付的照片，严格按清单顺序排列；作者明确委托编排时，可依据画面关联、光线和观看节奏调整清单。不得自行补写可见图注、分组名或叙事说明。
照片尚未交付时，只显示“尚未收录照片。”，不放样片、占位图、加载骨架、虚构照片数量或自拟介绍。

8.3 Gallery 排列与观看

页面上方只显示居中的 Gallery 标题块（与其他页面相同），不另加封面或副标题。图片区最大宽度为 1160px；第一张就是作品，不另复制成封面。
完整选集使用摄影书式展墙：大幅单张为主，有画面关联的照片可组成双联，一行最多两张。spread 明确记录组合；sequence 记录连续段落。完整模式不得按屏幕尺寸自动打散或随机重排；随机小展另见 8.4 节。
单幅和双联居中，照片等高、宽度按实际比例分配，图高上限为 78svh（兼容回退 78vh）与 840px 中较小者。没有固定比例槽位，不裁切、不拉伸、不加画框；竖幅不强行撑满横向空间。
独立单张必须完整填满自身的居中容器；不得把小于 1 的原图比例直接当作单张的伸展系数，造成竖幅再次缩小并向左偏移。
每个单幅或双联外包一个独立展位。桌面端展位至少占满一个可视高度（100svh，兼容回退 100vh），作品在其中垂直居中；观众停在作品的标准观看位置时，前后作品不得探入当前视窗。该规则同时用于随机小展与完整选集，不以裁切、放大或缩小照片换取隔离效果。
双联内间距 32px；相邻展位另留 64–112px 缓冲，同一连续段落内为 32–56px。≤900px 时全部转单列，照片完整占据内容宽度，不受桌面图高上限限制；同一双联内 24px，同一连续段落内 40px，普通间距 64px。展位仍以一个可视高度为最低空间，双联转为纵列后如果内容更高则自然延长，不强行把整组压进一屏。这一较早断点避免平板双联过小。
手机两侧留白 24px。有原稿图注时在图下展示，字号 0.875rem、行距 1.6；无图注不填充说明。不使用阴影、圆角卡片、图片入场动画、悬停缩放或自动轮播。
初始页面只加载响应式预览，不自动下载高清主文件。高清主文件只在读者打开相应照片后请求；不预加载整组原图。
打开大图时先显示已有的完整预览，高清主文件到达后替换；前后切换时保留上一张完整画面，直到下一张预览或高清文件完成解码，再在固定舞台内一次替换，不先清空画面，也不进行“空白—预览—高清”的连续跳换。预览与高清均完整容纳在同一固定舞台内，并写入主文件宽高供解码前稳定占位；已有有效画面时不在照片底部覆盖加载条，只有首次尚无画面或实际加载失败才显示状态，错误提示使用围绕文字的紧凑底色而非横贯图片。只在高清加载并解码完成后允许 1:1 放大。加载失败时保留有效预览和高清图片链接，不让观众面对空白。
大图观看使用中性深灰背景 #242424、主文字 #eeeae3、次要文字 #bdbab4，浅色与深色模式共用；避免有色背景影响照片观感。
打开时完整容纳画面，点击或键盘激活照片后才放大到高清发布文件的像素尺寸；再次激活恢复全幅。只保留关闭、上一张、下一张及低调的当前位置；不自动播放、不显示缩略图工具栏。
支持左右键与手机横向滑动，Escape 关闭；放大时允许滚动查看细节。关闭后恢复原来的页面滚动位置和键盘焦点。
加载失败必须有明确提示和打开高清图片的回退链接。不开启 JavaScript 时，照片链接仍能直接打开高清主文件。

8.4 随机小展与完整选集

Gallery 默认打开 /gallery/ 的 A few 模式，每次进入或主动点击 Shuffle，从已收录作品中随机展示 3–5 张；/gallery/all/ 的 All photographs 保留 8.3 节的完整编排。主导航仍只有一个 Gallery 入口。
两种模式用页面内的衬线文字导航切换，当前模式有细下划线。Shuffle 保留上下两个同功能入口：顶部入口位于模式切换同一行右侧，便于立即更换首轮选片；底部入口在最后一个展位之后居中，便于看完后继续。两处均使用小型回转符号与文字、无填充按钮，不使用卡片、粗边框、彩色主按钮或悬浮固定控件；字号 0.9375rem，触控高度至少 44px，窄屏自然换行。
随机抽取以既有单幅／双联为单位，不拆散同一双联；连续两次尽量不重复上一组作品。随机模式中的系列片段不等于重新定义作者的完整系列顺序。
小展给单幅主图更充分的空间，最大宽度 1040px，图高不超过 82svh / 900px；后续使用完整双联或比例相近的单张组成视觉并置。独立照片的并置可错开 40–56px，既有双联始终齐平。末尾独立横幅可收至内容宽度的 86%，但所有独立竖幅保持居中。
每次 Shuffle 生成的每个单幅或双联都必须重新放入 8.3 节规定的独立展位；随机组合只改变本次选片和作品之间的并置关系，不得压缩展位或让相邻组侵入当前作品的标准观看画面。
底部 Shuffle 成功生成新一轮后，将焦点移至第一张作品并把它带回视窗中央；常规情况下使用平滑滚动，系统请求减少动态效果时立即定位。顶部入口不改变当前滚动位置。
不用三列小缩略图、叠图、倾斜、裁剪或轮播来制造变化。手机一列，取消桌面的错位和额外缩窄；不强迫 3–5 张全部挤进一屏。
初始只请求当前小展的预览；其他作品只以轻量数据形式存在，不先下载完整选集。无脚本时展示一组真实照片，并提供完整选集链接；重新抽取失败不得清空已有照片。
大图浏览限制在当前小展内；完整选集模式仍可连续浏览全部作品。重排是主动操作，不自动计时切换，不添加可见标题、图注或策展文案。
大图打开后可以低优先级预热相邻两张的网页预览，以减少主动前后翻动的等待；不得借此预载相邻高清主文件或整套图集。

9. 首页、导航与列表

全站采用提案一的片尾式设计（design: letterbox）：导航横条位于文档顶部（position: absolute; top: 0，相对整个文档定位），与普通内容一样随页面向下滚出视窗；向上滚动时不弹回，只有回到页首才再次看到。桌面与平板高 88px，手机（≤767px）及高度不足 521px 的窗口高 64px；不用随视口高度连续变化的横条尺寸。文档顶部预留同高空间，换页时导航的位置、高度、颜色不变。打开手机菜单时横条临时固定在视窗顶部，以便关闭。
站名、菜单的位置、字号、左右留白（clamp(24px,5vw,72px)）全站一致；导航内容最大宽度 1680px 加两侧留白。页面保留滚动条位置（根元素始终 overflow-y: scroll；弹窗通过固定 body 锁定背景，保留滚动条位置），并在根元素和 body 使用 overscroll-behavior: none 抑制边界回弹。页面保持原生文档滚动，不拦截滚轮、模拟惯性、吸附或使用滚动驱动的位移、缩放、渐显。
横条内：站名 EB Garamond 22px、字距 0.07em；菜单为 Archives、Gallery、About、Search 与日／月切换，16px，颜色 #bcc6cb，悬停与焦点为金色并从中央展开 1px 细线。站名即回到首页。日／月切换沿用原有图标：当前为浅色显示太阳、深色显示月亮，悬停时预览将切换到的图标。窄于 768px（与主断点一致）时菜单收入菜单按钮，展开为与横条同色的全屏面板；768px 及以上完整显示四项菜单与日／月切换。
内容页（文章、归档、标签、Gallery、About、Design Doc）共享同一个标题区：它直接位于页面纸面上（浅色 --paper，深色页面背景），不另设色带、边线或分隔线，只有上方的导航是蓝黑色。标题区上留 5rem（手机 3.5rem），下方统一留 1rem 内边距，保护 g、y 等伸出文字框的字形下缘，避免被后续正文背景及遮缝细条覆盖；不设最小高度。内部统一为最大 760px 的居中网格：第一行预留 1.5rem 日期位，间隔 0.75rem 后放标题。文章日期为正体 1rem、字距 0.1em、--muted 色的中文日期 YYYY 年 M 月 D 日（主题 post.date_format），仅知年份时为 YYYY 年（post.year_format）；其他页面保留日期行的空间，使相同尺寸的单行标题保持同一基线。标题为 --heading 色，clamp(2.125rem,3vw,2.75rem)，手机 1.875rem，行距 1.25。标题区与导航一同随文档滚动。
标题区之后，正文主区上留 2.5rem（手机及矮窗口 1.75rem）；加上标题区内部的 1rem，标题文字框至内容的总间距为 3.5rem（手机及矮窗口 2.75rem）。相比原版正文统一下移 0.5rem（默认字号下为 8px），标题位置、字体、字号和行距保持不变。Gallery 只放大图片区，页首继续共享标题区。普通文章正文行宽、段落与内容组件沿用前述规范。紧随标题区的正文主区用绝对定位的同色伪元素覆盖交界线上下各 1px，防止缩放时透出深色 body；交界线位于标题底部留白之后，不得触及字形。它不产生可见分隔线、不拦截点击、不改变标题区或正文几何尺寸，不作用于首页。
首页（宽 ≥768px 且高 ≥521px）：首屏依次为上横条、封面（object-fit: cover，object-position: 50% 52%，高 100svh 减两条横条）和下横条，三者恰好占满一屏；无安全区且默认字号时上下横条同高，安全区与放大文字的尺寸按 §9.1 计算。上下横条都在文档流中，随页面滚动离开，不固定、不弹回；之后进入目录。横条不随滚动增加边线、阴影或变色。
下横条始终只显示斜体标语 Dream to be a tranquil spectator.（home.subtitle_excerpts: false），指针停留或键盘聚焦文章时也不替换为其他文章的摘要预览；横条尺寸固定，长句最多两行，用 text-wrap: balance 平衡换行。
本站封面在视口宽高比达到 2:1 时使用 50% 70% 焦点，保留宽矮窗口中位于画面下方的人物；其余视口保持 50% 52%，包括竖屏手机的既有裁切。图片与微缩加载底图共用 --lb-cover-position，避免加载前后焦点跳变；不改变首屏高度、横条尺寸或图片文件。
首页目录按年份倒序排列，所有文章持续向下排列，不限制篇数、年份、行数，不分页（index_generator.per_page: 0）。未解锁时不显示私密条目及只含私密文章的年份；已解锁时在其实际年份恢复，绝不输出私密摘要。目录最小高度为 100svh 减上横条，内容多时自然延长；上下各留 4rem。
首页目录采用「片尾中轴」：年份与每篇文章的标题文字共用页面中心线。目录宽 100%、最大 27.5rem（440px）；每行分为等宽的左右侧栏和中间标题栏：4rem minmax(0, 1fr) 4rem，列距 1rem。日期在左栏右对齐，右栏留白，标题在中栏居中；长标题在中栏完整自然换行，无日期条目仍保持同一中轴。《小蓝本》的标题文字与 2018 年份正中对齐，锁／开锁图标悬在标题右侧 0.4375rem，不参与标题宽度与居中计算。年份为 0.9375rem、字距 0.32em；日期为斜体 MM.DD、1rem；标题 1.3125rem、行距 1.5。整行可点击，操作高度至少 44px；年份之间留 3.5rem。无条目分隔线、卡片底色或摘要段落。
首页目录末尾使用与文章页相同的 7 × 7px 实心方块（§6），居中于标题中轴，位于最后一年的最后一条之后，与目录间隔 3rem（含 44px 点击区，视觉间距约 3.6rem），之后保留目录底部的 4rem。它是指向页首（首页 header#page-top，即上横条）的原生链接，无 JavaScript 时可用；颜色取 --index-title，悬停与键盘焦点只变色为 --index-hover，不显示下划线，焦点保留 1px 轮廓；名称为 Back to top（中文界面为“回到页首”），无常驻文字。手机与矮窗口位置、尺寸一致。未解锁私密文章时，方块仍紧随最后一个公开年份。
首页手机与矮窗口：与桌面相同，首屏为上横条、封面、下横条，恰好占满 100svh；两条横条基础高度均为 64px（安全区与放大文字按 §9.1 计算），封面高 100svh 减两条横条、最少 160px。下横条显示完整标语，随后进入单列目录；目录左右留 24px、上 3rem、下 4rem。矮窗口（宽 ≥768px）沿用桌面的左右侧栏，侧栏各 2.75rem、列距 0.5rem。手机（≤767px）不用左侧日期栏：日期（斜体 0.8125rem、字距 0.08em）直接位于标题上方，与标题（1.1875rem、行距 1.4）、年份共用同一条中心线，与文章标题区“日期在上、标题在下”的写法一致；每条上下内边距 0.625rem，无日期条目只显示标题。增加文章不改变这种排列。
手机菜单由读者主动打开，锁定背景滚动；站名与关闭按钮保留在固定导航中。关闭后页面位置不变，键盘焦点返回菜单按钮。搜索继续使用统一纸面弹窗及原有焦点管理。菜单、搜索、文章图片、Gallery 大图与私密解锁弹窗共用滚动锁：临时固定 body 并保存阅读位置，关闭后恢复；切换弹窗时不重复解锁背景，不靠拦截滚轮维持位置。
导航不再固定，页内跳转只在根元素保留 1rem 的滚动安全区。私密文章解锁成功时先关闭弹窗并恢复文档滚动，再定位章节链接，避免跳转被弹窗的滚动恢复覆盖。
导航以文字为主。动效仅用于短暂的颜色、透明度或主动菜单开关反馈；正文、方框和公式不做入场动画。无 JavaScript 时首页封面、所有公开目录条目与完整标语仍可使用。
归档、搜索、标签和 About 共享编辑式字体、颜色与内容网格。历史文章以成稿年份参与各处排序，首页与归档日期处留空，原上传链接保持稳定。《小蓝本》归入 2018 年，归档右侧不显示日期，删除“（2026.09.27 ChatGPT整理并上传）”。
Archives 下方保留当前线上书籍目录排法：居中窄栏（最宽 33rem），年份居中（0.9375rem、字距 0.32em），每行标题在左（1.125rem）、日期靠右（斜体 MM.DD、等宽数字）；无分隔线或悬停底色。私密文章保留标题后的锁／开锁图标，已解锁读者可点击图标退出。标签页采用同一排法。
Archives 与标签页提供首页没有的信息（主题 archive.details）：每篇在日期左侧以 0.8125rem --muted 等宽数字写字数（按十取整，汉字数加英文词数，摄影文章同样按字数计）；标题下一行以 0.875rem、行距 1.6 的 --muted 文字显示 description 的第一句，中文标点同样使用中文字体。每篇上下内边距 0.75rem。私密文章不显示字数与摘要。年份下与页首都不放篇数或字数汇总。
Archives 仅列文章，按年份与日期倒序；每页容纳 50 篇，超过后分页，站点规范入口留在 About。
Gallery 的视图切换与重抽按钮使用 --text，当前视图用底线区分；不使用对比度不足的次要文字色作为操作文字。
About 页面底部并列放置 RSS 与 Design Doc 入口，与头像及简介分开；站点设计文档的入口归于此处。这里仍是 RSS 的唯一可见入口。上方用 1px solid var(--line) 细横线分隔，线宽不超过普通阅读列；线下留 1rem，再居中放置两个链接；链接间距为 1.5rem，窄屏可自然换行、行间距 0.5rem。每项使用 16px 单色细线图标与 0.875rem 衬线文字，图标与文字间距 0.5rem。链接默认使用 --link-hover；悬停或键盘焦点时，浅色使用 --heading、深色使用统一金色（§2.4），并保留细下划线，键盘焦点另有细轮廓；触控高度至少 44px。页底保留正文外边距与页面各 2rem 留白，短页通过弹性布局靠近视窗底部，内容增加时自然下移，不使用固定定位。不加按钮底色、卡片或说明文字。其余页面只提供不可见的订阅自动发现元数据，不增加导航入口。

9.1 首屏与加载

浏览器状态栏与页面外层画布沿用顶部横条的蓝黑色 #061521，浅色、深色及首页、内容页一致。Letterbox 的 html 与 body 均使用 --lb-bar 背景；正文纸色由页眉、正文主区与页脚绘制，首页目录独立绘制纸色，避免主屏幕模式从 body 取到浅色。body 随全文增长，至少占满 100svh，短页由正文主区补足高度。--theme-color 与构建时的主题色元数据也取横条颜色。
主屏幕网页声明 apple-mobile-web-app-capable: yes、apple-mobile-web-app-status-bar-style: black-translucent，Letterbox 的 viewport 使用 viewport-fit=cover。按 env(safe-area-inset-*) 预留安全区域，不硬编码机型高度：上横条在既有内容高度外增加顶部安全区，下横条的标语在整条可见色块内垂直居中，上下对称预留底部安全区，不能只加底部留白。下横条高度取「基础横条高度加底部安全区」与「两行标语高度加两倍底部安全区」中的较大值，保证窄屏换行或放大文字时仍居中、不触及主屏幕指示条；无安全区且使用默认字号时保持原有横条高度。封面扣除上下横条的实际高度，使首页仍恰好占满 100svh。站名、菜单按钮、正文与搜索避开横屏两侧安全区。仅顶部系统安全区有固定深色底层，导航仍随页面滚动；顶部安全区为零时不额外占位。系统状态栏的最终绘制由 iOS 控制，自动化检查覆盖零值与模拟非零安全区，但不替代主屏幕启动的真机验收。
首页的 home-root、home-page、全站的 data-design="letterbox" 与内容页、摄影文章的布局类必须在构建时写入 HTML；首屏不得等待页面底部的 JavaScript 才切换到当前设计。
布局所需 CSS 在文档头部正常加载，不用隐藏整个页面或延时显示的方式掩盖旧样式闪现。Letterbox 在页头完成一次滚动条尺寸计算，使 WebKit 在首屏绘制前确定宽度断点，避免平板边界处第一次悬停才改变横条高度；不等待正文脚本再切换版式。
网站小图标使用 64px 副本，Apple touch icon 使用 180px 副本，About 头像使用 256px 副本；原图保留，不让小图标请求原分辨率文件。
首页桌面、平板与横屏手机使用同一封面的 2880px 渐进式 JPEG 预览，并在文档头部预加载；首屏 <img> 与预加载使用同一地址。原始封面保留。
竖屏手机（(max-width: 767px) and (orientation: portrait)）通过 <picture> 改用同一画面的 1:2 竖幅裁切（保留原图全高，人物位于中轴，与目录中心线一致；由原图 5640×2400 居中截取、未缩放构图），提供 600／900／1200 宽 WebP 与渐进式 JPEG 回退，并只预加载竖幅 WebP，不再下载宽幅大图。两条预加载的媒体条件互补，<meta name="viewport"> 必须写在预加载之前，手机才会按实际宽度判断。
封面加载前，封面框以 32×14 的同图微缩 WebP（约 120 字节，home.cover_placeholder）按封面同样的裁切铺底，不出现空色块；它不是加载骨架或动画。
站点不依赖 Bootstrap、jQuery 或图标字体；图标为内联 SVG。EB Garamond 自托管于 source/fonts/eb-garamond/（SIL OFL 1.1，许可随附）。所有 CSS、JS、字体与图片由本站托管，任何页面不得请求第三方资源。

9.2 404 页面

沿用已有背景图片、“Page not found”与返回首页链接，背景紧接顶部导航，不继承正文页的顶部或侧边留白。
背景最小高度为 100svh 减去导航高度及顶部安全区（回退 100vh），提示与链接在背景区域居中。普通字号时导航与背景恰好占满首屏；文字放大或窗口极矮时可自然增高，不截断内容。
横屏安全区留白放在背景内部，背景仍铺满宽度；浅色和深色模式保持相同布局。

10. 响应式与无障碍

主要断点为 767px。设计和检查至少覆盖约 1280px 桌面与 390px 手机宽度。
手机正文保持 17px，不通过缩小文字解决拥挤；应调整内边距、换行和组件布局。
窄屏文章左右内边距：常规手机 1rem，较宽移动设备可用 2rem。
页面不得出现无意的横向滚动；公式组在窄屏应缩小间距或改为纵向，但不得截断。
键盘焦点必须可见；hover 反馈必须有对应的 focus 状态。
手机菜单关闭时不可获得焦点；搜索打开时背景不可操作，Tab 在弹窗内部循环，关闭后恢复触发入口的焦点。搜索须区分加载中、无结果与加载失败，并提供重试。首次打开且关键词为空时，只显示搜索输入栏，不因索引载入插入再删除临时加载行；载入前后面板及输入栏的位置、宽高保持不变。辅助技术通过输入框的忙碌状态获知加载；输入关键词后才在结果区显示加载提示、匹配结果或无结果提示，实际失败始终显示错误与重试入口。
文章通过主题的 post.language 或逐页 content_language 声明正文语言；界面语言仍由站点 language 决定。
遵守 prefers-reduced-motion，关闭非必要过渡和动画。
深色模式必须与浅色模式同时验收；不得只在一种模式中可读。
语义 HTML 优先于视觉模拟：段落用段落、标题用标题、引文用引文、主题分隔用 hr。

11. 实现边界

样式职责固定如下：

主题仓库 hexo-theme-bluenote（本地安装在 node_modules/hexo-theme-bluenote/）的 assets/css/：主题样式，按文件名顺序合并为一个 css/bluenote.css：00-tokens 结构尺寸（760px 列、39.667rem 文章列、1080px 照片列、1160px 宽版、页眉高度）、01-base 基础重置与滚动条、10-nav 导航与手机菜单、20-masthead 编辑式页眉、30-home 原首页封面与手机目录、32-home-folio 桌面雾岸与双列分页（以上两者为 classic 设计，本站已不使用）、36-letterbox 本站使用的 Letterbox 设计：全站横条、居中标题块、首页上下横条（随页面滚动）、按年份连续排列的片尾中轴目录、归档列表字体与搜索面板配色、40-editorial 内容容器、列表、分页、About、404、50-post 文章列、目录、上下篇、照片文章、标题锚点、灯箱、60-markdown 与 65-markdown-overrides 正文排版、70-panels 方框、诗歌等可复用文学内容块、80-highlight 代码配色、85-search 搜索面板、88-interactions 深色模式统一悬停与键盘焦点色、90-print 打印；
主题的 _config.yml 与站点 _config.bluenote.yml：颜色与字体 token（--paper、--text、--prose、--heading、--muted、--link、--link-hover、--interaction-hover、--line、--masthead、--masthead-text、--accent、--panel、--home-* 等）及主题开关；颜色值以本文第 2 节为准，主题默认值即 Blue Note 的取值；
主题的 layout/：全部页面模板；首页、内容页与摄影文章的布局类在构建时写入 <body>；_partials/post-companion.ejs 负责正文之后、上下篇导航之前的可选关联阅读横框，样式归 assets/css/50-post.css；
主题的 layout/_partials/letterbox.ejs：Letterbox 首页的封面、下横条、按年份分组的目录（含私密条目标记）与目录末尾的回到页首方块，不改写文章；masthead.ejs 在 Letterbox 设计中为文章加日期；assets/js/34-letterbox.js：仅更换下横条字幕，不监听滚动、不移动任何元素。雾岸首页的 32-home-folio.js、home-folio.ejs 与 home-entry.ejs 保留给 classic 设计。
主题的 assets/js/05-scroll-lock.js：Letterbox 页面弹窗共用的背景滚动锁，保存及恢复阅读位置；导航位置完全由 CSS 决定，脚本不监听滚动。
主题的 scripts/post-end.js：在渲染后的文章 HTML 中定位最后段落并插入结束入口，不重写原有 HTML；assets/js/45-post-end.js 在私密正文解锁后添加同样的入口；样式归 assets/css/65-markdown-overrides.css。
主题的 scripts/：主题构建期脚本——布局类、标题锚点、图注（文件名 alt 不生成图注）、原生懒加载、CSS/JS 合并与内容版本号；第三方副本来源见 docs/VENDORED-ASSETS.md；
source/fonts/eb-garamond/：EB Garamond 拉丁子集与 @font-face，经 custom_css 在所有页面加载；
source/fonts/noto-serif-sc/：Noto Serif SC 常规体的 unicode-range 分片（SIL OFL 1.1，许可随附）与以 Blue Note Serif SC 命名的 @font-face，经 custom_css_deferred 不阻塞首屏地加载；同目录的 quotes.css 与 noto-serif-sc-quotes.woff2 是中文引号子集，经 custom_css 正常加载；
主题的 scripts/cjk-punctuation.js：cjk_punctuation 开启时，在构建期把中文语境中的引号、破折号与省略号包进 .cjk-punct，样式在 assets/css/60-markdown.css；
source/css/site.css：仅 Blue Note 专属的封面宽矮窗口焦点（§9）、手稿篇章排版（§5.2），以及 About 页底 RSS／Design Doc 入口的布局、分隔线、图标和交互反馈；
source/css/design-doc.css：Design Doc 页面；
source/css/thought-notes.css：随想中的公式排列和主题分隔，不重定义通用方框；
source/css/post-music.css、source/js/post-music.js：本站统一的 D 封面式配乐组件；只在配置了 music 的文章页加载，视觉以 §6.4 为准；
source/css/private.css、source/js/private.js：私密文章界面及首页标题右侧不占宽度的锁／开锁标记；source/js/private-boot.js 由构建脚本内联到页头，提前恢复已保存的访问状态；
主题的 modules/gallery/：可选 Gallery 的排列、抽取、验证与大图观看，默认关闭；启用后仅 Gallery 页面加载 CSS/JS。网站通过 gallery.language 与 gallery.labels 设置界面文案；
source/_data/gallery.json：Gallery 的照片清单与作者顺序，不从博客文章推断收录；
主题的 scripts/gallery.js：从站点清单生成独立 Gallery 页面，不生成照片文章；
scripts/design-document.js：从本文件生成公开 Design Doc 页面；不得另存第二份网页正文；
scripts/private-links.js：在构建时标记指向私密文章的链接。
scripts/post-music.js：校验文章 music 元数据与本地资源、生成统一配乐标记，并按需注入样式和脚本；不改写作者正文。

实现规则：

共享视觉值优先使用现有 CSS 变量，不在文章 Markdown 中写内联颜色、字号、边框或间距。
主题 CSS 不使用 !important（仅 [hidden]、.markdown-body 首尾元素外边距归零与打印样式三处例外）；主题不得包含 Blue Note 专属的内容、路径或文案，站点专属规则放在 source/css。
主题改动在主题仓库提交并打版本标签，博客通过 package.json 更新到新标签；本地调试可把主题仓库克隆到 themes/bluenote（已在 .gitignore 中），它会优先于 node_modules 中的副本。
新文章默认不需要专属 CSS；确有特殊结构时，先判断能否使用已有组件。
新增专属类只能解决该内容的内部布局，不能复制或覆盖通用组件外观。
HTML 引用的本站 CSS 与 JavaScript 由构建流程按最终文件内容自动附加版本号；内容改变才更新版本，不再手工维护日期查询参数。
不直接编辑生成后的 public/；所有修改进入源文件。
若设计规范、CSS 和已发布页面不一致，三者必须在同一轮修改中恢复一致。

12. 设计变更验收

每次视觉修改至少完成：

运行 npm run check；涉及版式或主题的修改另运行 npm run visual:capture && npm run visual:compare，与 tooling/visual/baseline/ 中的基线截图、计算样式和正文文本对比（基线用 npm run visual:baseline 从上一个已验收的构建生成，有意的差异登记在 tooling/visual/allowed-differences.json）；
检查文章页桌面与手机宽度；
检查浅色与深色模式；
检查一段同时含中文、英文、数字、斜体和链接的正文；导航修改还须验证：各尺寸下所有页面的横条高度、站名与菜单位置逐像素一致；桌面首页上下横条在滚动与悬停时不移动；首页、内容页及手机上导航始终位于文档顶部，随页面滚出、向上滚动不弹回；任何页面都没有横向滚动条；以及手机菜单的开关、搜索与焦点恢复；
若涉及组件，检查普通正文、首个组件和后续同类组件是否一致；
确认没有把正文句子变成标题、题记、列表、引语或目录；
确认没有横向滚动、文字截断、异常上浮或字号跳变；
发布后验证线上 CSS 版本和最终页面。

判断一个新设计是否应被接受时，依次回答：

它是否忠实于原稿语义？
它是否解决了真实的阅读或理解问题？
它是否能复用现有颜色、字号、间距和组件？
它在下一篇文章中是否仍然合理？
去掉它，信息是否依然清楚？如果是，它很可能只是装饰，应谨慎采用。