---
version: alpha
name: "Quest"
description: "Serien, XP und dicke Buttons, die Üben wie ein Spiel anfühlen lassen. Quest macht aus Üben ein Spiel: ein Lernpfad auf dem Startscreen, große Serien- und XP-Zahlen, Königsblau für den nächsten Schritt und Gold für Belohnungen. Buttons und Karten sitzen auf massiven versetzten Schatten, sodass sich jeder Tipp körperlich anfühlt, und Nunito hält den Ton warm und ermutigend."
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 macht aus Üben ein Spiel: ein Lernpfad auf dem Startscreen, große Serien- und XP-Zahlen, Königsblau für den nächsten Schritt und Gold für Belohnungen. Buttons und Karten sitzen auf massiven versetzten Schatten, sodass sich jeder Tipp körperlich anfühlt, und Nunito hält den Ton warm und ermutigend.

## Colors

- **primary (#2346D8):** Königsblau für den Weiter-Button, die aktuelle Lektion auf dem Pfad und den aktiven Tab.
- **on-primary (#FFFFFF)**
- **secondary (#F5B800):** Gold für XP, Serien-Flammen, Münzen und Belohnungen.
- **tertiary (#18A957):** Grün für richtige Antworten, abgeschlossene Lektionen und eine dritte Reihe.
- **neutral (#585F78):** Blaugrau für Hinweise, gesperrte Lektionen und sekundäre Labels.
- **surface (#FFFFFF):** Weiß; der Dunkelmodus ist ein tiefes Indigo mit etwas helleren Karten.
- **on-surface (#1A1F36)**

## Typography

Durchgehend Nunito: Extra Bold 800 für Titel und die großen Serien- und XP-Zahlen (bis 44px), Schnitt 600 in 17px für Fragen, Antworten und Fließtext.

## Layout

Smartphone-Screens mit 16px Seitenrand und einer 64px hohen Tab-Leiste mit vier beschrifteten Tabs und einem Serienzähler. Der Startscreen ist ein vertikaler Lernpfad; Lektions-Screens setzen oben einen Fortschrittsbalken und unten den Prüfen-Button.

## Shapes

18px-Ecken an Karten, Buttons und Antwortkacheln, jeweils mindestens 48px hoch. Harte Schatten: eine massive, nicht weichgezeichnete Kante unter jedem Button und jeder Karte, die beim Drücken verschwindet.

## Components

Ein gewundener Lernpfad mit runden Knoten, Antwortkacheln, die nach dem Prüfen grün oder rot werden, ein ganzbreiter Prüfen-Button, Serien- und XP-Zähler, ein Belohnungs-Screen mit Konfetti und eine wöchentliche Bestenliste.

## Do's and Don'ts

- Feiere jede abgeschlossene Lektion mit einem kurzen Belohnungs-Screen.
- Halte unten einen großen Weiter- oder Prüfen-Button.
- Bestrafe Fehler nicht mit grellroten Screens; zeige die richtige Antwort freundlich.
- Zeige nie mehr als eine Belohnung oder ein Popup gleichzeitig.