# Drama Ling UI/UX 設計系統展示

150+
UI 組件
50+
CSS 變數
100%
響應式設計
A++
無障礙評級

## 🎨 色彩系統

### 主要色彩

品牌主色和輔助色，用於主要互動元素

Teal
Primary Teal
#00E5CC
Purple
Secondary Purple
#8E44AD
Violet
Accent Violet
#9B59B6

### 功能性色彩

用於狀態提示和系統回饋的功能色彩

Success
Success Green
#27AE60
Warning
Warning Yellow
#F39C12
Error
Error Red
#E74C3C

### 遊戲化色彩

用於等級、成就和遊戲化元素的特殊色彩

Gold
Gold
#FFD700
Star
Star Active
#F1C40F
Glow
Achievement Glow
#F39C12

## 📝 字體排版

### 標題階層

從大型標題到小標籤的完整字體階層系統

text-4xl (42px)
主要標題
text-2xl (28px)
頁面標題
text-xl (22px)
卡片標題
text-base (16px)
正文內容
text-sm (13px)
輔助資訊

### 字重變化

不同字重用於建立視覺層次和重要性

font-normal (400)
一般文字內容
font-medium (500)
中等重要內容
font-semibold (600)
重要標籤
font-bold (700)
標題和強調
font-extrabold (800)
數字和主標題

## 🔘 按鈕組件

### 按鈕變體

不同用途和重要性的按鈕樣式

### 按鈕尺寸

適應不同界面需求的按鈕尺寸變體

### 圖標按鈕

簡潔的圖標按鈕，用於工具欄和快捷操作

### 按鈕狀態

按鈕的不同互動狀態展示

## 🃏 卡片組件

### 基礎卡片

標準的內容容器，具備圓角和陰影

#### 卡片標題

卡片副標題

這是一個標準卡片的內容區域。卡片提供了清晰的內容分組和視覺層次。

### 遊戲化卡片

具備遊戲化元素的特殊卡片樣式

#### 學習進度

今日任務完成情況

👤
75% 完成

### 成就卡片

突出顯示用戶成就和里程碑

#### 🏆 新成就解鎖！

連續學習 7 天

恭喜！您已經連續學習 7 天，獲得「堅持不懈」成就徽章。

★ ★ ★ ★ ★

### 進度卡片

展示學習進度和統計數據

#### 本週學習統計

2024年第12週

142
學習天數
86%
完成率
2.4k
經驗值

## 📋 表單組件

### 輸入框

不同狀態的文字輸入框

用戶名稱
用戶名稱必須是唯一的
電子郵件
✓ 電子郵件格式正確
密碼
✗ 密碼長度不足 8 個字符

### 徽章組件

用於標記狀態和分類的小型標籤

主要 次要 成功 警告 錯誤
Lv.15 新手 已驗證

### 進度條

視覺化顯示進度和完成度

學習進度 75%
經驗值 2,400 / 3,000
等級進度 Lv.15 → Lv.16

### 頭像組件

不同尺寸和類型的用戶頭像

👤
🤖
🏆
😊
從左到右：特大、大、中、小尺寸

## ⚡ 互動組件

### 星級評分

互動式星級評分組件

★ ★ ★ ★ ★
點擊星星來評分

### 通知提示

不同類型的通知和提示訊息

點擊下方按鈕查看通知效果

### 模態框

彈出式對話框和確認視窗

點擊按鈕查看模態框效果

### 特殊效果

玻璃形態效果和發光效果

#### 玻璃形態卡片

半透明的毛玻璃效果

#### 青色發光效果

適用於重要提示和強調內容

通知內容

### 確認操作

您確定要執行此操作嗎？

此操作無法撤銷，請確認您的選擇。