Drama Ling 設計系統

🎨 色彩系統

主要品牌色彩

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>