Brand guidelines
Duolingo
A game you want to open: one loud green, rounded cartoon shapes and tactile buttons make learning look like play.
01Logo
- Colors: Feather Green, white or gray only
- Minimum size: 100px on screen; 35mm (1.375in) in print
- Rotation: 0° by default; 90° for skyscrapers, banners, merch
- Portrait lockup for third parties in square or tall spaces
Don’t
- Change the color
- Squash it
- Recreate it in a different font
- Outline it
02Color
- Feather Green
- HEX
- #58CC02
- RGB
- 88 204 2
- On white
- 2.1:1
Headlines, primary buttons, footer ground.
- Mask Green
- HEX
- #89E219
- RGB
- 137 226 25
- On white
- 1.6:1
Ground on which Duo can be placed.
- Eel
- HEX
- #4B4B4B
- RGB
- 75 75 75
- On white
- 8.7:1
Text color; never for Feather headlines unless printing one-color.
- Snow
- HEX
- #FFFFFF
- RGB
- 255 255 255
- On white
- 1.0:1
Primary background of every app and page.
- Macaw
- HEX
- #1CB0F6
- RGB
- 28 176 246
- On white
- 2.4:1
Links, outline-button labels, full-bleed grounds, illustration.
- Cardinal
- HEX
- #FF4B4B
- RGB
- 255 75 75
- On white
- 3.3:1
Splashes, full-bleed grounds, errors in the app.
03Type
Display
Aa Bb 123
Mochiy Pop P One stand-in for Feather Bold
Body
A game you want to open: one loud green, rounded cartoon shapes and tactile buttons make learning look like play.
Baloo 2 stand-in for DIN Next Rounded
Headlines of 10+ words, subheads, all body copy, ALL CAPS buttons; 14px minimum, leading 140%
04Voice
- expressive
- playful
- embracing
- worldly
- Celebrate success ("You did it!"), support stumbles ("Not quite correct. Try again!")
- Serious stories: tone down exuberance and exclamation points
- Duo: helpful, motivating, persistent, emotive, slightly awkward; never threatening, angry or mean
- Homepage voice for landing pages: lowercase 2-5-word headlines, one plain paragraph, caps CTA
Don’t
- Use "users"
- Be sarcastic, smug or dry
- Use slang not everyone knows
05Do and don’t
Do
- Feather Green leads on white; when in doubt, lean in to green
- Buttons ALL CAPS, no punctuation, 12px radius, solid lip
- Illustration from rounded shapes with pill shadows; photography only of real learners
- "Learners", never "users"
Don’t
- Recolor, outline, skew or respace the logotype
- Set Feather in Title Case, caps, neutrals or several colors
- Use pointy shapes, oval shadows or gray as an illustration base
- Use blurred drop shadows or pill-shaped buttons