Gamified Training

Design Mockup — Color Theme · Typography · Components

Color Palette

Purple80
#D0BCFF
Primary
Dark Mode
PurpleGrey80
#CCC2DC
Secondary
Dark Mode
Pink80
#EFB8C8
Tertiary
Dark Mode
Purple40
#6650A4
Primary
Light Mode
PurpleGrey40
#625B71
Secondary
Light Mode
Pink40
#7D5260
Tertiary
Light Mode

Typography Scale

bodyLarge
16sp · Normal
Line: 24sp
Letter: 0.5sp
✅ Active
Welcome aboard. Today we will cover the key points of your training.
titleLarge
22sp · Normal
Line: 28sp
Letter: 0sp
💤 Commented
Training Modules
labelSmall
11sp · Medium
Line: 16sp
Letter: 0.5sp
💤 Commented
XP EARNED · BADGE UNLOCKED · LEVEL 3

Screen Preview

☀️ Light Mode
🎮 Gamified Training
Good morning, Employee
Welcome aboard!
📈 Daily Progress
650 / 1000 XP
🏆 Level 3 ⭐ 5 Streak 🔥 Active
Next Module
Safety Training · 15 min
＋
🌙 Dark Mode
🎮 Gamified Training
Good morning, Employee
Welcome aboard!
📈 Daily Progress
650 / 1000 XP
🏆 Level 3 ⭐ 5 Streak 🔥 Active
Next Module
Safety Training · 15 min
＋

UI Components

Buttons — Light Mode
Start Training
View Progress
Earn Badges
Buttons — Dark Mode
Start Training
View Progress
Earn Badges
XP Progress Bar
Level 3 650 / 1000 XP
Module 2 30 / 100 XP
Training Modules
📋
Onboarding 101
Completed · 200 XP
✓ Done
🔥
Safety Training
In progress · 15 min
New
🔒
Leadership Skills
Locked · Level 5
Locked

2026 Gamified Mobile Training App for Employee Development

Completed by Rafael Siles & Donghyeon Baek