Overview（概述）
本文采用 Apple Human Interface Guidelines (HIG) 1 的分类方式组织，从基础到具体：Foundations → Patterns → Components。设计元素的取舍受《写给大家看的设计书》2 启发，展示方式参考了 awesome-design-md 3 项目，机器可读的 DESIGN.md 原文可通过 /design.md 访问（很奇妙吧，加个 .md 就可以了）。
| HIG 原则 | 博客体现 |
|---|---|
| Clarity（清晰） | 内容优先，UI 元素用途一目了然，无装饰性复杂度 |
| Consistency（一致） | 统一的 token 系统，相同组件在不同页面使用相同样式 |
| Deference（克制） | 克制的 hover 效果，动效保持最小化，UI 不干扰阅读 |
Foundations（基础）
Color（色彩）
配色只有两点是我认为重要的:
- Obsidian Shiba Inu 主题 4: 我在用的一个主题，最开始就是让 Claude 模仿其中的配色，不过后面逐渐走偏，变成了当前的风格。
- #FB8F68: 这个颜色源于《宝石之国》的一个角色莲花刚玉 5，我心目中的偶像。尽可能地，我希望用这个颜色来代表我，所以一般我认为需要强调的重要的，我都会用这个颜色。
切换页面主题可查看深色 / 浅色效果。(然后你会发现强调色都是 #FB8F68 😂)
Background
Text
Accent
Border & Semantic
Typography（排版）
基础字号 17px，符合 Apple HIG 推荐的移动端阅读标准。标题行高 1.22（紧凑），正文行高 1.75（宽松，适合长时间阅读），中文字距 0.01em。
中英文统一使用 open 粉圓 6（jf-openhuninn-2.0），来自台湾字型团队 justfont 的开源字体。第一次知道 justfont 是通过一期播客 7，后来挑选字体时发现他们有开源的粉圓體，圆润温暖的笔画很契合博客的调性，就用上了。
博物志 Bokushi
设计基础 Design Foundations
色彩系统 Color System
浅色主题 Light Theme
正文排版服务于长时间阅读，行高宽松，字距微调。The quick brown fox jumps over the lazy dog. 粉圓體赋予页面温暖手写感。
图片说明、脚注和次要信息
标签 · 日期 · 元数据
const design = await vibe.coding()
在正文中，粗体会以强调色渲染，而非普通的黑色加粗。这是一个有意为之的设计选择，用于视觉强调。
Dark Mode（深色模式）
正文行长控制在一行 60-80 个字符左右，避免阅读时视线来回跳太远。其余间距和圆角没什么特别的，看页面就能感受到。
深色模式采用三态循环切换：system → light → dark → system，状态保存在 localStorage，页面加载时提前注入避免闪烁。保持暖色调基底（夜棕 #140e0b 而非冷黑），阴影更厚重以在深色背景上保持深度感知。
Patterns（模式）
Content Architecture（内容架构）
站点包含三种内容类型：长文（blog）、月记（monthly）、TIL（til），三者共享统一的 frontmatter schema、排版样式和标签索引系统。
动态内容方面，Telegram 频道（/channel）采用 SSR 渲染 + 5 分钟缓存，双栏布局，支持链接预览、回复引用和长帖自动折叠。漫画表情包（/mangashots）使用无限滚动 + Cloudflare D1 存储。
Interaction（交互）
桌面端使用固定顶部导航栏，移动端切换为抽屉式导航。所有模态场景（灯箱、抽屉、目录）共享统一行为：ESC 或点击遮罩关闭、打开时锁定滚动、关闭后焦点回到触发元素。
主题切换采用三态循环按钮，点击依次切换 system → light → dark：
Components（组件）
Cards（卡片）
卡片是最常用的容器组件，提供 5 种变体。Hover 效果仅限边框颜色变化，不使用 translateY 上浮——保持视觉克制。
.surface-card
White bg, soft border, soft shadow
.surface-card--soft
No shadow, muted bg blend
.surface-card--flat
No shadow, subtle border
.surface-card--compact
Smaller radius (md)
.surface-card--hover-border
Hover to see border change
Buttons（按钮）
博客只使用图标按钮（.icon-btn），不含文字。所有尺寸满足 44px 最小触控目标，hover 时文字颜色变为 accent，无位移或缩放。
Pills & Tags（标签）
.pill 组件用于文章标签和过滤器，背景使用强调色的淡化版本，hover 时背景加深、边框显现。
Shadow & Elevation（阴影与层级）
深色模式下阴影透明度更高（更「厚重」），因为深色背景需要更强的阴影才能感知到深度。
--shadow-soft Cards, tables, images --shadow-strong Unused (reserved) --shadow-lightbox Lightbox overlay --shadow-button-hover Button hover glow Border Radius（圆角）
--radius-xs 2px --radius-sm 6px --radius-md 10px --radius-lg 16px --radius-full 9999px Spacing（间距）
--space-1 0.25rem (4px) --space-2 0.5rem (8px) --space-3 0.75rem (12px) --space-4 1rem (16px) --space-5 1.25rem (20px) --space-6 1.5rem (24px) --space-8 2rem (32px) --space-12 3rem (48px) Spoiler（剧透遮罩）
点击黑色区域揭示隐藏内容，用于剧透或彩蛋：
Lightbox（灯箱）
点击图片可打开灯箱预览，支持键盘 ← → 切换、ESC 关闭。更多表情包见 /mangashots。
Music Player（音乐播放器）
内嵌播放器组件，支持网易云音乐，黑胶唱片旋转动画。这首来自 VA-11 Hall-A 的赛博酒吧：
Guidelines（设计原则）
Do:
- 所有颜色使用 CSS 变量，不硬编码 hex
- 使用语义化 Tailwind token（
text-secondary、bg-surface） - Hover 效果仅限颜色/边框变化
<strong>用强调色渲染- 尊重
prefers-reduced-motion
Don’t:
- 不要在 hover 时使用
translateY位移动画 - 不要新增阴影层级——只用
shadow-soft和shadow-strong - 不要引入新字体或更改 17px 基础字号
- 不要绕过三态主题切换（system/light/dark）
所有文字配色满足 WCAG AA 标准 8（4.5:1+），可交互元素满足 Apple HIG 1 44x44pt 最小触控目标。键盘导航支持 ESC 关闭对话框、← → 切换灯箱图片、Tab 循环焦点。检测到 prefers-reduced-motion 时禁用所有动画。
References（参考资料）
Footnotes
-
Apple Human Interface Guidelines - Apple 官方设计规范，涵盖 Clarity、Consistency、Deference 三大原则以及色彩、排版、无障碍等全部设计领域。本文的章节结构（Foundations → Patterns → Components）直接参考了 HIG 的组织方式。 ↩ ↩2
-
写给大家看的设计书（第4版） - 亲密性、对齐、对比、重复。对于完全没有设计感的人来说，具象化了这四个名词，让跟 AI 聊博客设计的时候方便了不少。 ↩
-
awesome-design-md - 从知名网站提取设计系统的开源项目，提供标准化的 DESIGN.md 格式和可视化预览。本文的组件展示方式受其启发。 ↩
-
Obsidian Shiba Inu 主题 - 一款暖色调 Obsidian 主题，开源可自行安装体验。 ↩
-
莲花刚玉 | 萌娘百科 - 《宝石之国》中的角色，博客强调色 #FB8F68 的灵感来源。 ↩
-
open 粉圓 | justfont - justfont 的开源圆体字体，可免费下载使用。 ↩
-
帶你認識「字型設計師」！ft. justfont | YouTube - 好客室播客第 83 期，聊台湾字体设计师的工作日常。 ↩
-
WCAG 2.1 Understanding Docs - W3C 的无障碍标准解读文档，逐条解释每个成功准则的含义和达标方法。博客的对比度（4.5:1+）和触控目标（44px）等要求均来源于此。 ↩