# Drama Ling 設計系統 - 組件展示

# Drama Ling 設計系統

企業級組件庫展示 v4.0

## 🎨 色彩系統

### 主要品牌色彩

Drama Ling 的核心品牌識別色彩，用於主要界面元素和品牌表達。

主要青綠
青綠-淺
青綠-深
輔助紫色
強調紫色
`/* 主要品牌色彩使用 */
.primary-button { background: var(--primary-teal); }
.accent-text { color: var(--accent-violet); }
.brand-gradient { background: linear-gradient(135deg, var(--primary-teal), var(--accent-violet)); }`

### 功能性色彩

用於表達系統狀態和用戶回饋的功能性色彩。

成功綠色
錯誤紅色
警告黃色
資訊藍色

### 遊戲化色彩

專為遊戲化元素設計的特殊色彩系統。

金色成就
銀色成就
銅色成就
鑽石特效
初學者
專家級

## 📝 字體系統

### 響應式字體大小

Mobile First 設計，自適應不同螢幕尺寸的字體系統。

超大標題 (4xl) - 主要頁面標題
大標題 (3xl) - 區塊標題
中標題 (2xl) - 卡片標題
小標題 (xl) - 組件標題
大文字 (lg) - 重要內容
基礎文字 (base) - 正文內容
小文字 (sm) - 輔助資訊
超小文字 (xs) - 標籤提示

## 🔘 按鈕組件

### 基礎按鈕

支援多種狀態和樣式的按鈕組件系統。

`<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-primary" disabled>禁用狀態</button>`

## 🎮 遊戲化組件

### 經驗值系統

視覺化展示用戶學習進度的經驗值和等級系統。

15
中級學習者
2,850 / 4,200 EXP

### 關卡狀態指示器

用於學習地圖的關卡狀態視覺指示系統。

🔒
鎖定狀態
▶️
可進行
🔄
進行中
✅
已完成

### 成就徽章系統

激勵用戶持續學習的成就和徽章系統。

🏆
對話大師
完成100次對話練習
📚
詞彙達人
掌握500個詞彙
🚀
進階學習者
達到高級程度

## 🎯 學習功能組件

### 語音輸入介面

沉浸式語音學習體驗的核心交互組件。

🎤
點擊麥克風開始語音輸入

### 對話氣泡系統

情境對話練習的對話氣泡設計系統。

情境：在咖啡店點餐
Hello! Welcome to our coffee shop. What would you like to order today?
I'd like a large cappuccino, please.
14:32
Excellent choice! Would you like any pastries with that?

## 🛒 商業功能組件

### 商品卡片系統

道具商店的商品展示和購買引導組件。

💡
回覆提示道具
AI智慧引導，幫助您在對話中不再卡關
熱銷
新品
💎 30
-20%
❤️
生命保護罩
闖關失敗不扣命條，保護珍貴生命
限時
💎 200

## 📝 表單組件

### 輸入框系統

支援多種狀態和驗證的輸入框組件。

一般輸入框
必填輸入框
成功狀態
錯誤狀態
`<label class="input-label required">必填輸入框</label>
<input type="text" class="input-field" placeholder="此欄位為必填">
<input type="text" class="input-field success" value="正確的輸入">
<input type="text" class="input-field error" value="錯誤的輸入">`

## 🔧 工具類別

### 間距和佈局

快速佈局和間距調整的工具類別。

Flexbox 中心對齊
Grid 1
Grid 2
間距工具類別
`<div class="flex items-center justify-center">Flexbox</div>
<div class="grid grid-cols-2 gap-4">Grid 佈局</div>
<div class="text-center p-6 m-4">間距工具</div>`