視覺基礎
色彩、字體、間距與圓角，以單一 token 來源控制。
AITOM · AI TRANSFORMATION & BRAND GROWTH
同一套語言，
從畫面到系統。
延續既有留白、文字層次與灰階介面，把視覺規則轉成可操作、可驗證的設計系統。
v02 候選版本 ／ 來源抽取 + 本地控制擴充
互動契約
操作、鍵盤、回饋與錯誤，都是元件的一部分。
證據與規範
對照 WCAG 2.2 AA 目標；不把自動檢查視為符合認證。
01 / FOUNDATIONS
克制的視覺，明確的功能。
主要灰階承接原站；焦點、表單外框與狀態色是本地可及性控制。深色模式是依來源研究建立的候選映射。
canvas
#ffffffsurface
#f9f9f9subtle
#f3f3f3text
#282828muted
#5d5d5dborder
#e5e5e5primary
#171717focus
#005fccdanger
#b42318success
#18794econtrol-border
#767676間距尺度
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
圓角尺度
sm
md
lg
xl
pill
02 / SINGLE SOURCE
Token 索引
直接讀取 tokens.json，包含原始值、別名與型別；CSS 由程式產生。
顯示 96 / 96 個 tokens
primitive.light.canvascolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}原站實測 --color-surface = #fff；本地保留同值。primitive.light.surfacecolor
{"colorSpace":"srgb","components":[0.97647059,0.97647059,0.97647059],"alpha":1,"hex":"#f9f9f9"}原站實測 --color-surface-secondary = #f9f9f9；本地保留同值。primitive.light.subtlecolor
{"colorSpace":"srgb","components":[0.95294118,0.95294118,0.95294118],"alpha":1,"hex":"#f3f3f3"}原站實測 --color-surface-tertiary = #f3f3f3；本地保留同值。primitive.light.textcolor
{"colorSpace":"srgb","components":[0.15686275,0.15686275,0.15686275],"alpha":1,"hex":"#282828"}原站實測 --color-text = #282828；本地保留同值。primitive.light.mutedcolor
{"colorSpace":"srgb","components":[0.36470588,0.36470588,0.36470588],"alpha":1,"hex":"#5d5d5d"}原站實測 --color-text-secondary = #5d5d5d；本地保留同值。primitive.light.bordercolor
{"colorSpace":"srgb","components":[0.89803922,0.89803922,0.89803922],"alpha":1,"hex":"#e5e5e5"}原站實測 --color-border = color-mix(in oklab, #0d0d0d 10%, transparent)；本地採候選控制值 #e5e5e5，有差異。primitive.light.primarycolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}原站實測 --color-background-primary-solid = #181818；本地採候選控制值 #171717，有差異。primitive.light.on-primarycolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}本地新增控制值，沒有對應原站實測同名 token。primitive.light.focuscolor
{"colorSpace":"srgb","components":[0,0.37254902,0.8],"alpha":1,"hex":"#005fcc"}原站實測 --color-ring-primary = #0169cc；本地採候選控制值 #005fcc，有差異。primitive.light.dangercolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}原站實測 --color-text-danger = #911e1b；本地採候選控制值 #b42318，有差異。primitive.light.successcolor
{"colorSpace":"srgb","components":[0.09411765,0.4745098,0.30588235],"alpha":1,"hex":"#18794e"}原站實測 --color-text-success = #00692a；本地採候選控制值 #18794e，有差異。primitive.light.control-bordercolor
{"colorSpace":"srgb","components":[0.4627451,0.4627451,0.4627451],"alpha":1,"hex":"#767676"}本地新增控制值，沒有對應原站實測同名 token。primitive.light.danger-solidcolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。primitive.light.on-dangercolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。primitive.dark.canvascolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.surfacecolor
{"colorSpace":"srgb","components":[0.12941176,0.12941176,0.12941176],"alpha":1,"hex":"#212121"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.subtlecolor
{"colorSpace":"srgb","components":[0.18823529,0.18823529,0.18823529],"alpha":1,"hex":"#303030"}原站實測 --color-surface-tertiary = #131313；本地採候選控制值 #303030，有差異。primitive.dark.textcolor
{"colorSpace":"srgb","components":[0.96078431,0.96078431,0.96078431],"alpha":1,"hex":"#f5f5f5"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.mutedcolor
{"colorSpace":"srgb","components":[0.72156863,0.72156863,0.72156863],"alpha":1,"hex":"#b8b8b8"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.bordercolor
{"colorSpace":"srgb","components":[0.26666667,0.26666667,0.26666667],"alpha":1,"hex":"#444444"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.primarycolor
{"colorSpace":"srgb","components":[0.96078431,0.96078431,0.96078431],"alpha":1,"hex":"#f5f5f5"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.on-primarycolor
{"colorSpace":"srgb","components":[0.09019608,0.09019608,0.09019608],"alpha":1,"hex":"#171717"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.focuscolor
{"colorSpace":"srgb","components":[0.54117647,0.70588235,1],"alpha":1,"hex":"#8ab4ff"}原站實測 --color-ring-primary = #0285ff；本地採候選控制值 #8ab4ff，有差異。primitive.dark.dangercolor
{"colorSpace":"srgb","components":[1,0.60392157,0.56862745],"alpha":1,"hex":"#ff9a91"}原站實測 --color-text-danger = #e02e2a；本地採候選控制值 #ff9a91，有差異。primitive.dark.successcolor
{"colorSpace":"srgb","components":[0.4745098,0.84313725,0.64705882],"alpha":1,"hex":"#79d7a5"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.control-bordercolor
{"colorSpace":"srgb","components":[0.62745098,0.62745098,0.62745098],"alpha":1,"hex":"#a0a0a0"}本地新增控制值，沒有對應原站實測同名 token。primitive.dark.danger-solidcolor
{"colorSpace":"srgb","components":[0.70588235,0.1372549,0.09411765],"alpha":1,"hex":"#b42318"}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。primitive.dark.on-dangercolor
{"colorSpace":"srgb","components":[1,1,1],"alpha":1,"hex":"#ffffff"}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。semantic.light.canvas--color-canvascolor
{primitive.light.canvas}原站實測 --color-surface = #fff；本地保留同值。semantic.light.surface--color-surfacecolor
{primitive.light.surface}原站實測 --color-surface-secondary = #f9f9f9；本地保留同值。semantic.light.subtle--color-subtlecolor
{primitive.light.subtle}原站實測 --color-surface-tertiary = #f3f3f3；本地保留同值。semantic.light.text--color-textcolor
{primitive.light.text}原站實測 --color-text = #282828；本地保留同值。semantic.light.muted--color-mutedcolor
{primitive.light.muted}原站實測 --color-text-secondary = #5d5d5d；本地保留同值。semantic.light.border--color-bordercolor
{primitive.light.border}原站實測 --color-border = color-mix(in oklab, #0d0d0d 10%, transparent)；本地採候選控制值 #e5e5e5，有差異。semantic.light.primary--color-primarycolor
{primitive.light.primary}原站實測 --color-background-primary-solid = #181818；本地採候選控制值 #171717，有差異。semantic.light.on-primary--color-on-primarycolor
{primitive.light.on-primary}本地新增控制值，沒有對應原站實測同名 token。semantic.light.focus--color-focuscolor
{primitive.light.focus}原站實測 --color-ring-primary = #0169cc；本地採候選控制值 #005fcc，有差異。semantic.light.danger--color-dangercolor
{primitive.light.danger}原站實測 --color-text-danger = #911e1b；本地採候選控制值 #b42318，有差異。semantic.light.success--color-successcolor
{primitive.light.success}原站實測 --color-text-success = #00692a；本地採候選控制值 #18794e，有差異。semantic.light.control-border--color-control-bordercolor
{primitive.light.control-border}本地新增控制值，沒有對應原站實測同名 token。semantic.light.danger-solid--color-danger-solidcolor
{primitive.light.danger-solid}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。semantic.light.on-danger--color-on-dangercolor
{primitive.light.on-danger}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。semantic.dark.canvas--color-canvascolor
{primitive.dark.canvas}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.surface--color-surfacecolor
{primitive.dark.surface}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.subtle--color-subtlecolor
{primitive.dark.subtle}原站實測 --color-surface-tertiary = #131313；本地採候選控制值 #303030，有差異。semantic.dark.text--color-textcolor
{primitive.dark.text}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.muted--color-mutedcolor
{primitive.dark.muted}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.border--color-bordercolor
{primitive.dark.border}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.primary--color-primarycolor
{primitive.dark.primary}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.on-primary--color-on-primarycolor
{primitive.dark.on-primary}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.focus--color-focuscolor
{primitive.dark.focus}原站實測 --color-ring-primary = #0285ff；本地採候選控制值 #8ab4ff，有差異。semantic.dark.danger--color-dangercolor
{primitive.dark.danger}原站實測 --color-text-danger = #e02e2a；本地採候選控制值 #ff9a91，有差異。semantic.dark.success--color-successcolor
{primitive.dark.success}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.control-border--color-control-bordercolor
{primitive.dark.control-border}本地新增控制值，沒有對應原站實測同名 token。semantic.dark.danger-solid--color-danger-solidcolor
{primitive.dark.danger-solid}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。semantic.dark.on-danger--color-on-dangercolor
{primitive.dark.on-danger}本地新增：危險按鈕固定深紅底／白字配對，淺深主題均維持對比。foundation.font-family--font-familyfontFamily
["OpenAI Sans","system-ui","sans-serif"]本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-xs--font-size-xsdimension
{"value":12,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-sm--font-size-smdimension
{"value":14,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-md--font-size-mddimension
{"value":16,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-lg--font-size-lgdimension
{"value":20,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-xl--font-size-xldimension
{"value":24,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-2xl--font-size-2xldimension
{"value":32,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-3xl--font-size-3xldimension
{"value":48,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-size-4xl--font-size-4xldimension
{"value":64,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-weight-regular--font-weight-regularfontWeight
400本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-weight-medium--font-weight-mediumfontWeight
500本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.font-weight-semibold--font-weight-semiboldfontWeight
600本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.line-height-body--line-height-bodynumber
1.5本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.line-height-heading--line-height-headingnumber
1.1本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-0--space-0dimension
{"value":0,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-4--space-4dimension
{"value":4,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-8--space-8dimension
{"value":8,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-12--space-12dimension
{"value":12,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-16--space-16dimension
{"value":16,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-20--space-20dimension
{"value":20,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-24--space-24dimension
{"value":24,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-32--space-32dimension
{"value":32,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-40--space-40dimension
{"value":40,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-48--space-48dimension
{"value":48,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-64--space-64dimension
{"value":64,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-80--space-80dimension
{"value":80,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.space-96--space-96dimension
{"value":96,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.radius-sm--radius-smdimension
{"value":8,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.radius-md--radius-mddimension
{"value":12,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.radius-lg--radius-lgdimension
{"value":16,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.radius-xl--radius-xldimension
{"value":24,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.radius-pill--radius-pilldimension
{"value":9999,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.motion-fast--motion-fastduration
{"value":120,"unit":"ms"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.motion-normal--motion-normalduration
{"value":200,"unit":"ms"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.motion-easing--motion-easingcubicBezier
[0.2,0,0,1]本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.content-max--content-maxdimension
{"value":1440,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。foundation.control-min--control-mindimension
{"value":44,"unit":"px"}本地規格尺度；對應來源實測與適用差異見 docs/components.md，並非 OpenAI 官方 token。component.button-radius--button-radiusdimension
{foundation.radius-pill}本地新增控制值；來源差異見 docs/extraction.md。component.card-radius--card-radiusdimension
{foundation.radius-lg}本地新增控制值；來源差異見 docs/extraction.md。component.dialog-radius--dialog-radiusdimension
{foundation.radius-xl}本地新增控制值；來源差異見 docs/extraction.md。找不到相符 token。請縮短關鍵字，或清除搜尋。
03 / TYPOGRAPHY
讓內容決定層次。
OpenAI Sans 使用本地來源字型，缺字時回退系統字型。英文與繁體中文混排需分別目視驗收。
Display · font-size-3xl / line-height-heading / regular
Turn ideas into progress.
Heading · font-size-2xl / line-height-heading / medium
把想法轉成下一步。
Body · font-size-md / line-height-body / regular
好的介面把複雜留在背後，讓學習自然發生。閱讀、探索，再動手試一次。
Supporting · font-size-sm / line-height-body / regular
狀態、補充說明與來源。輔助文字仍保留足夠對比。
05 / INPUT
錯誤也要有下一步。
06 / PATTERNS
熟悉的操作，一致的契約。
分頁切換
原站語言，本地元件。
灰階底色、膠囊操作、清楚標題與充足留白。此展示頁為本地新增。
方向鍵切換，Tab 進入內容。
左右方向鍵、Home、End 移動並啟用分頁；只有目前分頁進入 Tab 順序。
名稱、狀態與關係同步。
tab、tabpanel、aria-selected、aria-controls 與 aria-labelledby 成對連結。
展開／收合
目前以 AA 作為驗收目標。完整符合性仍需逐項人工、輔助科技與完整流程驗證；不能僅憑 token 對比檢查宣稱符合。
查看完整控制規範狀態訊息
資訊
這個頁面是可操作的設計規格。系統搜尋可實際查找章節，輸入不存在的詞可驗證空狀態。
07 / GOVERNANCE
可追溯，才可以演進。
格式基線 DTCG 2025.10；可及性目標 WCAG 2.2 AA；互動依原生 HTML 與 WAI-ARIA APG。以下是本地控制文件。
執行：python3 scripts/tokens.py --check
程式僅涵蓋本專案使用的 token 型別及 22 組色彩配對，不是完整 DTCG 或 WCAG 認證。