Fable UI 阶段 · 视觉皮肤 brief

面向 Fable（视觉/UI 阶段）。Opus 已完成架构 + 可切换主题脚手架；本文件是视觉皮肤的起点。配套：UPGRADE_PLAN.md（决策/板块 v4）、OPUS_CHECKLIST.md（进度 + F 段主题接口 + 续接指南）、JSM_CONTRACTS.md（数据契约，你不用管）。分支 feat/architecture-upgrade。

你的任务

在 token 脚手架上填 theme①（neutral，默认主题） 的正式配色/字体值 + 组件皮肤精修。布局大致不变，但尺寸 / 宽度 / 位置 / 间距 / 比例可自由微调；唯一的约束是别重命名/删除 JS·swiper·i18n·契约依赖的 class 钩子和 data-*（见「布局与结构」）。

方向：干净中性 · 专业精致（用户已定）

用户喜欢这种干净、专业、精致的中性风格——是风格本身，不是”照片优先/让照片提供颜色”（那是早先的过度解读）。目标：打磨出专业、克制、有编辑刊物质感的观感。配方（浓淡可再精修）：

暖白底 #faf9f7、近黑字 #1d1c1a；克制、留白大方
铜金唯一 accent #8f6a2e（与「去共化」logo 同源）——链接 hover、活跃态、小节标下划线
朱红 #a4402f 仅用于「头条」徽标（点睛，别铺开）
宋体标题（Noto Serif SC）+ 黑体 UI（Noto Sans SC）——编辑刊物气质
8px 间距刻度，板块间 48–64px 留白
首页缩略图统一比例（如 3:2）+ object-fit: cover——整齐、专业（非”让照片提供颜色”，是为了版面整洁）
文字对比 ≥ 4.5:1
报头字体：现用原「汉呈水墨中国风」（assets/fonts/HC-subset.woff2，已有 @font-face）是当前品牌识别；若你有更契合”专业精致”、能提升质感的显示字体，可以换（但别用 mock 里的 Ma Shan Zheng，那只是网页替身）。

水墨风保留为 theme②（_sass/themes/_ink-wash.scss），别删——它验证多主题架构，注意其 --ink-3 也要满足对比度。

主题机制（已就绪，你只填值）

结构 CSS 只引用 var(--token)；token 在 _sass/_tokens.scss 声明，值在 _sass/themes/_neutral.scss（默认落 :root）+ _ink-wash.scss。
token 名：--font-display/-serif/-sans、--paper/--surface/--band、--ink/-2/-3、--accent/-strong、--accent-2/-strong、--line/-2、--radius/-card。
<html data-theme="neutral">。加主题 = 新增 themes/_x.scss + 一行 [data-theme="x"]。

要动的文件（你的主战场）

_sass/themes/_neutral.scss —— theme① 正式值（当前是 Opus 的近似值，你精修浓淡）。
_sass/_styles.scss（~700 行） —— 把剩余硬编码色（#e5e5e3 / #4a443b / 满屏 #ece9e2 细线等）逐一改成 var(--token)。Opus 只桥接了少数几个（$accent-color→var(--accent) ×11），大部分仍硬编码——这是最大的一块。
_sass/_blocks.scss —— 首页新组件皮肤：feed 卡片 / compact 列表 / feed-head+「更多 →」/ 导航分类下拉 / 热门标签 / 全部标签链接。

布局与结构：可微调，但别破坏这些钩子

可以做（大致布局不变即可）：

配色、字体、间距、圆角、阴影、hover / 微交互——随意。
布局微调：栅格列宽、板块大小 / 宽度 / 位置 / 比例 / 留白、响应式断点——随意；必要时可动 _layouts/_includes 的标记来调版式。

别破坏（JS / swiper / i18n / 契约依赖——可重新美化，但别重命名或删除这些 class 钩子与属性）：

feed：.feed[data-feed-url] 及 subsite-feed.js 渲染出的类（.feed-cards / .feed-card* / .feed-list / .feed-item* / .focused-headline / .top-post*）——CSS 里的名字要和 JS 输出一致。
i18n：data-article-i18n / data-translation-en / data-i18n / data-i18n-title / .lang-zh / .lang-en / [data-article-lang-choice] / html[data-article-lang]。
导航/汉堡：.dropdown / .dropdown-content / .nav-cats / .nav-cats-toggle / .nav-cats-menu / .open（header.js 依赖）。
swiper：.swiper-container / .swiper-wrapper / .swiper-slide / .swiper-pagination / .swiper-button-*（swiper 库依赖）。
data-feed-* 属性、assets/js/*、JSM 契约字段（front-matter / taxonomy）。

预览

仓库根 bundle exec jekyll build（产物 _site/）。首页三个真实子站 feed（daily / i-pulse / i-news）在浏览器端 fetch 渲染（bundle exec jekyll serve 可本地看动态效果）。小步 git 提交。

待定的设计小问（你可定）

首页 hero 右侧「焦点头条」这个栏目名要不要去掉？去掉 = 删 _data/home_blocks.yml 该行的 title（renderer 无 title 就不渲染 head）。
- 已定（Fable 2026-07-04）：保留。 全站小节标统一为 kicker 式（小号粗体 + 铜金短下划线），「焦点头条」保留后与「社媒快讯 / 最新文章 / 新闻速览」形成一致的版面节奏；朱红「头条」徽标在左侧 swiper 上，右侧留字避免语义重复但视觉互补。想去掉随时删 yml 一行即可。