# 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 测试备选。