把日子写下来，
也把秩序定下来。
这是木冬的设计规范。它把站点里实际在用的颜色、字号、间距与组件整理成一套可查阅、可复用的系统—— 规范即实现，示例用的就是站点真实样式。
设计原则
四条原则决定取舍：当不确定怎么选时，回到它们。
克制
一屏只讲一件事。颜色只用一处强调，动画只为解释状态，不做无意义的装饰。
纸感
底色是暖白，字是墨黑，分隔线极淡。像在纸上写字，而不是在屏幕上填表。
留白
用间距建立层级，而不是靠边框和色块。留白是最便宜也最有效的排版工具。
光线
玻璃、柔和阴影与低对比背景，模拟自然光落在纸面上的层次，而不是硬邦邦的投影。
色彩系统
所有颜色以 CSS 变量提供，明暗两套自动切换。点击色块可复制变量名。色值格式为「浅色 · 暗色」。
- 强调色只用于一处：主按钮、当前项、关键链接。
- 正文用
--ink，次要信息用--ink-2。 - 分隔用
--line，不要用深灰实线。
- 不要同时使用强调色和暖色做同一层级的强调。
- 不要给大面积背景上高饱和色。
- 不要用
--muted承载重要正文（见 09 无障碍）。
字体系统
拉丁字与中文字一一对应：标题用衬线（Fraunces / 思源宋体），正文用无衬线（Inter / 思源黑体）， 标签用等宽感几何体（Space Grotesk / 思源黑体）。中文不做合成斜体，标题启用比例标点（palt）。
.h-displayclamp(40px, 8vw, 108px)行高 1.02字重 300首屏主标题.h-sectionclamp(32px, 4.4vw, 56px)行高 1.08字重 300区块标题.h-card24px行高 1.28字重 400卡片 / 列表标题这里是木冬的日记与照片。没有主题，也没有更新频率。
.ledeclamp(16px, 1.35vw, 19px)行高 1.72字重 400导语 / 副标题今天下班绕了远路，从运河边走过去。十月末的风已经有凉意了，但还没到要穿外套的程度。
body16px行高 1.65字重 400正文.label11.5px字距 0.16em大写小标签- 标题层级最多用到
.h-section，正文页不重复首屏大标题。 - 中文标题行高不小于 1.02，避免宋体上下拥挤。
- 正文每行控制在 60ch 内。
- 不要给中文加斜体（无真斜体，合成会变形）。
- 不要用字重 700 以上的中文标题，会失去纸感。
- 不要混用两套衬线字体。
间距与布局
间距以 4px 为基准，常用 8 的倍数。容器最大宽 1180px，两侧留白 32px。
--maxw | 1180px |
--gutter | 32px |
--radius-sm | 10px |
--radius | 18px |
--radius-lg | 28px |
| 断点 | 1000 / 760 / 620px |
圆角 · 阴影 · 玻璃
圆角表达柔和，阴影表达层级，玻璃表达「悬浮在内容之上」。
动效
动效只解释状态变化：进入、悬停、切换。默认缓出，短促不拖沓；尊重系统的「减少动效」设置。
| 微交互 | 0.25s |
| 悬停 | 0.35s |
| 位移 / 展开 | 0.5s |
- 当系统开启「减少动效」时，所有动画与过渡降到 0.001ms，骨架屏停止闪烁，平滑滚动关闭。
组件库
以下示例直接使用站点真实类名，所见即所用。
账号信息
- 用户名
- mudong
- 角色
- 管理员
- 最近登录
- 2026-10-29 09:00
修改密码
图标
统一为 24×24 视图、线性描边、stroke="currentColor"，随文字颜色走。
| 属性 | 规范 |
|---|---|
| 画布 | 24 × 24，四周留 2px 安全区 |
| 描边 | 1.6（常规）/ 1.8（搜索、小尺寸） |
| 颜色 | currentColor，不写死色值 |
| 可访问性 | 纯装饰加 aria-hidden="true"；有语义时配 aria-label |
无障碍
目标：正文达到 WCAG AA（≥ 4.5:1），大字号达到 AA Large（≥ 3:1）。以下是实测对比度。
--muted在浅色底上约 2.99:1，未达 AA。它只用于装饰性小字（如标签、页脚说明），不承载关键信息。- 需要达标的次要文字，改用
--ink-2（7.30:1），或临时用#6b6b74（4.68:1）。 - 深色主题下
--muted为 5.32:1，可直接使用。
- 所有交互元素有
:focus-visible焦点样式。 - 移动端可点区域 ≥ 44×44px。
- 图片写
alt，纯装饰图标加aria-hidden。 - 动态区域用
aria-live="polite"播报结果。
- 不要只靠颜色表达状态（如仅用红色表示错误）。
- 不要移除浏览器默认焦点轮廓却不给替代。
- 不要让正文小于 14px。
使用规范
新页面、新组件落地时，按这份清单自查。
| 1 | 只用 token，不写死色值 / 字号 |
| 2 | 间距取 4 的倍数 |
| 3 | 明暗两套都检查 |
| 4 | 760px / 620px 断点检查 |
| 5 | 键盘可操作、焦点可见 |
| 6 | 尊重 prefers-reduced-motion |
style.css | 全局 token 与组件样式 |
cjk-fonts.css | 中文字体切片（脚本生成） |
design-system.css | 本规范页骨架 |
| 类名 | 小写 + 连字符，语义化（.entry-item） |
| 状态类 | .is-* / .active |
- 如果一处样式要重复三次以上，就把它变成 token 或组件类，而不是复制粘贴。