---
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):** グリーン。正解、完了したレッスン、3 番目の系列用。
- **neutral (#585F78):** ブルーグレー。ヒント、ロックされたレッスン、補助的なラベル用。
- **surface (#FFFFFF):** 白。ダークモードは深いインディゴで、カードはやや明るく。
- **on-surface (#1A1F36)**

## Typography

全体を Nunito で統一。タイトルと大きな連続記録・XP の数字はエクストラボールドの 800（最大 44px）、問題、答え、本文はウェイト 600 の 17px。

## Layout

左右 16px のパディングと、高さ 64px の下部タブバーのスマートフォン画面。ラベル付きの 4 つのタブと連続記録のカウンター。ホームは縦に伸びるレッスンパスで、レッスン画面は上に進捗バー、下にチェックボタンを置きます。

## Shapes

カード、ボタン、答えのタイルは 18px の角丸で、いずれも高さ 48px 以上。影はハード：各ボタンとカードの下にずらして置いた、ぼかしのないベタ塗りの縁で、押すと消えます。

## Components

丸いノードが曲がりくねるレッスンパス、チェックのあとに緑か赤に変わる答えのタイル、全幅のチェックボタン、連続記録と XP のカウンター、紙吹雪のごほうび画面、週間リーダーボード。

## Do's and Don'ts

- レッスンを終えるたびに、短いごほうび画面でお祝いする。
- 大きな「続ける」または「チェック」ボタンを、下に 1 つ置く。
- 間違いに、きつい赤い画面で罰を与えない。正しい答えは優しく示す。
- ごほうびやポップアップを、一度に 2 つ以上表示しない。