概览
设计系统
沉稳表面、贴合的控件与清晰文档，构成 Master 网站共用的视觉语言。
品牌指南定义品牌识别，这份手册则说明承载它的界面：浅色模式使用 Moonstone，深色模式使用 Obsidian，并共用同一套材质层级、高低顺序与示例框架。
小型文档工作区
项目的小型共用词汇
<article class="p-card r-card b(1) b-solid b-line-divider bg-surface-raised fg-text-body"> <p class="m(0) font-mono text-xs fg-brand">FIELD NOTES / 024</p> <h2 class="mt-sm mb-xs text-xl font-medium fg-text-strong">Room for the details</h2> <p class="m(0) text-sm">Color, spacing and radius come from three shared project tokens.</p></article>@theme { --color-brand: var(--color-text-link); --spacing-card: 1.5rem; --radius-card: .75rem;}生成的 CSS
@layer theme { :root, :host { --color-zinc-30: oklch(78% .0025 265); --color-zinc-70: oklch(39.8% .0028 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265); --color-blue-30: oklch(72.87% .1468 249.3); --color-blue-60: oklch(51.83% .2687 266.1) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-link: light-dark(var(--color-blue-60), var(--color-blue-30)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-weight-medium: 500; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-xl: 1.25rem; --text-xs: var(--font-size-xs); --text-xs--line-height: 1.5; --text-xs--letter-spacing: 0; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --text-xl: var(--font-size-xl); --text-xl--line-height: 1.4; --text-xl--letter-spacing: -.01em; --spacing-xs: .5rem; --spacing-sm: .75rem } :root, :host { --color-brand: var(--color-text-link); --spacing-card: 1.5rem; --radius-card: .75rem }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .text-xl { font-size: var(--text-xl); line-height: var(--text-xl--line-height, normal); letter-spacing: var(--text-xl--letter-spacing, normal) } .text-xs { font-size: var(--text-xs); line-height: var(--text-xs--line-height, normal); letter-spacing: var(--text-xs--letter-spacing, normal) } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-card { border-radius: var(--radius-card) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .fg-brand { color: var(--color-brand) } .fg-text-body { color: var(--color-text-body) } .fg-text-strong { color: var(--color-text-strong) } .font-mono { font-family: var(--font-family-mono) } .font-medium { font-weight: var(--font-weight-medium) } .m\(0\) { margin: calc(0 * 1px) } .mb-xs { margin-bottom: var(--spacing-xs) } .mt-sm { margin-top: var(--spacing-sm) } .p-card { padding: var(--spacing-card) }}响应式预览与源代码使用相同的项目令牌定义。
- --color-brand
var(--color-text-link)- --spacing-card
1.5rem- --radius-card
.75rem
#图层与材质
所有表面都位于同一套层级中：画布承载托盘，托盘承载明亮展示区，面板从展示区浮起；内凹区域低于周围表面。界面保持单色，色相只出现在具名的教学示例与状态中。
--ui-surface-canvas--ui-surface-tray--ui-surface-stage--ui-surface-sheet--ui-surface-well--ui-surface-float高度层级
sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay
sink
flat
rise-1
rise-1h
rise-2
rise-3
overlay
每层的偏移与模糊加倍，扩散则向内收。悬停时上升半个像素至 rise-1h，按下时沉入内凹区域。
同心圆角
3 · 4 · 6 · 8 · 10 · 14, nested by a 4px inset
Tray 14 → sheet 10
3
4
6
8
圆角 14 的托盘以 4px 内缩承载圆角 10 的展示区、代码窗口或面板；圆角 8 的菜单承载圆角 4 的条目。
#贴合的控件
控件共用相同材质与状态顺序。浮起表面在悬停时上升半个像素，按下时沉入内凹区域。选中的分段在内凹轨道中浮起，焦点则一律以可见的墨色轮廓表示。
Buttons
Default, primary and quiet; hover lifts, pressing sinks
hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.
Choices and fields
Selected segments rise inside a sunken track; fields float back to the sheet on focus
如实报告结果的复制
操作旁的状态会报告真实剪贴板结果，也包括被拒绝的情况。
#清晰的阅读节奏
一个示例就是一个托盘：标题栏命名、展示区呈现、代码窗口保留源代码与默认折叠的 Generated CSS，图注则说明观察重点。表格与索引自行管理外框。
集中呈现数值
| 令牌／类 | 角色 |
|---|---|
--color-brand | var(--color-text-link) |
--spacing-card | 1.5rem |
--radius-card | .75rem |
名称、数值与补充说明共用起点。
教学色彩一律具名
Context
Subject
Comparison
- Context
- Subject
- Comparison
SupportedStatic
色相只出现在示例内，并用图例或标签命名每个色调。
#完整组件参考
每页呈现组件的实际状态、网站使用位置与标记接口。编写手册涵盖布局契约与完整的组合示例集。
表面与外框 6
示例与注释 11
控件 3
文档与证据 17
- 代码窗口清晰易读的源代码、稳定的标签页与原生复制操作。
- 文档呈现模式文档呈现模式的可用示例与编写接口。
- 参数与契约参数与契约的可用示例与编写接口。
- 工具示例工具的可用示例与编写接口。
- 提示词与工作流提示词与工作流的可用示例与编写接口。
- API 声明API 声明的可用示例与编写接口。
- 样式表示例样式表的可用示例与编写接口。
- 文档索引以原生链接和可选的视图控件提供分组文档导航。
- 文档步骤共用的文档步骤与实用示例。
- Utility 对照表共用的 utility 对照表与实用示例。
- 数值 Token 表共用的数值 token 表与实用示例。
- 示例瀑布图共用的示例瀑布图与实用示例。
- 图表分组共用的基准测试图表分组与实用示例。
- 基准测试指标共用的基准测试指标与实用示例。
- 基准测试数据表共用的基准测试数据表与实用示例。
- 基准测试来源共用的基准测试来源显示与实用示例。
- 组合示例目录以原生折叠区域收纳完整的组合示例。