Quest: 게이미피케이션 학습 앱 디자인 시스템
App · Light · Playful · Bold · EducationQuest
연속 기록, XP, 두툼한 버튼으로 연습을 게임처럼 느끼게.
Quest는 연습을 게임으로 바꿉니다. 홈 화면의 레슨 경로, 큼직한 연속 기록과 XP 숫자, 다음 단계에는 로열 블루, 보상에는 골드. 버튼과 카드는 단단한 오프셋 그림자 위에 놓여 모든 탭이 물리적으로 느껴지고, Nunito가 따뜻하고 격려하는 톤을 지킵니다.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/ko/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
Best for
- 언어·기술 학습 앱
- 어린이 교육과 퀴즈 앱
- 습관·연습 트래커
- 게이미피케이션 온보딩
Do's and don'ts
- 레슨을 끝낼 때마다 짧은 보상 화면으로 축하하세요.
- 하단에 크게 계속하기 또는 확인 버튼 하나를 두세요.
- 실수를 가혹한 빨간 화면으로 벌주지 말고 정답을 친절하게 보여 주세요.
- 보상이나 팝업을 한 번에 두 개 이상 띄우지 마세요.