Zum Inhalt springen
Codex DesignBETA
Deutsch
Installation

Quest: Gamifiziertes Lern-App-Designsystem

App · Hell · Verspielt · Kräftig · Bildung

Quest

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.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch
9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch
9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIch

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Quest. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/quest.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

  • 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)

Dunkles Theme

  • 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)

Schriften

Überschriften
Nunito · 800
Fließtext
Nunito · 600
Monospace
JetBrains Mono

Schriftgrößen

  • display · 44/1.05 · -0.01emZwölf Boxkämpfer jagen Viktor
  • h1 · 30/1.1Zwölf Boxkämpfer jagen Viktor
  • h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
  • h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
  • body · 17/1.5Zwölf Boxkämpfer jagen Viktor
  • small · 14/1.4Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 14pxmd 16pxlg 18pxxl 22px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenHard: a solid offset in the ink color, no blur; it disappears when pressed.

Layout

Touch-Ziele
48px
Tab-Leiste
64px, 4 Einträge, icons with labels; streak counter
Bildschirmrand
16px
Navigation
bottom tab bar; lesson path on home
Ziffern
proportional; big streak and XP numbers

Ideal für

  • Sprach- und Skill-Lern-Apps
  • Bildungs- und Quiz-Apps für Kinder
  • Gewohnheits- und Übungs-Tracker
  • Gamifiziertes Onboarding

Dos 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.

Weitere Designsysteme für Apps

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.