Drama Ling UI/UX 設計系統

基於官方設計指南的完整UI組件庫展示

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

頭像組件

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

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

⚡ 互動組件

星級評分

互動式星級評分組件

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

通知提示

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

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

模態框

彈出式對話框和確認視窗

點擊按鈕查看模態框效果

特殊效果

玻璃形態效果和發光效果

玻璃形態卡片

半透明的毛玻璃效果

青色發光效果

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