screenroveScreenrove / Design references
Duolingo design guide
A cheerful, game-like learning app where a mascot talks you through every step and chunky buttons reward each tap.
Typography
Observed family: duolingo-sans. Font files are not distributed.
marketing: Bright illustrated, light with a dark Super variant
- Canvas:
#ffffff - Brand green (headlines, primary button, footer):
#58cc02 - Button lip:
#58a700 - Hero text:
#4b4b4b - Body text:
#777777 - Link / secondary accent:
#1cb0f6 - Footer heading on green:
#d7ffb8 - Footer link on green:
#a5ed6e - Super page background:
#000437
Layout and components
- Centred 1440px pages with content held to roughly the middle 1000px; bands alternate illustration left / text left down the page.
- Headlines are short and lowercase in a rounded display face (feather), in brand green on white or white on navy.
- Every page ends in a closing call-to-action band; the homepage closes into a full-bleed green footer with five link columns and a site-language list.
- Primary button: 50px high, 12px radius, #58cc02 fill with a 4px #58a700 bottom lip (box-shadow 0 4px 0), white uppercase 15px / 700 label with 0.8px tracking.
- Secondary button: white fill, 2px #e5e5e5 border with a 2px bottom lip, blue #1cb0f6 uppercase label.
- Course strip: a horizontally scrolling row of flag icons with uppercase grey labels and arrow controls, repeated on the homepage and Super page.
- Plan comparison (Super): three columns with check / cross rows; the paid column is raised, gradient-headed and marked with a check badge.
product: White, playful, colour-coded feedback
- Canvas:
#ffffff - Heading text:
#3c3c3c - Body text:
#4b4b4b - Muted text:
#777777 - Disabled / hint:
#afafaf - Border:
#e5e5e5 - Primary green:
#58cc02 - Green lip / correct text:
#58a700 - Blue action:
#1cb0f6 - Blue lip:
#1899d6 - Selected fill:
#ddf4ff - Selected border (nav item):
#84d8ff - Error red:
#ff4b4b - Error text:
#ea2b2b - Correct banner (sampled, matches --color-sea-sponge):
#d7ffb8 - Incorrect banner (sampled, matches --color-walking-fish):
#ffdfe0 - XP yellow:
#ffc800 - Streak orange:
#ff9600 - New-word purple:
#ce82ff
Layout and components
- Onboarding and lessons are full-screen with no navigation: a top row (back or close, a rounded green progress bar, hearts) and a fixed footer bar with a top rule holding Skip on the left and one primary action on the right.
- Onboarding questions put Duo and a speech bubble top-left and the answers in a centred one- or two-column card list; the bubble reacts to each answer.
- The learn path uses a fixed 256px left sidebar with a 2px #e5e5e5 right border, a central winding node path under a coloured unit banner, and a right rail of 2px-bordered, 16px-radius cards.
- Buttons are 'juicy': a ::before fill with a 0 4px 0 darker lip (#58cc02 over #58a700, #1cb0f6 over #1899d6), 16px radius, uppercase bold labels; disabled buttons turn flat grey.
- Answer cards: 12px radius, grey border with a bottom lip and a number-key badge; selected cards turn light blue, correct green, and matched pairs grey out.
- Feedback banner: a full-width footer sheet in light green or light red with an icon, a 24px title, Too easy / Too difficult / Report links and a Continue button recoloured to match.
- Celebration screens (lesson complete, streak, quests, gems) are single centred illustrations with a large number or stat cards and one Continue.
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md