设计系统测试页
本页集中验证 af 设计系统的全部组件与排版规则：零阴影、无 ring、强调色只回答「这里能点吗」。所有文案都是真实中英混排， 用来检验 copy-16 在两种文字混排时的行高与节奏。
排印 Typography
标题字距：中西文统一轻微负字距
Writing is thinking, clearly.
写作就是清晰地思考。
32px 及以上标题字距 -0.03em，以下 -0.02em；中西文同此。
中文两端对齐：按段落内容判定
两端对齐是中文排版的规范：左右边界同时对齐，行尾不再参差。构建管线按段落内容判定主语言，中文段落自动两端对齐，中英文混排时也一样生效，English words inside 也不会被拉伸单词间距，只参与整体断行。
English paragraphs stay left-aligned. Justifying Latin text without hyphenation produces rivers of uneven word spacing, so the pipeline never marks them — alignment follows each paragraph, not the page.
构建期判定：CJK 字符占比 ≥25% 的段落标记 data-cjk，纯英文段落不两端对齐。
正文 copy-16（16px / 1.6）
af 是一个以写作为中心的个人站。设计语言追求安静与克制：层次靠留白与底色差表达， 而不是边框和阴影。The system keeps only two surface tones — canvas and surface — and lets typography do the heavy lifting. 强调色只回答一个问题：这里能点吗？其余一切 UI 状态都留在中性灰阶里。
行内代码使用 gray-100 底与 ui-monospace：启动开发服务器的命令是pnpm dev，构建命令是pnpm build。
链接：surface 内 accent-700 vs canvas 底 accent-800
这段文字在 surface 卡片里，其中的内容链接使用 accent-700，实测对比度 4.74:1。
这一块模拟直接放在 canvas 页面底上的文字，链接必须用accent-800（实测 6.76:1）——accent-700 在 canvas 上只有 4.56:1，余量过小，不采用。
Meta 行与引用块
2026 年 7 月 18 日 · 约 6 分钟读完 · 设计系统
层次优先依靠留白与底色差，边框是最后手段。
微染面：accent-700 低透明度面（列表项 hover / 当前项）
文章列表项，hover 出现 8% 微染
2026 年 7 月 18 日 · 随笔
当前项 12% 微染（如目录高亮）
2026 年 7 月 12 日 · 技术
量感来自面积，不来自浓度
2026 年 7 月 5 日 · 读书
字号档位
copy-20 · 用于文章开篇的引言段落，行高 36px。
copy-16 · 正文默认档，16px / 1.6，覆盖大部分文字。
copy-14 · 紧凑正文，用于卡片描述与辅助段落。
label-14 · 单行可扫读文字：导航、表单标签、表头。
label-13 · 次一级元信息。
label-12 · 最小档，用于时间戳与脚注。
按钮 Button
五种 variant（default 尺寸 h-10）
小号 sm（h-8）
大号 lg（h-12，文案升 text-base font-medium）
标签 Badge
表单 Form
Input：默认与 disabled
Textarea
Select
Switch 与 Checkbox
浮层 Overlays
Dialog / Sheet / Tooltip / DropdownMenu
ScrollArea（固定高度）
导航 Navigation
Breadcrumb
NavigationMenu（选中 / 未选中 / 下拉）
Tabs
3 篇草稿：〈界面越安静，文字越响亮〉〈把决定做少〉〈Notes on constraints〉。
Accordion
层次优先依靠留白与底色差。canvas 与 surface 之间的明度差已经足够分层， 阴影是绘图软件的思维方式，不是阅读界面的。全站零阴影，无例外。
反馈 Feedback
Toast（sonner）
Toaster 挂在根路由 __root.tsx 中，全站可用；文案遵循「说明具体改变、 不写 successfully、去掉句尾句号」。
Callout（100 底 + 1000 文字）
Skeleton
其他 Misc
Card（项目卡片，置于 canvas 表面之上）
Separator 与 Avatar
上一条 meta：2026 年 7 月 18 日发布
下一条 meta：分类 随笔 Essay