Design teardown
Duolingo
A wide white learning homepage with a centered column, chunky green lip buttons, lowercase green display titles, gray paragraphs, a pale blue illustrated band, a deep navy band, and a green footer.
duolingo.com
Design character
Playful classroom poster
The page feels like a bright lesson sheet: lots of open white space, flat character art, and short friendly copy. Green does the shouting, gray does the explaining, and blue marks the quieter action. Controls look pressable, like plastic keys with a thick bottom edge.
Typography
Visible reading text uses the custom sans duolingo-sans. Section titles use the custom display face feather, set large, bold, and in lowercase. Buttons and the language control are smaller, bold, uppercase, and tracked out. Body copy is medium weight with relaxed line spacing.
Color system
The page is mostly white with one saturated green, a sky-blue link color, warm grays for text, a pale blue middle band, and a deep navy band. The footer inverts the green into the background and uses two lighter greens for type.
Spacing and geometry
Spacing is loose and mostly on an 8px rhythm, with a few odd steps: 14px between stacked buttons and 101px between an illustration and its copy. Sections breathe; text blocks stay narrow.
Layout
On a wide desktop view the page is one centered column. The hero pairs a character illustration with a short text stack. Later sections alternate illustration and copy. A white bar sticks after the hero. A pale blue illustrated field, a navy band, and a green footer close the page.
Motion
Motion lives in the buttons. A green button brightens on hover and, when pressed, drops 4px while its lip shadow disappears. A white button darkens slightly on hover and drops 2px on press, also losing its lip. The rest of the homepage stays still; the illustrations do not animate.
UI fingerprint
- Hard button lips Faces sit on a solid offset edge, 4px of #58a700 on green and 2px of #e5e5e5 on white, and the face slides down onto that edge when pressed.
- Lowercase green display Feature titles are feather at 48px or 64px, weight 700, in #58cc02, set in lowercase with normal tracking.
- Two custom faces feather carries the big titles. duolingo-sans carries everything else, at 500 for paragraphs and 700 for controls and links.
- Flat color bands White page, a #ddf4ff middle band, a #100f3e navy band, and a #58cc02 footer, with no soft shadows.