Lassie 设计规范

Lassie 是为 Jovialchap 构建的 Zola 单栏博客主题，面向技术教程、个人记录和长期知识沉淀。当前视觉方向以 翠墨好奇编辑部（Jade Curiosity Editorial） 概括：奶油纸面、深色墨水、翡翠绿批注与低对比度工程方格共同构成克制、清晰、可靠的阅读环境。

核心原则

• 内容优先于装饰，视觉顺序依次为标题、正文、交互、元信息、结构线与背景；
• Light 与 Dark 使用同一层级体系，只替换语义颜色；
• 留白、表面色和 1px 边框负责结构，阴影只提供轻微深度；
• 绿色只表达品牌与交互，状态色只表达对应状态；
• 动效必须说明 hover、focus、展开、退出或操作结果，不做持续装饰动画。

品牌语言

• 奶油黄 #FFEEA3：Logo 主体与站名；
• 金褐色 #BA9B48：仅用于 Logo 轮廓；
• 鲜绿色 #2ECC71：Logo 问号、页头与页脚框架线、站名 hover。

全站功能强调色使用可读性更高的翡翠绿色阶。奶油黄不用于正文链接或按钮，金褐色不扩展到其他组件。

视觉元素的职责固定为：直线用于结构与分隔，渐缩线用于正文 H2，波浪线用于正文链接与卡片标题交互，4px 左边线用于状态提示，3px 翡翠绿顶线仅用于特殊文章格式。

色彩系统

Token	Light	Dark	用途
--theme-canvas	#F4F6F1	#0F1511	页面画布
--theme-surface	#FFFDF6	#171E19	卡片与文章表面
--theme-surface-muted	#F8F5E8	#202820	标题区与次级面板
--theme-panel	#EFF2EA	#121813	引用、代码外围
--theme-chrome	#162119	#090F0B	页头与页脚
--theme-line	#D9E0D7	#2A372E	普通分隔线
--theme-line-strong	#AAB6AA	#445548	输入框与浮层边界
--theme-ink	#1C2921	#F2F5EE	标题与主要文字
--theme-content	#253229	#D0D8D1	长文正文
--theme-muted	#657168	#98A59A	元信息与次级操作
--theme-faint	#98A199	#657267	禁用态与装饰
--theme-accent	#187545	#62D58A	链接、焦点、交互
--theme-accent-strong	#0E5933	#99E6B0	hover 与高强调状态
--theme-accent-soft	#E1F3E7	#193A25	标签与信息底色
--theme-on-accent	#FFFFFF	#07160C	强调背景上的文字
--theme-on-chrome	#F7F7EF	#F6F4E9	chrome 主要文字
--theme-on-chrome-muted	#C8D2C8	#B9CBBB	chrome 次级文字
--theme-mark	#DCF0E2	#284832	搜索命中
--theme-selection	#BEE4C9	#2E5940	文本选择

状态色不参与品牌装饰：Success 使用 #147A6A / #54CFBA，Warning 使用 #A66200 / #F0B45D，Danger 使用 #B5473C / #FF8C82，Info 使用 accent。

字体与排版

• Logo：人物问号图形 + Acme 站名；
• 标题与正文：Fira Sans + 系统中文无衬线栈；
• 代码：Fira Code；
• 正文理想行长为 38–44 个中文字符或 65–75 个拉丁字符；
• 标题使用 text-wrap: balance，正文使用 text-wrap: pretty；
• 正文链接继承正文的字重，避免中英文字体回退造成粗细差异。

用途	Desktop	Mobile	字重
Logo 图形	3.125rem	2.375rem	—
Logo 站名	1.875rem	1.3rem	400
页面 H1	1.875rem	1.6rem	700
正文 H2	1.5rem	1.35rem	700
正文 H3	1.25rem	1.18rem	600
正文	1.0625rem	1rem	400
元信息	0.8125rem	0.78rem	400
代码	0.8125rem	0.78rem	400

布局与形状

• 主容器宽度 52rem；Desktop 水平内边距至少 1.25rem，Mobile 为 1rem；
• Mobile 页头与页脚共享 1rem 外层边距；页脚文字额外内缩 .375rem，补偿 Logo 与图标字形的天然留白；
• 主要断点 48rem，窄屏微调断点 30rem；
• 间距以 4px 为基准；
• 卡片、面板、按钮和输入框使用 2px 微圆角；
• 普通结构使用 1px 中性边框，标准卡片和普通页面不使用强调色顶线；
• 画布保留 32px 静态方格与一个低透明度绿色径向光晕；
• 一级容器使用轻阴影，内部组件保持无阴影，卡片 hover 不上浮。

标题系统

• H1：页面唯一主标题，不加装饰线；
• H2：文本宽度的 2px 渐缩线，左右渐隐、上下同时向中心收束；
• H3：文本宽度的 1px 低透明度翡翠绿线；
• H4–H6：依靠字重、字号和颜色建立层级，不加装饰线；
• 标题锚点仅在标题 hover 或锚点 focus 时淡入，不参与装饰线宽度计算。

链接系统

• 正文链接默认使用 accent，卡片标题默认使用 ink；
• 正文链接的波浪线默认保持 36% 可见度，在文章与连续链接列表中采用同一规则；卡片标题波浪线默认透明；两者在 hover/focus 时原地淡入；
• 波浪线粗细为 .08em，偏移为 .28em，使用 text-decoration-skip-ink: none；
• 动画只改变文字颜色与下划线颜色，不缩放、移动或切换线型；
• 原生 text-decoration 负责多行排版、缩放和文本选择，不使用 SVG 或 Canvas 重绘；
• .link-underline-reveal 用于透明波浪线淡入，.link-underline-subtle 用于 36% 可见波浪线淡入，.link-underline-dismiss 用于常驻直线淡出，.link-no-line 用于无下划线 UI 链接。

组件规则

页头与导航

• Desktop 高度约 80px，Mobile 约 58px；
• Logo 图形覆盖 TITLE 与 DES 的完整高度；
• 页头与页脚使用 chrome，边缘保留 2px 鲜绿框架线；
• Mobile 使用独立搜索按钮与菜单按钮，菜单内不重复搜索链接。

内容容器

• 标准卡片顺序为元信息、标题、摘要、次级操作；
• “发表评论”与“阅读全文”使用相同颜色；
• 特殊格式卡片可使用 3px 翡翠绿顶线和低透明度 watermark；
• 文章标题区使用 surface-muted，正文使用纯净 surface；
• 代码块、引用、表格和表单使用中性结构线，窄屏内容允许横向滚动；代码复制按钮在支持 hover 的设备上仅于代码块 hover 或键盘聚焦时显示，触屏设备保持常显。

浮层、工具与页脚

• Popup 位于上方中间：Desktop top: 7rem，Mobile top: 5rem，只做 opacity 动画；
• 在至少 84rem 的大屏上，文章目录固定在正文右侧，不显示目录图标，并随 360px 阅读阈值直接显示或隐藏；较小视口使用右下角目录按钮，1025px–84rem 时沿用相同的自动展开/收起逻辑，平板与手机默认收起；
• 主题切换与返回顶部固定在右下角，视觉尺寸 Desktop 40px、Mobile 36px；
• Desktop 工具组距页面可视内容右侧 1rem，并补偿传统滚动条宽度；Mobile 使用 .5rem 与 safe-area 之和；
• 目录隐藏原生滚动条，仅在上方或下方仍有内容时显示轻微模糊提示；全局开关为 config.extra.toc，页面通过 [extra] toc = true/false 覆盖；
• 目录根据正文阅读进度标记当前章节，并在目录内部自动保持当前项可见；
• 平板与手机展开目录后，点击目录按钮和面板之外的页面区域会自动收起目录；
• 目录面板仅使用 180ms opacity 进入/退出，避免文字在合成层位移动画中失焦；在 reduced motion 下近乎即时；
• 页脚链接常驻 1px 下划线，鼠标 hover 淡出，键盘 focus 保留；
• 全局评论开关为 config.extra.comments，页面通过 [extra] comments = true/false 覆盖。

动效与可访问性

• 颜色与透明度动画为 180ms，菜单和浮层约 220–240ms；
• 禁止背景持续漂移、链接线缩放、卡片整体缩放和无意义弹跳；
• reduced motion 下关闭平滑滚动，并将动效缩短至接近即时；
• 正常正文对比度至少 4.5:1，大号文字和有意义 UI 图形至少 3:1；
• 所有键盘交互元素必须有清晰的 focus-visible；
• 实际触控区域不小于 44px；Light 与 Dark 分别检查对比度。

实施约束

1. 新组件优先复用现有语义 token、链接模式和形状；
2. 新增颜色前必须证明现有 token 无法表达该语义；
3. Light/Dark 只替换 token，不复制组件结构；
4. 不新增第三种标题线、链接动画或卡片形状；
5. 视觉变更至少检查首页、文章页、普通页面、搜索页和 Mobile；
6. 设计评审先检查信息层级，再检查装饰细节。