---
version: alpha
name: "Quest"
description: "连胜、经验值和厚实的按钮，让练习像玩游戏一样。 Quest 把练习变成游戏：首页是一条闯关式课程路线，连胜天数和经验值用大号数字，宝蓝色指向下一步，金黄色代表奖励。按钮和卡片下面垫着实心偏移投影，每次点按都有实感；Nunito 让语气温暖又鼓舞人心。"
colors:
  primary: "#2346D8"
  on-primary: "#FFFFFF"
  secondary: "#F5B800"
  tertiary: "#18A957"
  neutral: "#585F78"
  surface: "#FFFFFF"
  on-surface: "#1A1F36"
typography:
  display-lg:
    fontFamily: "Nunito"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: "Nunito"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.1
  headline-md:
    fontFamily: "Nunito"
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Nunito"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.3
  body-md:
    fontFamily: "Nunito"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.5
  body-sm:
    fontFamily: "Nunito"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
rounded:
  sm: 14px
  md: 16px
  lg: 18px
  xl: 22px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Quest 把练习变成游戏：首页是一条闯关式课程路线，连胜天数和经验值用大号数字，宝蓝色指向下一步，金黄色代表奖励。按钮和卡片下面垫着实心偏移投影，每次点按都有实感；Nunito 让语气温暖又鼓舞人心。

## Colors

- **primary (#2346D8):** 宝蓝，用于继续按钮、路线上的当前课程和当前标签页。
- **on-primary (#FFFFFF)**
- **secondary (#F5B800):** 金黄，用于经验值、连胜火焰、金币和奖励。
- **tertiary (#18A957):** 绿色，用于答对、已完成的课程和第三组数据。
- **neutral (#585F78):** 蓝灰，用于提示、未解锁的课程和次要标签。
- **surface (#FFFFFF):** 白色；深色模式是深靛蓝，卡片稍浅一级。
- **on-surface (#1A1F36)**

## Typography

全站用 Nunito：标题和大号连胜、经验值数字用特粗 800（最大 44px）；题目、选项和正文用字重 600，17px。

## Layout

手机屏幕左右边距 16px，底部标签栏高 64px，四个带文字的标签加连胜计数。首页是纵向的课程路线；答题页顶部是进度条，检查按钮固定在底部。

## Shapes

卡片、按钮和选项块用 18px 圆角，每个都至少 48px 高。硬投影：每个按钮和卡片下方有一条实心、无模糊的偏移边，按下时消失。

## Components

蜿蜒的课程路线和圆形关卡节点、检查后变绿或变红的选项块、通栏检查按钮、连胜和经验值计数、撒彩纸的奖励页，以及每周排行榜。

## Do's and Don'ts

- 每完成一课都给一个简短的奖励页。
- 底部始终只有一个大号的继续或检查按钮。
- 答错时不要用刺眼的红色整屏惩罚，温和地给出正确答案。
- 同一时间不要弹出超过一个奖励或弹窗。