设计语言
以 Kami 的纸色、Flexoki 的配色和 Heti 的中文排版为起点，整理成海浪自己的页面语言。
设计原则
纸色与暖灰构成底色，不用纯白、纯黑或冷灰。
字号区分层级；只有需要强调时，才增加字重。
优先用空间安排内容，分隔线只在必要时出现。
不加阴影，不做位移。交互只用颜色回应。
色彩
同一组颜色适配浅色与深色模式；深色模式随系统设置切换。
| 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。
扩展色板 可用于分类标签和代码高亮
状态色
错误、警告与成功各有对应的颜色。cy 留给链接和选中项，不与状态提示混用。
字体
衬线只出现在「海浪」站标上；内容使用无衬线字体。
文章标题保持轻一些，正文小标题再加重。标题字号为 32px，字重分别为 400 和 600。
其他标题、表头、按钮和标签保持 400。层级交给字号、颜色与留白，不靠换字体或一味加粗。
标题不额外加粗；下划线贯穿整行，让标题与链接保持为一体。
中英文混排时沿用同一套无衬线字形，避免字形和字重忽然跳变。
傍晚沿河走回家，路过常去的书店，想起 The Old Ways 里写过的那条路。 A short walk before the rain.
正文使用无衬线字体，行高 1.8，行宽不超过 42em。
日期、标题和标签常在中文里穿插英文与数字。细小的字间距由排版自动处理，不必逐处调整。
中文与西文、数字之间增加 0.25em 间距。
标签与日期使用包含中文字形的等宽字体，让中西文看起来协调。
下划线沿整段链接延伸，不被中西文之间的间距打断。
布局与间距
- 正文宽度为 42em（约 672px）
- 页面两侧留白随屏幕宽度变化：16px、24px 或 32px
- 页头上下留白 32px；标题左对齐，导航右对齐，下方以细线分隔
动效与焦点
不使用阴影或位移动效，层级由颜色和留白区分。悬停时颜色过渡 150ms。
输入框聚焦时以 cy 标出边框，可用 Tab 键查看下方表单。其他链接、按钮和导航项保留浏览器的焦点提示。
组件
按钮不做成色块。主要操作沿用正文样式，次要操作降低文字对比并使用等宽字体；两者都不加粗、不描边。ink 不用于按钮。
下划线与 cy 一起标出当前位置，不加底色，也不加重字重。适用于导航、标签页和筛选器。
正文链接的标准样式是下划线 + 悬停变色，不做其他变体。
引文保留斜体，以底色和左侧色条标出，不另加引号。
行内代码如 const base = 4，不加边框。
function contrast(bg, tx) {
return luminance(tx) / luminance(bg)
}
图片不加阴影或边框，与正文之间留出距离。插画、贴纸等小图宽度不超过 300px。
输入框只留底边框，聚焦时变为 cy，禁用时文字变淡。多选项以边框颜色表示选中状态。 提交结果用颜色区分：gr 表示成功，ye 表示警告，re 表示失败；输入错误也用 re。
内容为空时，只显示一行居中的浅色文字，不添加多余装饰。
| Token | 用途 |
|---|---|
| cy | 链接 / 交互态 |
| ink | 品牌强调 |