概覽
設計系統
沉穩表面、貼合的控制項與清楚文件，構成 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) }}響應式預覽與來源使用相同的專案 token 定義。
- --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，圖說則說明觀察重點。表格與索引自行管理外框。
集中呈現數值
| Token／class | 角色 |
|---|---|
--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 表與實用範例。
- 示範瀑布圖共用的示範瀑布圖與實用範例。
- 圖表群組共用的基準測試圖表群組與實用範例。
- 基準測試指標共用的基準測試指標與實用範例。
- 基準測試資料表共用的基準測試資料表與實用範例。
- 基準測試來源共用的基準測試來源顯示與實用範例。
- 組合範例目錄以原生可展開區塊收納完整的組合範例。