Files
dreamweaver/.claude/specs/design/BRAND-VISUAL-DIRECTIONS.md
zhangtuo e9d7f8832a 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
2026-01-20 18:20:03 +08:00

3.5 KiB
Raw Blame History

DreamWeaver 品牌视觉方向Web 阶段)

概述

提供三套高保真视觉方向,用于 Web MVP。三者的 UX 结构一致,仅在色彩、视觉重量与插画风格上不同。


方案 ASoft 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 线宽,圆角端点。
  • 强调色点缀,避免过度饱和。

组件建议

  • 按钮:主色实心 + 内阴影。
  • 卡片:大圆角 + 柔和阴影。
  • 输入:浅底色 + 主色焦点环。

方案 BStorybook 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 线宽,极简。

组件建议

  • 按钮:纯色、无明显渐变。
  • 卡片:细边框 + 极轻阴影。
  • 输入:白底 + 清晰边框。

方案 CPlayful 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 使用方案 ASoft Aurora兼顾温暖与信任。方案 B/C 可作为后续主题或 A/B 测试备选。