Quest: sistema de diseño de aprendizaje gamificado
App · Light · Playful · Bold · EducationQuest
Rachas, XP y botones robustos que hacen que practicar parezca un juego.
Quest convierte la práctica en un juego: un camino de lecciones en la pantalla de inicio, grandes números de racha y XP, azul real para el siguiente paso y dorado para las recompensas. Los botones y las tarjetas se apoyan en sombras sólidas desplazadas para que cada toque se sienta físico, y Nunito mantiene un tono cálido y alentador.
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/es/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
- Apps de aprendizaje de idiomas y habilidades
- Educación infantil y apps de cuestionarios
- Seguimiento de hábitos y de práctica
- Onboarding gamificado
Do's and don'ts
- Celebra cada lección terminada con una pantalla de recompensa breve.
- Mantén un gran botón de continuar o comprobar abajo.
- No castigues los errores con pantallas rojas duras; muestra la respuesta correcta con amabilidad.
- No muestres más de una recompensa o ventana emergente a la vez.