디자인 시스템
Pæan™ 视觉设计规范
统一的设计语言，以蓝色和紫色为核心，传达科技感、信任感与情感连接
色彩系统
主色调 · Paean Cyan
Paean Cyan (#0077FF) 代表科技、信任与智能，贯穿生活 + 科技 + 时尚的品牌个性。用在主要 CTA、核心功能、重要信息提示。
primary-50
#E8F2FF
用于磨砂质感的 Hero 渐变与徽章
primary-100
#C8DFFF
玻璃态卡片与徽章
primary-200
#99C1FF
浅色边框与标签
primary-300
#66A3FF
轻量填充与悬停 chips
primary-400
#338BFF
图标容器与数据可视化
primary-500
#0077FF
主按钮与关键图标 (Paean Cyan 核心色)
primary-600
#0062D6
Hover / Focus 状态
primary-700
#004EAD
按下态与深色 CTA
primary-800
#003A82
导航栏与深色表面
primary-900
#002659
徽章中的反差文字
primary-950
#00163D
超深渐变与遮罩
辅助色 · 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
夜间遮罩与光晕
Brand Triad
Three anchor colors that define the Paean visual identity.
Electric Cyan
#00F0FF
Highlights, gradients, glows
Vivid Blue
#0077FF
Primary actions, CTAs, links
Dark Teal
#007799
Deep accents, dark mode emphasis
蓝紫配色使用原则
- ✓Keep blue (primary) and purple (accent) as dominant colors, comprising 90%+ of page colors
- ✓Purple is close to blue, forming a harmonious cool-to-neutral transition, avoiding visual conflicts
- ✓Functional colors (success/warning/error) should use semantic colors, not part of theme palette
- ✗Avoid introducing warm colors like red, orange, yellow that disrupt color harmony
- ✗Avoid purple overuse causing visual fatigue; maintain blue dominance with purple accents
Typography
Brand Font
Pæan
Poppins · font-logo
Poppins 字体用于品牌标识和特殊标题，传达现代感与专业性。
Body Font
Inter
Default · sans-serif
Inter 字体用于所有正文、界面文字，提供出色的可读性和现代感。
组件模式
按钮层级
主要操作使用蓝-紫渐变，次要操作使用纯紫色，辅助操作使用描边样式
图标容器
Primary
Accent
图标容器使用对应色系的浅色背景，保持一致的圆角和边框样式
Badges
主要标签
辅助标签
标签使用半透明背景和细边框，配合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
使用指南
使用场景
- •Agent feedback states (listening, thinking, responding)
- •Empty states and onboarding illustrations
- •Status indicators and notifications
技术说明
- •Available in monochrome (/paean-emoji/) and colorful (/paean-emoji-colorful/) variants
- •SVG format for scalability, recommended size 24-64px
- •Use colorful variants for primary UI, monochrome for subtle contexts
深色模式适配
背景层级
neutral-900Primary background
neutral-800Card background
neutral-950Deep background
透明度规范
- •Colored backgrounds in dark mode: /40
- •Borders in dark mode: /50
- •Card backgrounds in dark mode: /80
- •Use backdrop-blur-sm for glassmorphism