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.



Vorschau
Screens erkunden
Sehen Sie das education-Mobile-App-Design in der Vorschau, vollständig editierbar in Sleek.
Über 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.
Was enthalten ist
Enthaltene Screens
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.
Design & Features
Wichtige Features
- 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
Zielgruppe
Für wen es ist
Anwendungsfälle
Was Sie bauen können
- 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
So nutzen Sie dieses Template
- 1
Template öffnen
Stöbern Sie in den Screens und sehen Sie das komplette Design in der Vorschau, um zu prüfen, ob es zu Ihrer Idee passt.
- 2
Dieses Template nutzen
Öffnen Sie mit einem Klick Ihre eigene, vollständig editierbare Kopie in Sleek.
- 3
Mit KI bearbeiten
Palette umstylen, Layouts ändern und Screens hinzufügen oder entfernen – einfach indem Sie beschreiben, was Sie wollen.
- 4
Exportieren und launchen
Exportieren Sie Ihr Design oder geben Sie es an Entwickler weiter, und bauen Sie weiter Richtung Launch.
Häufig gestellte Fragen
Verwandte Mobile-App-Templates
Beginnen Sie mit dem Design Ihrer education-App
Nutzen Sie es in Sleek und machen Sie es zu Ihrem: Palette umstylen, jeden Screen mit KI bearbeiten und nach Code oder Figma exportieren.
Dieses Template nutzen







