Initial commit: clean project structure
- Backend: FastAPI + SQLAlchemy + Celery (Python 3.11+) - Frontend: Vue 3 + TypeScript + Pinia + Tailwind - Admin Frontend: separate Vue 3 app for management - Docker Compose: 9 services orchestration - Specs: design prototypes, memory system PRD, product roadmap Cleanup performed: - Removed temporary debug scripts from backend root - Removed deprecated admin_app.py (embedded UI) - Removed duplicate docs from admin-frontend - Updated .gitignore for Vite cache and egg-info
This commit is contained in:
zhangtuo
153
.claude/specs/design/BRAND-VISUAL-DIRECTIONS.md
Normal file
153
.claude/specs/design/BRAND-VISUAL-DIRECTIONS.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# DreamWeaver 品牌视觉方向（Web 阶段）
|
||||
|
||||
## 概述
|
||||
|
||||
提供三套高保真视觉方向，用于 Web MVP。三者的 UX 结构一致，仅在色彩、视觉重量与插画风格上不同。
|
||||
|
||||
---
|
||||
|
||||
## 方案 A：Soft Aurora（温暖高级）
|
||||
|
||||
**理由**
|
||||
- 家长信任感强，同时保留童趣与想象力。
|
||||
- 高级但不商业化。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #6C5CE7
|
||||
- 主色 500: #7C69FF
|
||||
- 主色 100: #EAE7FF
|
||||
- 强调粉: #FF8FB1
|
||||
- 强调蓝: #65C3FF
|
||||
- 中性 900: #1F2430
|
||||
- 中性 700: #4B5563
|
||||
- 中性 500: #9AA3B2
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F5F7FB
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(135deg, #EAE7FF 0%, #FDF6FF 40%, #EAF6FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 30% 30%, #7C69FF 0%, #6C5CE7 50%, #4C3FCF 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Noto Sans SC / Inter
|
||||
- 正文：Noto Sans SC / Inter
|
||||
- 数字强调：Inter
|
||||
|
||||
**插画风格**
|
||||
- 柔和、低对比度、轻画笔质感。
|
||||
- 圆润形状、轻高光。
|
||||
- 角色简单轮廓与友好表情。
|
||||
|
||||
**图标风格**
|
||||
- 1.5px 线宽，圆角端点。
|
||||
- 强调色点缀，避免过度饱和。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：主色实心 + 内阴影。
|
||||
- 卡片：大圆角 + 柔和阴影。
|
||||
- 输入：浅底色 + 主色焦点环。
|
||||
|
||||
---
|
||||
|
||||
## 方案 B：Storybook Minimal（极简编辑风）
|
||||
|
||||
**理由**
|
||||
- 强可读性，适合长文本阅读。
|
||||
- 简洁、专业、强调内容。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #3B82F6
|
||||
- 主色 500: #60A5FA
|
||||
- 主色 100: #DBEAFE
|
||||
- 强调金: #F5C542
|
||||
- 强调薄荷: #6EE7B7
|
||||
- 中性 900: #111827
|
||||
- 中性 700: #374151
|
||||
- 中性 500: #9CA3AF
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F9FAFB
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 40% 30%, #60A5FA 0%, #3B82F6 60%, #1D4ED8 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Inter / Noto Sans SC
|
||||
- 正文：Inter / Noto Sans SC
|
||||
- 阅读场景可提升行高和对比度。
|
||||
|
||||
**插画风格**
|
||||
- 扁平化、线条干净、留白较多。
|
||||
- 色彩克制、视觉清爽。
|
||||
|
||||
**图标风格**
|
||||
- 2px 线宽，极简。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：纯色、无明显渐变。
|
||||
- 卡片：细边框 + 极轻阴影。
|
||||
- 输入：白底 + 清晰边框。
|
||||
|
||||
---
|
||||
|
||||
## 方案 C：Playful Glow（活力明快）
|
||||
|
||||
**理由**
|
||||
- 视觉更鲜活，记忆点强。
|
||||
- 更偏童趣，但仍保持专业感。
|
||||
|
||||
**配色**
|
||||
- 主色 600: #7C3AED
|
||||
- 主色 500: #8B5CF6
|
||||
- 主色 100: #EDE9FE
|
||||
- 强调珊瑚: #FB7185
|
||||
- 强调青蓝: #22D3EE
|
||||
- 中性 900: #1F2937
|
||||
- 中性 700: #4B5563
|
||||
- 中性 500: #9CA3AF
|
||||
- 中性 200: #E5E7EB
|
||||
- 中性 100: #F5F5F7
|
||||
- 白色: #FFFFFF
|
||||
|
||||
**渐变**
|
||||
- Hero 背景：linear-gradient(135deg, #EDE9FE 0%, #FFE4F3 45%, #E0F7FF 100%)
|
||||
- CTA 光晕：radial-gradient(circle at 30% 30%, #8B5CF6 0%, #7C3AED 60%, #5B21B6 100%)
|
||||
|
||||
**字体**
|
||||
- 标题：Noto Sans SC / Inter
|
||||
- 正文：Noto Sans SC / Inter
|
||||
- 强调色点到为止，避免花哨。
|
||||
|
||||
**插画风格**
|
||||
- 更鲜艳、更活泼。
|
||||
- 大色块 + 轻纹理背景。
|
||||
|
||||
**图标风格**
|
||||
- 1.5px 线宽 + 小实心点装饰。
|
||||
|
||||
**组件建议**
|
||||
- 按钮：渐变或实心 + Hover 发光。
|
||||
- 卡片：更明显阴影 + 彩色边角。
|
||||
- 输入：轻微色彩底。
|
||||
|
||||
---
|
||||
|
||||
## 共享视觉资产
|
||||
|
||||
**封面比例**
|
||||
- 列表卡片：21:9
|
||||
- 详情头图：16:9
|
||||
|
||||
**插画 vs 照片**
|
||||
- 默认使用插画，避免真实儿童照片（隐私与合规）。
|
||||
|
||||
**空态插画**
|
||||
- 统一 1 张主插画，做颜色变体复用。
|
||||
|
||||
---
|
||||
|
||||
## 推荐
|
||||
|
||||
建议 Web MVP 使用方案 A（Soft Aurora），兼顾温暖与信任。方案 B/C 可作为后续主题或 A/B 测试备选。
|
||||
Reference in New Issue
Block a user