--background
頁面底色
Glamour Design System · v1.0
Glamour Design System：溫潤與專業的交響
在穆樂牙醫的內部學習生態中，視覺體驗是沈浸式教學的核心。Glamour Design System 提取了品牌基因中的暖紙色調，營造具溫度的學習場域，並輔以理性的品牌藍點亮功能性細節。透過高度原子化的組件封裝，我們確保了從複雜後台到動態訓練流程中，始終如一的優雅與直覺。
- Design Tokens
- 71 個
- 原子元件
- 47 個
- 組合範例
- 7 種
定義於 _tokens.scss
位於 app/components/ui/
登入卡片、行銷卡、進度總覽、行程提醒、回報表單、折線圖、長條圖
01 — Foundations
設計基礎
色彩與字級是整個系統的語彙。Tokens 在 _tokens.scss 集中定義，所有上層元件僅消費語意變數。
Color Recognition
顏色辨識系統（semantic tokens）
--foreground
主要文字
--card
卡片底色
--primary
主要動作色
--secondary
次要區塊色
--muted
輕量區塊色
--accent
焦點提示色
--destructive
警示動作色
--border
邊框色
--ring
Focus ring 色
Type Scale
字級展示（對齊 DESIGN.md 第 126 行）
--font-size-xs
12px 文字（圖說、metadata、日期）
--font-size-sm
14px 文字（次要控制項、標籤）
--font-size-base
16px 文字（一般內容、表格文字）
--font-size-md
18px 文字（卡片重點段落）
--font-size-xl
24px 文字（區塊標題、卡片標題）
02 — Actions
行為與狀態
Button 與 Badge 是介面上最頻繁被看見的元件，層級必須明確。Toggle 則提供不使用原生 checkbox 的格式化開關。
Buttons & Badge
主要交互與狀態標記
Default
Secondary
Outline
Destructive
Ghost
Toggle / ToggleGroup
按壓式開關與群組
03 — Forms
表單輸入
所有輸入元件共用相同的高度、邊距與 focus ring，確保表單排列時形狀整齊。
訓練報名
提交院內課程報名申請
Input Group
輸入框前後綴、按鈕、單位
Native Select
原生 select 風格化（行動裝置友善）
目前選擇：Waterlase 雷射牙科
Combobox
可搜尋下拉
Date Picker
選擇課程日期
Input OTP
Email 驗證碼
已輸入：（尚未輸入）
04 — Feedback
訊息與回饋
回應使用者動作的及時性訊息。警示色只在必要時使用，避免淹沒主要流程。
Alert
訊息回饋樣式
教材已更新
Waterlase 臨床矩陣已同步至 v3.2，請重新複習第 5 章內容。
有 2 位學員訓練逾期
Level 2 助理訓練已超過預定時間 7 天，請聯繫訓練部協助安排。
Progress / Slider / Toast
學員完成度與即時回饋
Waterlase 基礎 · 整體完成度56%
Skeleton
載入中預留形狀，避免版面跳動
05 — Overlays
浮層與對話
彈出式元件在不打斷主流程的前提下處理次要操作。所有浮層共用相同的 backdrop、陰影與圓角。
Dropdown / Popover
介面控制與輕量表單
Dialog / Sheet
模態操作與側邊操作面板
Alert Dialog
破壞性動作的二次確認
Drawer
行動裝置常用的底部抽屜
Avatar / Tooltip / Hover Card
身份與輔助說明
王
Dr. 王裕文
主治醫師 · Waterlase Lead Trainer
Context Menu
教材卡片上的右鍵操作
在教材「Waterlase · 臨床矩陣」卡片上按右鍵
07 — Data Display
資料呈現
資料為主的元件重點是可讀性：對齊、留白、行高都必須以長時間閱讀為前提。
Data Table
教材與訓練進度清單
| 教材 / 章節 | 負責人 | 狀態 | 更新日 |
|---|---|---|---|
| Waterlase 入門 · 雷射組織交互作用 | Dr. 王裕文 | 進行中 | 2026-04-21 |
| 3Shape TRIOS 掃描流程 SOP | Dr. 陳俐安 | 待安排 | 2026-04-18 |
| Level 2 助理訓練 · 四手操作 | 林佩珊 助理 | 逾期 | 2026-04-11 |
| AI-assisted DSD 導入 | Dr. 李哲瑋 | 已完成 | 2026-04-07 |
FAQ · Accordion
常見問題（展開閱讀）
Collapsible
可展開／收合區塊
Waterlase 進階章節 · 4 項
01 · 雷射 × 組織交互作用
Calendar
課程排程日期選擇
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
08 — Media
媒體與容器
固定比例、可捲動區、輪播：承載圖片、標籤或長清單的容器型元件。
Aspect Ratio
固定長寬比的教材封面容器
Cover · 16:9
Waterlase 臨床矩陣
軟組織與硬組織應用全覽
Carousel
輪播元件（embla）
雷射牙科
Waterlase 核心課程
微創 × 仿生 × 再生，從原理到臨床的完整教程
數位流程
3Shape × AI-assisted DSD
口掃到數位微笑設計的端到端操作
團隊賦能
六級助理訓練
打破冗長培養週期，讓臨床人才快速就位
Scroll Area
固定高度清單容器（適合教材、通知、紀錄）
09 — Examples
組合範例
將基礎元件組合成完整場景，作為頁面設計時的參考原型。
登入穆樂學習平台
請使用院內配發的 Email 登入，或聯絡訓練部開通帳號。
Level Training 6 即將取代舊版助理訓練流程
新版本整合感控、四手操作、影像判讀等模組，並串接 3Shape 與 AI-DSD 實機操作。舊版將於 2026 年 07 月正式下架。
Beta
課程進度總覽
用 Badge、Progress、Avatar 組合團隊學習追蹤卡。
王
王裕文醫師
進行中
Waterlase 核心課程72%
3Shape 掃描 SOP46%
本週訓練行程提醒
用日程清單、狀態標籤與切換控制建立通知面板。
週三 09:00 · 3Shape TRIOS 實機演練
地點：訓練教室 B / 指導：陳俐安醫師
即將開始
週四 13:30 · AI-assisted DSD 病例討論
地點：會議室 2 / 指導：李哲瑋醫師
已排程
啟用課前 30 分鐘提醒
病例討論快速回報
整合 Select、Textarea、Button 的即時回報流程。
每週學習活躍度（折線圖）
以折線趨勢觀察團隊最近 6 週的學習活躍變化。
W1W2W3W4W5W6
最新週期：74 點6 週峰值：74 點
模組完成率比較（長條圖）
比較各訓練主題完成率，快速找出需補強項目。
84%
Waterlase
67%
3Shape
59%
AI-DSD
46%
植牙導板
72%
Level 2
.prose-content 參考
長文閱讀容器（Desktop 19px / 1.9 行高）
穆樂企業文化：以人為本的專業成長
在穆樂，我們相信「專業」與「溫度」必須並行。每一次療程溝通、每一份訓練教材，都是對患者信任的回應，也是團隊彼此支持的具體實踐。
我們以持續學習為核心文化，鼓勵跨角色協作與經驗分享，讓醫師、助理與行政夥伴在共同語言下成長，打造一致且可傳承的高品質照護體驗。