同一套骨架，保留每个学习项目的性格。
EduTogether v2 为几十个独立 Web 项目建立一致的品牌关系、信息层级、操作反馈和数据语言。专业感来自秩序，不来自把所有页面做成同一个模板。
四条原则
面向儿童，但不低幼；面向家庭，但不琐碎。每个界面优先帮助学习者理解当前任务、完成动作、读懂反馈。
清楚先于热闹一个视口只有一个主任务，减少装饰与竞争信息。
反馈可以行动告诉孩子发生了什么，以及下一步可以怎么做。
结构保持一致导航、控件、状态、间距来自同一套语法。
内容保留个性学科配色与插图可变化，外壳和操作习惯不变化。
色彩与主题
中性色负责 80% 的界面，项目主题色负责主要动作、当前状态和学习进度。粉紫品牌渐变只留给标志或极少数庆祝时刻。
观察与判断
已保存
植物的叶片最主要通过哪一部分与空气交换气体？
Ink#182230
Canvas#F5F7FA
Accent主题色
Accent soft浅状态面
字体与层级
使用系统优先的中文字体栈，减少加载等待。字号固定分级，不随视口连续缩放，保证桌面和移动端都可预测。
页面标题今天来认识除法
章节标题把 12 个苹果平均分
组件标题第 2 关 · 平均分
正文拖动苹果，把它们平均放进三个篮子里。
产品骨架
64px 顶栏统一品牌关系和返回路径；内容区首先呈现真实学习任务。有五个以上并列目的地时才使用侧边栏。
- 顶栏
- 品牌标志、项目名、学习者上下文、必要工具。
- 内容宽度
- 普通工具 1120px；表格与大屏工具最多 1280px。
- 主任务
- 首屏可见，不使用营销 Hero 或功能说明卡占位。
- 响应式
- 桌面优先，360px 可用；固定控件不因文本变化跳动。
- 游戏例外
- 画面可全屏，菜单、设置、结果与全局导航仍用系统组件。
组件样板
组件使用语义变量，项目主题切换后自然继承。圆角不超过 8px，阴影只表达抬升关系。
常用交互
可直接复用类名按钮
同一区域只有一个主要按钮。
状态
已完成待复习需要重试
文字、图形与颜色共同表达状态。
输入
操作反馈
回答正确
你已经理解了平均分，继续下一题。
你已经理解了平均分，继续下一题。
使用边界
统一不等于抹平差异。学习内容、插图和游戏世界可以大胆；产品结构、控件与反馈保持克制。
应该这样做
- 用一条主题强调色建立当前状态和任务节奏。
- 用表格、列表、轨道和开放布局承载信息。
- 把角色插图放在引导、空状态或庆祝节点。
- 让错误信息说明原因和下一步。
不要这样做
- 每个区块都套卡片、阴影和大圆角。
- 在工具按钮上使用 emoji 或文字图标。
- 大面积使用粉紫渐变、玻璃拟态或装饰光斑。
- 为了统计记录每次点击、按键或孩子输入的内容。
接入与统计
视觉样式一条 CSS；认证、返回首页和基础统计一条脚本。业务事件使用固定命名，不再为每个项目发明一套数据口径。
项目样式
<html lang="zh-CN" data-edu-theme="math">
<link rel="stylesheet"
href="../../../design-system/css/edu-system-v2.css">
<body class="edu-app">导航与基础统计
<script src="../../common/project-nav.js"></script>当前基础很好
40 个年级子项目都已引入共享导航脚本，因此基础统计能够统一加载。新标准补齐事件命名和隐私边界。
40 个年级子项目都已引入共享导航脚本，因此基础统计能够统一加载。新标准补齐事件命名和隐私边界。