Duolingo
A gamified, character-driven canvas built around Duo green (#58CC02) — one of the most recognized brand greens in consumer apps — with bright white surfaces, bold rounded typography, and a supporting cast of vibrant accent colors (yellow #FFC800, red #FF4B4B, blue #1CB0F6) that drive streak and XP mechanics. The system feels physically substantial: thick drop shadows on interactive elements, bold outlines on cards and buttons, and Duo the owl's presence throughout. Typography is set in Feather Bold — a custom rounded display face — that reads as fun and slightly educational, like a children's book that grew up.
Color Tokens
1. Visual Theme & Atmosphere
Duolingo is the most playful app at scale. Every surface decision reinforces the gamification loop: the green CTA button has a physical shadow (4px bottom) that depresses on press, streaks and XP use warm yellows and oranges, and Duo the owl mascot provides emotional feedback throughout. The app runs on positive reinforcement — correct answers trigger green explosions and character celebrations. The design system serves behavioral psychology as much as aesthetics.
2. Color System
Green is Duolingo's core identity:
- Primary green: #58CC02 — CTAs, correct states, active elements
- Green shadow: #58A700 — 3D button shadow effect, giving buttons physicality
- Blue: #1CB0F6 — secondary actions, listening exercises
- Yellow: #FFC800 — streaks, XP, gold achievements
- Red: #FF4B4B — incorrect answers, hearts/lives
- Purple: #CE82FF — gems, premium features
- Canvas: White with minimal gray surface layers
3. Typography
Feather Bold (and Nunito as fallback) is rounded and chunky — the letters feel approachable for language learners of all ages. Body text runs heavy (700) even at reading sizes, reinforcing the bold character of the system. All caps labels use tight tracking. No thin weights anywhere — this system doesn't whisper.
4. Components & Patterns
- CTA button: Full-width, 3D shadow effect that presses down on click, large border-radius (12px)
- Progress bar: Green fill with animated XP gain, rounded pill shape
- Lesson cards: Bold bordered tiles with character art, thick outline style
- Answer options: Large tap targets, 12px radius, border changes on select (green correct / red wrong)
- Streak flame: Animated fire icon, orange color, always in navigation header
- Character feedback: Full-screen celebration with Duo animation on lesson complete
5. Spacing & Layout
Mobile-first. Primary lesson view is single-column, 16px horizontal padding. Tap targets minimum 56px height. Marketing and web are centered column ~640px max. White space is minimal — the content is dense with interactive elements.
6. Motion & Interaction
Highly animated. Correct answers trigger particle explosions. Duo bounces and waves. Buttons physically press. Streak milestones play full-screen animations. The motion design is closer to a mobile game than a productivity app — every interaction has a reward signal.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for