基础
空间与形状
页面的边距、几种度量宽度，以及四个圆角。
度量宽度以 ch 而不是 px 为上限，所以它跟随它所排的字。--measure-record 是列表记录描述文字的天花板，不是宽度：更窄的栏依然胜出。
圆角只有四级，没有第五级。50% 的圆是几何形状而不是圆角，所以它不算一级。
每个组件都用逻辑属性书写——ps-/pe- 而不是 pl-/pr-，start-/end- 而不是 left-/right-——所以从右到左的文档不需要自己的样式表就能镜像。构建时有测试会因为一个物理属性而失败：事后给四十个组件补方向支持，是没人会排期的清扫，而且它出错时没有任何声音。上面任何一个例子都可以切到 RTL 看看。
布局
| Token | 值 | 备注 | |
|---|---|---|---|
--maxw | 1288px | — | |
--col | 8.3333% | — | |
--row | 52px | — | |
--pad | clamp(18px, calc(4.4 * var(--fluid)), 64px) | in-card title 18 → 20px | |
--sec | clamp(54px, calc(7 * var(--fluid)), 96px) | — | |
--sec-tight | clamp(40px, calc(5 * var(--fluid)), 68px) | — | |
--secondary-text | var(--ink-3-aa) | — | |
--page-pad | var(--pad) | ─── Layout ───────────────────────────────────────────────────────────── | |
--w-page | var(--maxw) | — | |
--w-reading | 46rem | Caps the prose track only, which is what a 73ch measure is for. | |
--measure-record | 66ch | The cap on a listed record's description — a row, a card, a CV entry. In `ch` rather than px so it tracks the type it is set in, and one token rather than the six hand-picked widths surfaces had drifted into. A ceiling, not a width: a narrower column still wins. | |
--scroll-offset | 88px | How far below the viewport top an anchored heading comes to rest — a fixed masthead plus a line of air. |
圆角
| Token | 值 | 备注 | |
|---|---|---|---|
--radius-sm | 6px | ─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was "0 everywhere"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here. | |
--radius | 8px | images, thumbnails, media frames | |
--radius-lg | 14px | inputs, buttons, small plates | |
--radius-pill | 999px | feature panels, dark plates |
密度
第二条主题轴，也是唯一的另一条。在任何容器上写 data-density="compact"，它下面所有控件一起收紧，不需要逐个告知。默认状态下一个中号控件是 44px，也就是 WCAG 2.5.5 要求的指针目标；紧凑模式降到 36px，仍然宽裕地通过 2.5.8，但不再满足 2.5.5。它是给鼠标驱动的密集桌面工具用的，是一笔真实的取舍而不是白拿。上面任何一个例子都可以切过去看。
| Token | 值 | 备注 | |
|---|---|---|---|
--control-h-sm | 1.875rem | — | |
--control-h-md | 2.25rem | 30px | |
--control-h-lg | 2.5rem | 36px — clears WCAG 2.5.8, not 2.5.5 | |
--control-px-sm | 0.75rem | 40px | |
--control-px-md | 1rem | — | |
--control-px-lg | 1.25rem | — | |
--control-py-sm | 0.25rem | — | |
--control-py-md | 0.375rem | — | |
--control-py-lg | 0.5rem | — | |
--control-gap | 0.5rem | — | |
--field-px | 0.625rem | — | |
--field-py | 0.375rem | — |
图标
| Token | 值 | 备注 | |
|---|---|---|---|
--ico-s | 14px | ─── Icons ─── one stroke weight, three sizes. | |
--ico-m | 16px | — | |
--ico-l | 20px | — | |
--ico-stroke | 1.5 | — |
层叠顺序
| Token | 值 | 备注 | |
|---|---|---|---|
--z-rule | 1 | ─── Stacking ─── seven ranks, named for what sits at each. | |
--z-sticky | 10 | — | |
--z-drawer | 100 | — | |
--z-scrim | 200 | — | |
--z-modal | 210 | — | |
--z-palette | 220 | — | |
--z-toast | 300 | — | |
--z-dropdown | var(--z-drawer) | ─── Stacking ─── five component-facing names onto the seven ranks. ───── | |
--z-overlay | var(--z-scrim) | — |