Seesaw Wiki UI 设计系统 · HowToCook 风格

editorial/杂志风 · 米白纸张底 + 砖红主色 + Literata/Noto Serif SC 衬线标题。 灵感源自 HowToCook 项目的烹饪书质感：温暖、可读、有油墨印刷的厚重感。

本文档为 astro-wiki 现行设计系统（2026-06-07 实施落地，替换原 webv2 暖橙浅色方案）。原型见 astro-wiki/public/mock-howtocook*.html，旧方案存档于项目根 ui-design-system.md + git tag webv2（回滚点）。章节结构对齐旧文档便于对照。

实施变更补记（落地时相对原型/规范的调整，详见各章节内说明）：①标题英文衬线 Literata → Source Serif 4（与中文黑体更协调）；②引用块衬线斜体 → 无衬线正文体（中英混排不别扭）；③中文强调用楷体 + 禁合成假斜（§3.1.1）；④筛选改分类 pill 单选（废弃 tag 多选/排除，§5.4）；⑤TOC scroll-spy 改几何判定（§6.3）。

1. 设计原则

与 webv2 的核心差异：webv2 是"温暖克制的 SaaS 工具"（无衬线 + 低饱和橙），本方案是"温暖厚重的杂志读物"（衬线 + 高饱和砖红）。

2. 色彩系统

所有颜色用 Hex 定义为 CSS 变量。

2.1 基础色板

2.2 分类标识色（category dot）

卡片左上的圆点按四分类着色，呼应 wiki 的 category 字段：

2.3 Backlink 类型色

详情页 backlinks 列表的类型徽标（S/C/E）：

2.4 透明度衍生色

3. 字体系统

3.1 字体族

Google Fonts 引入：

Noto+Serif+SC:wght@400;500;600;700
Noto+Sans+SC:wght@400;500;600
Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500
Plus+Jakarta+Sans:wght@400;500;600
JetBrains+Mono:wght@400;500

设计意图：标题用 Source Serif 4（Adobe 思源系衬线，与 Noto Serif SC 同源血统，字形端正挺括、对比适中），中英混排时英文与中文黑体配合最协调。曾用 Literata（长文正文体），但其低对比软字形做标题时与中文黑体气质不搭，已替换。

3.1.1 中文排版规则（关键）

中文没有真正的斜体字形，衬线/黑体被强制 font-style: italic 会变成浏览器合成假斜（生硬倾斜），很难看。规则：

• 全局禁止合成斜体：body { font-synthesis-style: none; font-synthesis: weight; } —— 浏览器只用字体自带斜体字形（拉丁文有），对楷体等无斜体字形不合成倾斜。
• 强调词用 --emphasis：em / i / cite 走 --emphasis，拉丁文用 Source Serif 4 真斜体，中文 fallback 到楷体（系统字体 Kaiti SC/STKaiti/KaiTi，不引网络字体）保持端正。
• 斜体只用于短强调词，不用于整段中英混排（长段落斜体歪、对齐差）。
• 大标题里的强调不换字体/不斜体，仅用砖红色区分（如首页 hero「编译」二字 = 同 serif + 砖红正体）。

3.2 字号与字重阶梯

eyebrow 规范：12px / 砖红 / 600 / letter-spacing: 0.12em / text-transform: uppercase，是 HowToCook 风格的标志性元素（每个区块顶部的小标签）。

4. 间距与圆角

4.1 圆角

4.2 间距参考

5. 组件样式规范

5.1 顶部栏 (Topbar)

• 高度 64px，border-bottom: 1px var(--border)
• position: sticky; top: 0; z-index: 10
• 毛玻璃：background: rgba(251,249,248,.85); backdrop-filter: blur(10px)
• 内容区 max-width: 1280px（首页）/ 1680px（文章），居中
• 品牌：serif 20px/700 + 砖红方点（brand-dot 8×8px 圆角2px）
• 导航：sans 14px/500，gap: 28px，hover/active → 砖红

5.2 Hero（首页头部）

• padding 64px 0 32px
• eyebrow（小标签）→ h1（serif 44px，强调词 = em 同 serif + 砖红正体，不换字体不斜体）→ 描述段（16px/text-2/max-width 560px）

5.3 统计卡片 (Stat)

• surface 底 + border + 圆角14px + padding 22px 24px
• 结构：右上箭头（→）+ label（12px mono uppercase）+ 大数字（serif 40px）
• hover：translateY(-2px) + 边框转 border-strong + 阴影 0 4px 14px rgba(89,65,57,.06)
• hover 时箭头 → 砖红 + translateX(2px)

5.4 筛选胶囊 (Pill)

• 胶囊圆角 + surface 底 + border，padding 7px 16px，13px/500
• 计数用 mono 11px，opacity: 0.6
• active：砖红底 + 白字
• hover：边框转 strong + 文字转 text

筛选模型：列表页（summaries/concepts/entities）用分类 pill 单选筛选（全部 / Investment / AI / Science / Humanities），点击即过滤卡片并同步到 URL ?cat=xxx（可分享/刷新保持）。首页分类 pill 直接跳列表页带 ?cat=。 旧 webv2 的「tag 多选 + 双击排除 + sessionStorage」交互已废弃——顶栏布局无侧边栏承载，且分类单选已覆盖主要筛选需求。tag 仅作展示（卡片上的小胶囊）不参与筛选。

5.5 区块标题 (Section Head)

• display: flex; align-items: baseline; justify-content: space-between
• h2 serif 28px + 计数（mono 14px text-3）
• 右侧 "View all →"（砖红 13px，hover 下划线）

5.6 摘要列表项 (List Item)

• 容器 list：surface + border + 圆角14px + overflow: hidden
• 项 grid-template-columns: 1fr auto，padding 18px 24px，底分隔线
• 左：标题（serif 17px/600）+ 标签行；右：日期（mono 12px text-3）
• hover：底色转 surface-2 + 标题转砖红
• 最后一项无底边框

5.7 内容卡片 (Card)

• surface + border + 圆角14px + padding 22px 24px，min-height: 140px
• flex-direction: column; gap: 12px
• 结构：category meta（圆点+分类名 uppercase）→ h3（serif 18px）→ 描述（13px text-2，flex:1）→ 卡脚（border-top: 1px dashed，mono 11px 显示 sources/backlinks）
• hover：translateY(-2px) + border-strong + 阴影 + h3 转砖红

5.8 详情页三栏布局

• max-width: 1680px，grid-template-columns: 260px minmax(0,1fr) 240px，gap: 64px
• 左栏（rail-left，sticky top 96px）：返回链接 + Meta 表（type/created/words/read/backlinks，mono key + 右对齐 val）+ Source
• 中栏（article）：eyebrow → h1 → article-sub（serif 斜体 18px）→ article-meta（上下边框，mono）→ tags-row → prose → backlinks
• 右栏（rail-right，sticky）：TOC

5.9 Category Badge

• primary-soft 底 + 砖红字 + 圆角9999px，padding 3px 10px，11px/600 uppercase
• 前置 currentColor 实心小圆点（6×6px）

5.10 Pull-quote（装饰性引用）

HowToCook 风格的标志组件，区别于普通 blockquote：

• margin: 48px -16px（负边距溢出）+ padding 32px 32px 32px 56px
• surface 底 + border + 圆角14px
• serif 22px/500，letter-spacing: -0.01em
• ::before 巨大装饰引号（serif 64px 砖红，绝对定位左上）
• .cite 署名（sans 13px text-3，块级）

5.11 Backlinks 块

• surface + border + 圆角14px + padding 24px，margin-top: 80px
• 标题 serif 18px + 计数 mono
• 每项：类型徽标（20×20px 方角，S/C/E 配色见 §2.3）+ 标题（serif 14px，省略号截断）+ 片段（mono 11px）
• hover：底色 surface-2 + 标题转砖红

5.12 阅读进度条 (Progress)

• position: fixed; top: 0; left: 0; height: 2px
• 砖红，z-index: 20，宽度随滚动 JS 更新（transition: width .1s）

5.13 wikilink（行内链接 chip）

• 砖红 + 500 + 虚线下边框 rgba(171,53,0,.4)
• ::before 前置 ↗（0.75em，text-3）
• hover：下边框转实砖红

6. 交互规范

6.1 过渡时长

6.2 悬浮效果（统一模式）

• 卡片类（stat/card）：translateY(-2px) + border-color: border-strong + box-shadow: 0 4px 14px rgba(89,65,57,.06)
• 列表/backlink 类：底色转 surface-2 + 标题转 primary
• 链接/导航：颜色转 primary
• 箭头：translateX(2px) + 转 primary

6.3 激活状态

• 导航 active → 砖红
• pill active → 砖红底白字
• TOC active → 砖红 + 左边框砖红 + 500

TOC scroll-spy 实现：不用 IntersectionObserver 的 isIntersecting（窄判定带在向上滚动时会出现"无任何标题命中→无高亮"的空窗）。改用 scroll 监听（requestAnimationFrame 节流）+ 几何判定：高亮最后一个 getBoundingClientRect().top <= 110px（顶部判定线，topbar 64 + 余量）的标题；滚到页面底部时强制高亮末项。只对 TOC 里实际存在的标题 id 生效。

6.4 滚动行为

• html { scroll-behavior: smooth }
• 标题 scroll-margin-top: 96px（避开 sticky topbar）

7. 布局结构

7.1 整体

• 首页：单列流式，max-width: 1280px 居中
• 详情页：三栏 260px / 1fr / 240px，max-width: 1680px

7.2 各页面最大宽度

7.3 网格布局

• 统计行：repeat(3, 1fr) gap 16px
• 卡片网格：repeat(3, 1fr) gap 16px
• 列表：单列（grid 1fr auto）

7.4 详情页双 rail sticky

• 左右 rail 均 position: sticky; top: 96px; align-self: start
• 右 rail TOC 额外 max-height: calc(100vh - 96px); overflow-y: auto

8. 滚动条

沿用 webv2 思路（暖米色细滚动条）：

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

9. 阴影

本风格阴影克制（纸张质感靠边框而非投影），仅 hover 用：

暖棕色调阴影（89,65,57 而非纯黑），与米白底融合更自然。

10. 响应式断点

比 webv2 少一档（webv2 有 768/640），因本风格首页结构更简单。可按需补 ≤640px 移动端细调。

11. Tailwind 配置速查

若迁移到 Tailwind（astro-wiki 现栈），tailwind.config 扩展：

theme: {
  extend: {
    colors: {
      bg: '#FBF9F8', surface: '#FFFFFF', 'surface-2': '#F5F0EC',
      text: '#1B1C1C', 'text-2': '#594139', 'text-3': '#8B7770',
      primary: '#AB3500', 'primary-soft': '#FBE7DD',
      border: '#E8DCD5', 'border-strong': '#E1BFB5',
    },
    fontFamily: {
      serif: ['Literata', 'Noto Serif SC', 'serif'],
      sans: ['Plus Jakarta Sans', 'Noto Sans SC', 'system-ui', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    borderRadius: { card: '14px' },
    boxShadow: { hover: '0 4px 14px rgba(89,65,57,0.06)' },
    maxWidth: { content: '1280px', wide: '1680px' },
  }
}

12. 路由结构

沿用现有（不变）：/ /summaries /concepts /entities /daily /search + /s/[name] /c/[name] /e/[name]。

13. 数据类型

沿用现有 frontmatter schema（summary/concept/entity + category 四分类），UI 改版不影响数据层。详情页左 rail 的 Meta 表字段映射：type created + 计算字段 words/read(估算)/backlinks(统计)。

14. Markdown 元素样式规范（prose）

prose 容器：font-size: 17px; line-height: 1.8; color: var(--text)，段落间距 > * + * { margin-top: 1em }。

14.1 标题层级

14.2 正文段落

• color: var(--text)，line-height: 1.8，17px

14.3 行内元素

• strong：600 + var(--text)
• em：用 --emphasis，拉丁文 Source Serif 4 真斜体 + 中文楷体正体（font-synthesis-style: none，见 §3.1.1）
• code（行内）：mono 13px + surface-2 底 + padding 2px 6px + 圆角4px + text-2 色

14.4 链接

• 砖红 + 下划线（text-decoration-color: rgba(171,53,0,.3)，text-underline-offset: 3px）
• hover：下划线转实砖红

14.5 wikilink

见 §5.13（行内 chip，前置 ↗ + 虚线下边框）

14.6 无序列表

• padding-left: 1.5rem，li 间距 0.4em，line-height: 1.75
• li::marker 砖红（标志性细节）

14.7 有序列表

• 同无序，li::marker 砖红，数字用默认 + 砖红色

14.8 表格

建议（mock 未含，补全）：

• 全宽，border-collapse: collapse
• th：serif 600 + surface-2 底 + 左对齐 + padding 10px 14px
• td：padding 10px 14px + 底边框 var(--border)
• 行 hover：surface-2

14.9 引用块 (Blockquote)

• border-left: 3px solid var(--primary) + primary-soft 底
• padding 16px 20px，border-radius: 0 8px 8px 0
• 无衬线正文体（--sans）16px 正体 + var(--text-2)，line-height: 1.8，内部 p { margin: 0 }
• 引用块内加粗：strong 砖红 600；em 也降级为砖红 600 正体（不用衬线/斜体）

为何不用衬线斜体：HowToCook 原型的衬线斜体引用块是为英文短金句设计的。实际 wiki 引用多为「中文 + 英文术语 + 加粗」的长段落混排——衬线斜体会让英文歪斜、与端正中文对齐差，衬线粗体（Noto Serif SC bold）又笨重发黑。改用正文无衬线后 CJK 渲染干净、中英字高自然对齐，区分度靠左边框 + 浅砖红底而非字体。短金句仍用 Pull-quote（§5.10）走衬线。

14.10 Pull-quote

见 §5.10（装饰性大引用，区别于普通 blockquote）

14.11 代码块 (Code Block)

建议（mock 未含，补全）：

• surface-2 或更深米色底，padding 16px 20px，圆角 8px
• mono 13px，overflow-x: auto
• 可选语法高亮（暖色调主题，避免冷色 VS Code 默认）

14.12 分割线 (hr)

• border-top: 1px solid var(--border)，上下 margin 32px

14.13 图片

• max-width: 100%，圆角 8px，可选 border: 1px var(--border)
• 配 figcaption：mono 12px text-3 居中

14.14 任务列表 / 脚注 / 定义列表 / 键盘键 / 上下标 / 告示块

沿用 webv2 §14.12-14.19 的规范，仅替换配色 token（橙→砖红，灰→暖棕）和字体（标题改 serif）。告示块（admonition）建议四类配色复用 §2.2 分类色。

14.15 数学公式 / 嵌入媒体

KaTeX/iframe 沿用 webv2，容器加 var(--border) 边框 + 圆角14px 融入纸张风格。

关联页面

• ui-design-system.md（项目根目录）— 现行 webv2 暖橙浅色主题设计系统（本方案的对照基准）
• 我把ClaudeDesign做成了Skill人人人都能成为顶级网站设计师 — 设计方法论
• CloudDesign
• WebDesignEngineerSkill

迁移备注：mock 原型在 astro-wiki/public/mock-howtocook.html（首页）和 mock-howtocook-article.html（正文）。改版前存档 tag webv2。