布局与间距
默认 4px 网格，三档内容宽度，用留白和单边线分组——不用方框。
间距网格
默认密度下，全部间距落在 4px 网格上。--space-1 到 --space-32
共 12 档，跳跃式而非线性，因为视觉上有意义的间距差需要成比例增长。
| Token | 值 | 典型用途 |
|---|---|---|
--space-2 | 8px | 标签内边距、图标间隙 |
--space-4 | 16px | 表单控件内边距 |
--space-6 | 24px | 字段之间 |
--space-8 | 32px | 条目之间——卡片的替代 |
--space-12 | 48px | 区块之间 |
--space-24 | 96px | 章节之间 |
内容宽度
--width-article · clamp(520px, 55vw, 640px) —— 长文
--width-content · clamp(620px, 65vw, 760px) —— 一般内容
--width-showcase · clamp(700px, 72vw, 920px) —— 展示型
--padding-page-x · clamp(20px, 5vw, 72px) —— 页面左右留白
布局原语
wx-spread —— 两端分布
right
wx-cluster
换行的横向组
共享 gap
wx-cols--2 分栏，grid 实现，无竖向分隔线。
竖线在这套系统里几乎总是多余的——列之间的间距已经完成了分组。
分隔线是主要结构手段
wx-rule 是发丝线，也是这套系统最主要的结构手段。
它替代了卡片承担的分组职责，而不引入任何视觉噪声。
默认发丝线
短线——用于段落内的轻分隔
强线——用于章节边界
没有卡片，那怎么分组
这是这套系统被问得最多的问题。答案是三条，按优先级：
- 邻近——格式塔原则。相关的东西靠近，无关的东西远离。
--space-8和--space-12的差别足以表达"同组"与"不同组"。 - 单边线——需要更明确的边界时，加一条线，不是四条。
- 标题——一个小标题比一个方框更能说明这组内容是什么。
禁的是几何形状——四边包围的方框（边框 / 阴影 / 填充底色三者任一 + 圆角），
不是"卡片"这个名词。所以不要把它改名叫 .panel、.box、
.tile 再放回来。
高密度预设
需要更紧凑的知识工具或列表时，在根节点加 data-density="dense"。它只覆盖
--space-*，不会偷偷缩小字号、边框或触控目标；dense 为更紧凑的节奏有意使用非 4px 的值，
所以不继承默认网格承诺。这是可逆的密度选择，不是第二套视觉语言。