Quest: Gamified Learning App Design System

App · Light · Playful · Bold · Education

Quest

Streaks, XP and chunky buttons that make practice feel like a game.

Quest turns practice into a game: a lesson path on the home screen, big streak and XP numbers, royal blue for the next step and gold for rewards. Buttons and cards sit on solid offset shadows so every tap feels physical, and Nunito keeps the tone warm and encouraging.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Quest design system. Its spec is at https://codexdesign.io/design-systems/quest.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

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

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

Fonts

Headings: Nunito · 800
Body: Nunito · 600
Monospace: JetBrains Mono

Type scale

display · 44/1.05 · -0.01emThe quick brown fox
h1 · 30/1.1The quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 17/1.5The quick brown fox
small · 14/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 14pxmd 16pxlg 18pxxl 22px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowHard: a solid offset in the ink color, no blur; it disappears when pressed.

Layout

Touch targets: 48px
Tab bar: 64px, 4 items, icons with labels; streak counter
Screen padding: 16px
Navigation: bottom tab bar; lesson path on home
Numerals: proportional; big streak and XP numbers

Quest: Gamified Learning App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps