三層架構
首頁與學習環境都是客戶定案、不可更動的視覺契約。兩者看起來不同， 是因為任務不同——一個要吸引與導覽，一個要支撐長時間專注操作。 統整的做法不是把它們變成一樣，而是把「共用核心」與「介面主題」分開。
| 層 | 內容 | 可否分歧 | 來源 |
|---|---|---|---|
| 第 0 層 核心 | 中性色階、狀態色、字型、字級、間距、觸控與無障礙規則 | ❌ 任何介面都不得分歧 | 三方比對一致的部分 + 官方 Figma |
| 第 1 層 介面主題 | 頁面底色、主行動色、圓角尺度、陰影色調、容器寬度、頭部高度 | ✅ 可分歧，但必須登記於 token 檔 | 兩處定案頁面的實際值 |
| 第 2 層 元件 | 按鈕、表單、分頁、卡片、表格、對話框⋯⋯ | ❌ 只寫一次，靠主題變數自動換裝 | 官方「通用前台UI」的變體字彙 |
homepage-lime.html 與學習環境的既有數值是視覺契約。
本設計系統的工作是「描述」它們並補齊結構，不是「修正」它們。
新頁面才套用收斂後的階梯。
兩種介面的差異
以 CIE Lab ΔE 對首頁、學習環境、官方 Figma 三方比對後， 中性色階完全一致（ΔE ≤ 2），狀態色學習環境 100% 命中官方值。真正的歧異只有下列六項。
| 面向 | 入口網站 data-surface="portal" |
應用介面 data-surface="learning" | 為什麼不同 |
|---|---|---|---|
| 頁面底色 | #fbfef6 淡綠白 | #eef3f8 藍灰 |
入口強調品牌溫度；應用降低長時間閱讀的亮度負擔 |
| 主行動色 | #007eb2 | #5d6bc0 |
兩處皆為客戶定案值 |
| 連結色 | 同主行動色 | #236bb3 獨立 |
應用介面內文連結多，需與按鈕區隔避免誤點 |
| 卡片圓角 | 24px | 16px | 入口走大圓角親和感；應用走中圓角資訊密度 |
| 容器寬度 | 1920px | 1376px | 入口滿版展示；應用固定閱讀寬度 |
| 頭部高度 | 86px | 60px | 應用要把垂直空間留給內容 |
--grad-accent 是首頁的招牌語彙。
在應用介面它會自動換成主色漸層，避免在操作介面裡喧賓奪主。
色彩
元件一律只使用語意層。下方色票即時讀取目前介面與模式的實際值， 切換上方開關即可看到同一組 token 在四種組合下的表現。
語意 token（隨介面與明暗變動）
中性色階（核心，三方一致）
狀態色
學習環境的六個狀態色 100% 命中官方 Figma（ΔE = 0），已採為全站標準。 首頁沒有狀態色是因為它沒有表單與回饋訊息，不是刻意不同。
字型與字級
全站以繁體中文為主，Noto Sans TC 必須排在 Arial 之前。
數字一律用 --font-num（Inter + tabular-nums），避免統計數字跳動。
字級階梯（採官方 Typography 12 階）
字重
間距與版面
4px 基準，三方一致。容器寬度與左右留白由介面主題決定。
| token | 目前值 | 說明 |
|---|
圓角
共用 4/8/12/16/20/24/28 階梯；卡片實際用哪一階由 --r-card 決定
（入口 24px、應用 16px）。
陰影
入口網站用中性黑陰影，應用介面用藍調陰影 rgba(29,45,71,…)
以融入藍灰底。切換介面可看到差異。
斷點
採官方六級命名。px 定義取自 UI kit「主頁框架RWD規範」分區的規範畫板
（主頁框架_1_xs 360×640、_sm 560×996、_md 768×1024）。
完整驗收紀錄見 design-qa.md。
| 級別 | 官方基準寬 | 實作範圍 | 裝置 | 佈局策略 |
|---|---|---|---|---|
xs | 360 | ≤ 559 | 手機 | 單欄；列表改「縮圖左·資訊右」；統計 2 欄格線 |
sm | 560 | 560–767 | 大手機 | 卡片 2 欄；數據卡維持單欄保留插圖 |
md | 768 | 768–1023 | 平板直式 | 卡片 2–3 欄；欄寬不足時隱藏裝飾插圖而非縮小文字 |
lg | 1024 | 1024–1279 | 平板橫式 | 卡片 3–4 欄；插圖回歸但縮小 |
xl | 1280 | 1280–1439 | 桌機 | 原始設計基準線，不做覆寫 |
xxl | 1440 | ≥ 1440 | 寬桌機 | 流體尺寸持續放大至 1920 設計稿原生寬 |
--container-max），不是斷點。
區塊標題
色條會隨介面主題換色：入口網站是萊姆→天藍識別漸層，應用介面是主色漸層。
推薦課程
表單
聚焦時外框轉主行動色並帶 3px 焦點環。錯誤狀態用 data-kind="danger"。
此欄位為必填
分頁 tabs
選中態由 aria-selected="true" 驅動，不另加 class，讓輔助科技與視覺同步。
膠囊型用於入口網站，底線型用於應用介面。
標籤與徽章
課程型別標籤的顏色是固定對應，不可換色，也不隨介面主題變動。
卡片
整張卡是連結時用 <a class="ds-card">，不要在卡內再放獨立連結。
圓角自動採用目前介面的 --r-card。
表格
應用介面的主力元件。數字欄一律用 ds-num 對齊。
| 課程名稱 | 狀態 | 時數 | 完成日 |
|---|---|---|---|
| 生成式 AI 於公務之應用 | 已通過 | 3.0 | 2026/04/16 |
| 資通安全實務 | 進行中 | 2.0 | — |
對話框與訊息
Toast 的四種語意直接對應狀態色，不需自訂顏色。
無障礙
平臺掛有無障礙 2.1 AA 標章。以下為底線，不因介面主題而放寬。
| 項目 | 要求 |
|---|---|
| 觸控目標 | ≥ 44×44px（--tap-min） |
| 焦點樣式 | 3px solid var(--color-focus) + 2px offset，不得移除 outline |
| 文字對比 | --color-fg(#24364d) 對白底 11.7:1；--color-fg-muted 7.5:1；--color-fg-subtle 僅限 ≥18px 或非文字圖示 |
| 狀態語意 | 用 aria-selected／aria-expanded／aria-current／aria-pressed 驅動樣式 |
| 動態 | 尊重 prefers-reduced-motion，token 已內建自動歸零 |
| 深色模式 | 切換後所有語意 token 自動翻轉，不需為深色另寫元件 |
新頁面起手式
在 <html> 指定介面主題即可，其餘全部自動。
<section> 有
data-od-id；圖示鈕 ≥ 44px 且有 aria-label；固定高度改
min-height；360／390／768／1024／1280／1920 皆無水平捲動；
入口網站的重點色出現 ≤ 2 次／畫面。