Duolingo
duolingo.comBright, gamified learning UI with chunky 3D buttons, rounded type and a cheerful green.
An independent summary of Duolingo's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Duolingo. Color values are approximate.
Overview
Duolingo uses play to keep people practicing. Big rounded shapes, bright colors and instant feedback make every tap feel rewarding.
Color
| Role | Value | Use |
|---|---|---|
| Feather green | #58CC02 | Primary buttons, success |
| Macaw blue | #1CB0F6 | Secondary accent |
| Cardinal red | #FF4B4B | Errors |
| Eel gray | #4B4B4B | Text |
Typography
A rounded custom sans (Feather Bold for headings, DIN Round-style for UI). Bold weights and uppercase on buttons.
Spacing and layout
Large touch targets and generous padding; content is centered in a narrow lesson column.
Components
- 3D buttons with a darker bottom border that presses down.
- Progress bar across the top of every lesson.
- Feedback sheet that slides up green or red.
- Streak and XP counters with icons.
Do
- Give instant, celebratory feedback.
- Make tap targets large.
Don't
- Don't use flat buttons for primary actions.
- Don't hide progress.
Prompt for your agent
Style this interface in the spirit of Duolingo's design language, without copying its logo or brand assets.
Bright, gamified learning UI with chunky 3D buttons, rounded type and a cheerful green.
Follow the color roles, type and component notes in this DESIGN.md.