A bright, candy-colored, game-like system: a snow-white canvas, soft "eel" grey ink, and one electric Feather Green that owns every call to action — pressed into chunky 3D buttons with a darker-green bottom lip.
Two proprietary faces — duolingo-sans (body / UI) and feather (display) — shown here with their nearest free substitutes, Nunito and Fredoka. Hierarchy is built from size and weight; note the unusually confident 500-weight body text.
Cards are flat white with a 1px Swan hairline and a 16px radius; they lift with a soft grey glow on hover rather than a heavy drop shadow.
A 4px base unit scaling to a 48px section rhythm.
Everything is rounded — 12px dominates buttons, inputs and cards; pills and avatars go fully round.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single column; headlines drop toward ~40px; CTAs stretch to full width, keeping radius + green lip. |
| Tablet | 768–1023px | Two-column course / feature grids; colour bands stay full-bleed. |
| Laptop | 1024–1279px | Up to four-column grids; content capped to a centered max width. |
| Desktop | ≥ 1280px | Generous whitespace; oversized 64px hero; alternating white / pale-blue / indigo bands. |
The personality lives in colour, roundness and weight — so the brand survives every breakpoint even as the layout simplifies to a single column.
Duolingo's plan structure, rendered in-system — a free tier, the popular Super, and Max.
A weekly league leaderboard, in-system: Swan hairlines, pill status chips, rounded pager.
| Rank | Learner | League | Status | XP |
|---|---|---|---|---|
| #1 | maria_es | Diamond | Promoted | 4,820 |
| #2 | kenji_jp | Diamond | Promoted | 4,510 |
| #3 | lena_de | Diamond | Holding | 3,990 |
| #4 | amir_fr | Diamond | Holding | 3,740 |
| #5 | sofia_it | Diamond | Holding | 3,605 |
Sign-in patterns in Duolingo's system — rounded inputs, a green primary action, and social sign-on.