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.
Explore the screens
Preview the education mobile app design, fully editable in Sleek.
About the 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.
Screens included
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.
Key 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
Who it's for
What you can build
- 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
How to use this template
- 1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
- 2
Use this template
Open your own fully editable copy in Sleek with one click.
- 3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
- 4
Export and ship
Export your design or hand it to developers, and keep building toward launch.
Questions, answered. Everything to know before you start.
How do I build an education app from this template?
What screens are included in this education app design template?
Can I customize the education app UI design?
Can I edit this design in Figma?
Is this education app design template free to use?
Is this template suitable for a language-learning or skills app?
Something else? Write to support@sleek.design.
Related mobile app templates
Start designing your education app
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI, and export to code or Figma.