Gamified Playful
Also called: Gamified UI, Duolingo-like, Learning-game UI
Bright green chunky buttons with a 3D bottom edge, streak flames, XP bars, lesson paths and a friendly mascot — learning that feels like a game.
Design keywords
Say these words to ask for this style.
Gamified Playful turns every task into a level. Buttons and cards are chunky rounded tiles with a solid darker bottom edge (0 4px 0) that squashes flat when pressed; progress is a thick pill XP bar with a glossy stripe; the home screen is a winding path of round lesson nodes with a mascot cheering beside it; and the header shows streak, gems and hearts. Type is heavy, rounded and upper-case for actions. White canvas, light-grey 2px borders and a few loud flat colours (green, sky blue, orange, gold) keep it clean enough to use every day.
Best for
- Language and skill-learning apps
- Habit, fitness and wellness trackers
- Onboarding and quiz flows that need motivation
- Kids and teen products
Avoid for
- Banking, legal or medical records
- Enterprise admin and data-heavy tools
- Luxury and premium brands
✓ Do
- Give every button and card a solid 4px darker bottom edge and collapse it on press
- Show progress constantly: XP bar, streak count, completed nodes
- Use upper-case 800-weight labels on buttons (Latin only)
- Keep the canvas white with 2px #E5E5E5 borders so colour stays meaningful
✕ Don't
- No blurry soft shadows or gradients on buttons
- Don’t add brights beyond the six game colours (green, blue, orange, gold, purple, red); no pinks, teals or pastels
- Don’t hide progress or rewards behind menus
- Don’t use thin or condensed fonts
Not to be confused with
On mobile
Mobile is the main stage: a HUD row (course flag as the green brand tile, streak flame, gems, hearts), a unit banner, then a zig-zag path of round lesson nodes with the mascot. Buttons keep the 4px bottom edge and drop it on press — it is cheap and feels great under the thumb.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.