設計系統
Pæan™ 視覺設計規範
統一的設計語言，以藍色和紫色為核心，傳達科技感、信任感與情感連線
色彩系統
主色調 · Paean Cyan
Paean Cyan (#06B6D4) 代表科技、信任與智慧，貫穿生活 + 科技 + 時尚的品牌個性。用在主要 CTA、核心功能、重要資訊提示。
primary-50
#ecfeff
用於磨砂質感的 Hero 漸變與徽章
primary-100
#cffafe
玻璃態卡片與徽章
primary-200
#a5f3fc
淺色邊框與標籤
primary-300
#67e8f9
輕量填充與懸停 chips
primary-400
#22d3ee
圖示容器與資料視覺化
primary-500
#06b6d4
主按鈕與關鍵圖示 (Paean Cyan 核心色)
primary-600
#0891b2
Hover / Focus 狀態
primary-700
#0e7490
按下態與深色 CTA
primary-800
#155e75
導航欄與深色表面
primary-900
#164e63
徽章中的反差文字
primary-950
#083344
超深漸變與遮罩
輔助色 · Accent Violet
Accent Violet (#8B5CF6) 代表情感、洞察與創新。與主色相近，構成統一的冷色調體系。用於情感功能、次要 CTA、關鍵視覺強調。
accent-50
#f5f3ff
柔和高亮與空狀態
accent-100
#ede9fe
徽章填充與卡片
accent-200
#ddd6fe
強調邊框與 Chips
accent-300
#c4b5fd
柔和漸變與指示器
accent-400
#a78bfa
圖示光效與圖表
accent-500
#8b5cf6
次按鈕與情緒提示 (Accent Violet 核心色)
accent-600
#7c3aed
Hover 狀態與圖示
accent-700
#6d28d9
按下態與開關
accent-800
#5b21b6
濃郁漸變與描邊
accent-900
#4c1d95
深色 Chip 與層次
accent-950
#2e1065
夜間遮罩與光暈
藍紫配色使用原則
- ✓保持藍色（primary）和紫色（accent）為主導配色，佔頁面色彩的 90% 以上
- ✓紫色與藍色相近，形成從冷色調到中性偏冷的和諧過渡，避免視覺衝突
- ✓功能性色彩（成功/警告/錯誤）應使用語義化顏色，不參與主題配色
- ✗避免引入紅色、橙色、黃色等暖色調，破壞整體配色和諧
- ✗避免過度使用紫色導致視覺疲勞，保持藍色為主、紫色為輔的平衡
字型系統
品牌字型
Pæan
Poppins · font-logo
Poppins 字型用於品牌標識和特殊標題，傳達現代感與專業性。
正文字型
Inter
Default · sans-serif
Inter 字型用於所有正文、介面文字，提供出色的可讀性和現代感。
元件模式
按鈕層級
主要操作使用藍-紫漸變，次要操作使用純紫色，輔助操作使用描邊樣式
圖示容器
Primary
Accent
圖示容器使用對應色系的淺色背景，保持一致的圓角和邊框樣式
標籤徽章
主要標籤
輔助標籤
標籤使用半透明背景和細邊框，配合backdrop-blur增強層次感
Paean 表情系統
一套包含 51 個富有表現力的表情圖示，讓 Paean 吉祥物在各種情感和功能狀態下栩栩如生。使用這些圖示為介面增添個性和視覺反饋。
核心狀態
idle
blink
wink
waving
正面情緒
happy
excited
celebrating
laughing
love
proud
hopeful
peace
負面情緒
sad
angry
crying
nervous
sick
bored
confused
skeptical
認知狀態
thinking
focused
curious
attentive
engaged
listening
speaking
idea
睏倦狀態
sleepy
drowsy
dozing
sleeping
yawning
zzz
特殊表情
cool
mischievous
shy
surprised
dizzy
功能狀態
loading
processing
success
error
warning
info
創意與魔法
sparkle
magic
star
fire
rocket
music
使用指南
使用場景
- •智慧體反饋狀態（聆聽、思考、回覆中）
- •空狀態頁面和引導說明插圖
- •狀態指示器和通知提示
技術說明
- •提供單色 (/paean-emoji/) 和彩色 (/paean-emoji-colorful/) 兩種版本
- •SVG 格式保證可縮放性，推薦尺寸 24-64px
- •主要 UI 使用彩色版本，次要場景使用單色版本
深色模式適配
背景層級
neutral-900主背景
neutral-800卡片背景
neutral-950深層背景
透明度規範
- •彩色背景深色模式透明度: /40
- •邊框深色模式透明度: /50
- •卡片背景深色模式透明度: /80
- •配合backdrop-blur-sm增強玻璃態效果