设计语言
参考 Kami 的纸色、Flexoki 色板与 Heti 中文排版，是「海浪」全站统一遵循的设计标准。
设计原则
纸色代替纯白纯黑，不用冷灰。
字重只有 400 和 600 两级，600 只用于字号不足以区分层级的小标题。
4px 基准间距，靠留白分层级，少用分割线。
零阴影、零位移，只有 150ms 颜色过渡。
色彩
中性色阶浅色 / 深色并列展示。深色模式跟随系统设置，不提供站内切换。
| Token | Light | Dark | 用途 |
|---|---|---|---|
| bg | #F7F5EE | #100F0F | 页面画布（主背景） |
| bg-2 | #FAF9F3 | #1C1B1A | 象牙面（卡片 / 提升层） |
| ui | #E6E4D9 | #282726 | 沙面（引用块 / 代码块 / 表头） |
| ui-2 | #DAD8CE | #343331 | 次级分隔 / 边框 |
| ui-3 | #CECDC3 | #403E3C | 弱分隔线 |
| tx-3 | #B7B5AC | #575653 | 禁用 / 极弱文本 |
| tx-2 | #6F6E69 | #878580 | 次要文本 / 分割线（复用） |
| tx | #100F0F | #CECDC3 | 正文主文本 |
站内唯一的品牌色，只用于站标或极少数强调，面积不超过页面的 5%。 功能链接和交互仍用 cy。
扩展色板 分类标签 / 代码高亮预留
状态色
re / ye / gr 的含义固定，不随场景改变。cy 专用于交互（链接、当前选中项），不承担状态反馈， 避免和可点击元素混淆。
字体
全站唯一使用衬线的位置。站标固定为「海浪」两字，不参与中英文混排。
文章大标题 32px，独占页面顶部，由字号和留白区分层级，字重 400。 正文中的小标题字号接近正文，最小一级小于正文，字重 600。
其余一律 400：列表标题、卡片、表头、按钮、标签，由字号、颜色和留白区分。 层级不通过更换字体实现。
列表中重复出现的标题不加粗，由下划线标识「标题 / 链接」。
这类标题常见中英文混排（Home manager、NixOS、AI），无衬线中文字体自带配套西文字形， 混排时字重与字面一致，因此一律用无衬线。
这段文字用于演示中文排版。标题与正文统一使用无衬线字体，由字重区分层级—— This paragraph mixes Chinese and English to demonstrate optical spacing and justification in the browser.
正文用无衬线中文字体，行高 1.8，单行宽度不超过 42em。
列表标题、日期、标签常混排中文、英文和数字（例如 2026年4月5日、梦 No.12），字符之间需要间距。
中文与西文 / 数字之间留 0.25em 间距，全站自动应用，不逐处手调字距。
等宽字体用于标签与日期，需包含可用的中文字形，中西文不来自两套质感不同的字体。
链接下划线画在整个行内盒子下方，不被混排间距截断。
布局与间距
- 内容宽度 42em（约 672px），所有页面统一
- 页面左右边距 16 / 24 / 32px，随视口宽度分三级
- 页头上下留白 32px，一条分隔线，标题居左，导航居右
光与动效
没有阴影 token，也没有位移类动效，层级由色块深浅和留白区分。悬浮态为 150ms 颜色过渡。
可编辑元素（输入框）的焦点由边框变为交互色（cy）表达，替换默认轮廓；「表单」一节的输入框可以用键盘 Tab 到，看到实际效果。 其余可交互元素（链接、按钮、导航项）保留浏览器默认的焦点轮廓，不做覆盖。
组件
按钮不填色、不描边、不加粗，由颜色和字体分两级。ink 不用于按钮。
在一组同级选项中标识当前项：下划线 + 交互色（cy），不改变字重或背景。 用于导航、标签页、筛选器一类"这是我现在所在的位置"的场景。
正文链接的标准样式是下划线 + 悬停变色，不做其他变体。
摘录原文时使用：斜体，由底色和左侧色条区分，不加引号。
行内代码如 const base = 4，不加边框。
function contrast(bg, tx) {
return luminance(tx) / luminance(bg)
}
无阴影、无边框，与正文之间只留上下间距。行内小图（如插画、贴纸）限制最大宽度 300px，避免撑满整行。
输入框无边框、无底色，仅底部一条分隔线；聚焦变 cy，禁用变 tx-3。多选项用同一套边框按钮，选中态填边框色。 提交结果用状态色的文字提示：成功 gr，需留意 ye，失败 re——与输入框校验错误共用 re。
集合为空时的占位：单行文字，弱化色（tx-3），居中，不加边框、背景或图标。
列表统一后不再按语言分区：条目默认展示"当前站点语言"对应的标题，另一语言版本以日期旁的小徽章（如 EN / 中）呈现，点击直达该语言的详情页。
| Token | 用途 |
|---|---|
| cy | 链接 / 交互态 |
| ink | 品牌强调（稀有） |