🎨 Color Tokens
以"星云渐变"视觉方向提炼的深色主题色彩系统。支持 Light / Dark 双模式。
Primary Palette
Deep Night
#1a1a3e
页面背景 · Hero 渐变起点
Twilight
#2d2350
渐变过渡 · 卡片背景
Primary Purple
#7c5ce7
主按钮 · 链接 · 强调色
Lavender
#b8a4f0
悬停态 · 次级强调
Semantic Colors
Success
#5ce7b8
完成状态 · 成就徽章
Dark Surface
#13111a
暗色模式表面
🔤 Typography
双字体系统——Serif 用于标题传达仪式感，Sans 用于正文保证可读性。
H1 · 32/1.2
Heading 1 · 页面标题
Noto Serif SC · Bold
H2 · 24/1.3
Heading 2 · 区块标题
Noto Serif SC · Semibold
H3 · 18/1.4
Heading 3 · 卡片标题
Noto Serif SC · Semibold
Body · 15/1.6
Body text used for descriptions, paragraphs, and general content across the application.
Inter · Regular
Small · 13/1.5
Secondary information, captions, timestamps
Inter · Regular · Secondary
Caption · 11/1.4
LABELS · META · TAGS
Inter · Medium · Uppercase
🧩 Component Library
18 个核心组件，覆盖 Onboarding、Home、Session、Profile 四大页面。每个组件定义 4 个状态：Default · Hover · Active · Disabled。
Buttons
3 variants · 2 sizes · 4 states each
Button States
Small variant · Disabled · Loading
Focus Mode
5 min · Improve concentration through guided breathing
Category Cards
3 variants · Icon + Title + Duration
Input & Toggle
Text input · Toggle switch
Breathing Timer
Animated circle · 3 phases · 4-7-8 pattern
Audio Visualizer
40-bar dynamic waveform · CSS animation
🌟 7 Day Streak
Lv.5
Badges & Tags
Achievement badges · Level tags · Status
Progress Bar
HP bar · XP bar · Loading indicator
📐 Spacing Scale
基于 4px 栅格的空间系统。所有间距、内边距、圆角均取自这个 scale。
📱 Responsive Breakpoints
移动优先的三断点响应式策略。所有组件和布局均按此实现。
| Breakpoint | Width | Target Device | Layout Changes |
|---|
| Mobile | < 768px | Phone · WeChat | 单列 · 隐藏导航 · 虚拟摇杆 · 大按钮 |
| Tablet | 768–1024px | iPad · 折叠屏 | 双列网格 · 侧边导航 · 自适应间距 |
| Desktop | > 1024px | MacBook · Monitor | 多列 · 完整导航 · 悬停效果 · 键盘操作 |
Implementation: CSS clamp() + grid auto-fill + @media queries.
Touch targets: Minimum 44×44px on mobile (iOS HIG compliance).
Font scaling: clamp(16px, 2vw, 18px) for fluid typography.