设计系统
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增强玻璃态效果