---
version: alpha
name: "Quest"
description: "연속 기록, XP, 두툼한 버튼으로 연습을 게임처럼 느끼게. Quest는 연습을 게임으로 바꿉니다. 홈 화면의 레슨 경로, 큼직한 연속 기록과 XP 숫자, 다음 단계에는 로열 블루, 보상에는 골드. 버튼과 카드는 단단한 오프셋 그림자 위에 놓여 모든 탭이 물리적으로 느껴지고, 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는 연습을 게임으로 바꿉니다. 홈 화면의 레슨 경로, 큼직한 연속 기록과 XP 숫자, 다음 단계에는 로열 블루, 보상에는 골드. 버튼과 카드는 단단한 오프셋 그림자 위에 놓여 모든 탭이 물리적으로 느껴지고, Nunito가 따뜻하고 격려하는 톤을 지킵니다.

## Colors

- **primary (#2346D8):** 로열 블루. 계속하기 버튼, 경로의 현재 레슨, 활성 탭에 씁니다.
- **on-primary (#FFFFFF)**
- **secondary (#F5B800):** 골드. XP, 연속 기록 불꽃, 코인, 보상에 씁니다.
- **tertiary (#18A957):** 초록. 정답, 완료한 레슨, 세 번째 계열에 씁니다.
- **neutral (#585F78):** 블루 그레이. 힌트, 잠긴 레슨, 보조 라벨에 씁니다.
- **surface (#FFFFFF):** 흰색. 다크 모드는 카드가 살짝 더 밝은 깊은 인디고입니다.
- **on-surface (#1A1F36)**

## Typography

전체를 Nunito로: 제목과 큰 연속 기록·XP 숫자(최대 44px)는 ExtraBold 800, 질문, 답, 본문은 굵기 600 17px.

## Layout

좌우 패딩 16px의 휴대폰 화면, 이름표가 있는 탭 네 개와 연속 기록 카운터가 있는 높이 64px의 하단 탭 바. 홈은 세로 레슨 경로이고, 레슨 화면은 상단에 진행 막대, 하단에 확인 버튼을 둡니다.

## Shapes

카드, 버튼, 답안 타일은 18px 모서리이며 각각 높이가 최소 48px. 단단한 그림자: 각 버튼과 카드 아래로 블러 없이 밀린 단색 가장자리이며, 누르면 사라집니다.

## Components

둥근 노드가 있는 굽이치는 레슨 경로, 확인 후 초록이나 빨강으로 바뀌는 답안 타일, 전체 폭 확인 버튼, 연속 기록과 XP 카운터, 색종이가 흩날리는 보상 화면, 주간 리더보드.

## Do's and Don'ts

- 레슨을 끝낼 때마다 짧은 보상 화면으로 축하하세요.
- 하단에 크게 계속하기 또는 확인 버튼 하나를 두세요.
- 실수를 가혹한 빨간 화면으로 벌주지 말고 정답을 친절하게 보여 주세요.
- 보상이나 팝업을 한 번에 두 개 이상 띄우지 마세요.