Education · Chalk & Coral Scholarship
Education App Design Template
Lumio is a course-learning app design with a warm chalk-and-coral look, built for founders and designers shipping an online-education product.



Vista previa
Explora las pantallas
Vista previa del diseño de app móvil de education, totalmente editable en Sleek.
Sobre Education App
Lumio is an education app design template built around a "Chalk & Coral Scholarship" look: a warm chalk-white canvas, deep slate text, and a confident coral accent reserved for progress and primary actions. A study-blue marks in-progress courses and mint signals completion, so color encodes status instead of decorating the screen. Crisp flat cards sit on a tonal background with a single hairline shadow, and the signature "momentum ring" recurs across the app as a chunky split-arc progress ring that fills coral as lessons complete.
The template ships seven connected screens that form a complete learning flow: a Home with a streak ring and daily goals, a searchable Course catalog of subjects, a Course detail with instructor and syllabus, a Lesson player with video and a "Mark Complete" slab, a multiple-choice Quiz with instant feedback, a Progress dashboard with weekly activity and badges, and a Profile with enrolled courses and stats. Together they cover the habit-building loop that makes a learning app feel motivating, from browsing courses to completing units and watching XP climb.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma with no plugin, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
Qué incluye
Pantallas incluidas
Home
A personalized greeting with an XP chip and a large coral streak ring, plus a 'Continue learning' card showing a Spanish unit at 60% and a daily goals list with progress states. This is the daily-habit hub that pulls learners back in.
Course Catalog
A searchable grid of subjects such as Languages, Mathematics, Design, and Coding, each an illustrated card with course counts and star ratings. The browse-and-enroll surface.
Course Detail
A course hero illustration, title, rating, instructor avatar, and a vertical syllabus of modules with completion checks and momentum rings, anchored by a coral 'Continue Learning' button. It frames the full course before a learner commits.
Lesson Player
A video pane with a segmented chapter progress bar, lesson number and title, descriptive lesson text, and a firm coral 'Mark Complete' slab. The focused screen where actual learning happens.
Quiz
A single multiple-choice question with tappable lettered answer slabs, a 14-day streak chip, a progress dots row, and an instant 'You got it!' mint feedback state. It reinforces learning with quick, rewarding checks.
Progress
Total hours and XP earned as hero figures, a weekly activity bar chart with the current day highlighted in coral, and a row of earned badges. It turns effort into visible momentum.
Profile
A coral-ringed avatar, level and learner title, a stats row for streak, courses, and points, plus enrolled courses with progress bars and account settings. The personal home base for the learner.
Diseño y funciones
Funciones clave
- Chalk & Coral Scholarship aesthetic: warm chalk-white, slate ink, one coral accent
- Status-encoding color: coral for progress, study-blue for in-progress, mint for complete
- Signature 'momentum ring' progress arc on the home header and course cards
- Thick segmented progress bars across courses and lessons
- Labeled bottom navigation with an active coral pill
- Searchable subject catalog with course counts and ratings
- Lesson player with segmented progress and a 'Mark Complete' slab
- Quiz screen with instant coral and mint feedback states
Audiencia
Para quién es
Casos de uso
Qué puedes crear
- Launch an MVP for an online-learning product
- Mock up education app screens for an investor pitch
- Hand a consistent education app UI off to developers
- Explore a redesign of an existing course or language app
Cómo usar esta plantilla
- 1
Abrir la plantilla
Explora las pantallas y previsualiza el diseño completo para ver si encaja con tu idea.
- 2
Usar esta plantilla
Abre tu propia copia totalmente editable en Sleek con un clic.
- 3
Editar con IA
Cambia la paleta, modifica las estructuras y añade o quita pantallas solo describiendo lo que quieres.
- 4
Exporta y lanza
Exporta tu diseño o pásaselo a los desarrolladores, y sigue construyendo hacia el lanzamiento.
Preguntas frecuentes
Plantillas de apps móviles relacionadas
Empieza a diseñar tu app de education
Úsala en Sleek y hazla tuya: cambia la paleta, edita cualquier pantalla con IA y exporta a código o Figma.
Usar esta plantilla







