Quest：游戏化学习 App 设计系统
App · 浅色 · 活泼 · 醒目 · 教育Quest
连胜、经验值和厚实的按钮，让练习像玩游戏一样。
Quest 把练习变成游戏：首页是一条闯关式课程路线，连胜天数和经验值用大号数字，宝蓝色指向下一步，金黄色代表奖励。按钮和卡片下面垫着实心偏移投影，每次点按都有实感；Nunito 让语气温暖又鼓舞人心。
预览
直接用下面的设计变量和这套系统自己的字体实时渲染。
9:41
早上好今天本周目标5 天完成 4 天接下来晨间计划15 分钟团队同步30 分钟晚间复盘10 分钟
首页数据计划我的9:41
本周合计7,842比上周 +12%开始
首页数据计划我的9:41
设置通知每日提醒单位公制
首页数据计划我的在你的项目里使用
粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。
这个项目使用 Quest 设计系统，规范在 https://codexdesign.io/zh/design-systems/quest.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。
设计变量
颜色
浅色主题
- background#FFFFFFoklch(1 0 0)
- foreground#1A1F36oklch(0.247 0.044 273.419)
- card#FFFFFFoklch(1 0 0)
- card-foreground#1A1F36oklch(0.247 0.044 273.419)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#1A1F36oklch(0.247 0.044 273.419)
- primary#2346D8oklch(0.476 0.225 266.335)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#FFF1C2oklch(0.958 0.062 93.426)
- secondary-foreground#5C4100oklch(0.395 0.081 81.799)
- muted#F2F4FAoklch(0.967 0.008 271.329)
- muted-foreground#585F78oklch(0.489 0.041 272.6)
- accent#EAEEFCoklch(0.95 0.019 273.235)
- accent-foreground#1A1F36oklch(0.247 0.044 273.419)
- destructive#C62828oklch(0.539 0.194 26.725)
- border#E1E5F0oklch(0.922 0.016 269.977)
- input#D0D6E6oklch(0.876 0.023 269.42)
- ring#2346D8oklch(0.476 0.225 266.335)
- chart-1#2346D8oklch(0.476 0.225 266.335)
- chart-2#F5B800oklch(0.816 0.167 84.398)
- chart-3#18A957oklch(0.646 0.165 151.531)
- chart-4#E5486Doklch(0.632 0.193 10.713)
- chart-5#0EA5B7oklch(0.661 0.112 208.672)
深色主题
- background#11142Aoklch(0.201 0.044 275.845)
- foreground#EEF0FAoklch(0.957 0.014 277.062)
- card#181C36oklch(0.237 0.05 275.304)
- card-foreground#EEF0FAoklch(0.957 0.014 277.062)
- popover#181C36oklch(0.237 0.05 275.304)
- popover-foreground#EEF0FAoklch(0.957 0.014 277.062)
- primary#8EA2FFoklch(0.735 0.137 273.398)
- primary-foreground#11142Aoklch(0.201 0.044 275.845)
- secondary#2A2A1Foklch(0.281 0.019 107.578)
- secondary-foreground#FFE38Aoklch(0.92 0.113 92.513)
- muted#1C2040oklch(0.258 0.06 275.985)
- muted-foreground#A2A8C8oklch(0.738 0.047 276.84)
- accent#232849oklch(0.29 0.06 275.457)
- accent-foreground#EEF0FAoklch(0.957 0.014 277.062)
- destructive#FF7A7Aoklch(0.735 0.163 21.864)
- border#292E52oklch(0.315 0.064 276.067)
- input#333962oklch(0.36 0.071 275.91)
- ring#8EA2FFoklch(0.735 0.137 273.398)
- chart-1#8EA2FFoklch(0.735 0.137 273.398)
- chart-2#FFD34Doklch(0.882 0.154 90.328)
- chart-3#4ADE80oklch(0.8 0.182 151.711)
- chart-4#FF8AA6oklch(0.768 0.144 5.774)
- chart-5#4FD1E0oklch(0.796 0.114 205.941)
字体
- 标题
- Nunito · 800
- 正文
- Nunito · 600
- 等宽
- JetBrains Mono
字号阶梯
- display · 44/1.05 · -0.01em设计让界面更好用
- h1 · 30/1.1设计让界面更好用
- h2 · 22/1.2设计让界面更好用
- h3 · 18/1.3设计让界面更好用
- body · 17/1.5设计让界面更好用
- small · 14/1.4设计让界面更好用
圆角、间距和阴影
圆角sm 14pxmd 16pxlg 18pxxl 22px
间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
阴影实色偏移硬阴影，不模糊；按下时阴影消失。
布局
- 触控尺寸
- 48px
- 底部标签栏
- 64px，4 项，icons with labels; streak counter
- 屏幕边距
- 16px
- 导航
- bottom tab bar; lesson path on home
- 数字
- proportional; big streak and XP numbers
适合
- 语言和技能学习 App
- 少儿教育和答题 App
- 习惯养成和练习打卡
- 游戏化新手引导
要做和不要做
- 每完成一课都给一个简短的奖励页。
- 底部始终只有一个大号的继续或检查按钮。
- 答错时不要用刺眼的红色整屏惩罚，温和地给出正确答案。
- 同一时间不要弹出超过一个奖励或弹窗。