Across different platforms, across different continents, the Duolingo name and its green owl have come to represent a fresh take on language learning and teaching through technology.
The name Duolingo alludes to the meaning of “two languages” in many Romance languages.
The logo and secondary logos always appear in lowercase.
Duolingo’s Chinese name is pronounced “duō lín guó,” a play on words roughly meaning “multiple neighboring countries.”
Where did the green owl come from? No one’s sure anymore, but his vibrant color and geniality undoubtedly capture the spirit of Duolingo.
Duo being a good citizen across the different platforms.
We want to make education more colorful, so we use colors that are vibrant and juicy.
Primary colors are applied to skills, buttons, and text.
Secondary colors are applied to backgrounds and grading ribbons. They are subdued to let the primary colors pop.
We use language to talk about the thousands of things we can see. Our colorful illustrations bring the visual parts of language to life.
All illustrations are geometric. They are made with wholes, halves and quarters of four basic shapes: circle, square, rounded rectangle and triangle. When tilting these shapes, a 45-degree angle is suggested. Irregular shapes are off-brand; every shape needed should be made with a mixture of the ones listed above.
Objects are created in the simplest way with the fewest shapes possible. Restraint is shown when applying detail so illustrations do not become noisy on smaller screen sizes.
Characters bring context to our sentences. They capture various professions, emotions, and postures. The full cast attempts to embody diversity, presenting cultures and ethnicities from around the world.
Monuments are used to symbolize each language we teach. They serve to remind learners that languages are formed and spoken around the world. Like a monument, languages are man-made; built by many people and ideas coming together.
Languages can also be represented by flags when a smaller, simpler symbol is needed.
Duolingo for schools
For the Schools product, we try to capture a vision of the modern classroom. Out with textbooks, in with interactive devices. Students don’t always face the board, they face each other and interact.
Although we use symbols that are universally recognizable, we strive to make icons that are unique to Duolingo, following our illustration guidelines and avoiding the generic.
These icons are the face of Duolingo’s home screen. They are small and colorful like fruit snacks, making a language course feel bite-sized and undaunting.
Often smaller and monochromatic, the interface icons are given tiny bits of flair to avoid looking generic.
For Latin script we use the rounded, sans serif version of Museo, giving text in Duolingo a fun and simple feel to match the illustrations. Over time we will choose similar fonts for non-Latin scripts.
Learn a language for free.
Gamification poured into every level.
Learn anytime, anywhere.
Make your breaks and commutes more productive with our iPhone and Android apps. Download them and see why Apple and Google gave us their highest accolades.
Learn a language for free.
Aprende un idioma gratis y diviértete.
East Asian script
Учите английский бесплатно. Навсегда.
Duolingo’s different exercise types feature many different input methods. Since the learner must interact with many inputs, affordances are used to clearly indicate how the learner will interact with each input method.
Good for making the learner produce language from memory.
A dashed container indicates that you can tap or drag words from a bank. Good for making the learner recognize language, without needing to produce or spell it from memory.
A microphone icon indicates speech input. The listening process will auto-stop after a period of silence, or manually stop if the learner taps the button again.
Tapping the button activates the listening process, while an inactive area behind it transcribes what the learner is speaking.
Fill in the blank
A dashed line indicates where a word is missing, and radio buttons are used to select the missing word. Good for comparing various forms of a word, like different conjugations.
Buttons, links, selections
Duolingo lessons take lot of button presses to answer, grade and advance in exercises. That’s why our buttons are often colorful and prominent.
Use Button 1 for the most important call to action on the page, Button 2 for all secondary actions.
The social network’s brand colors are respected when used for social sign in and sharing.
Part of the secret to getting people to learn more is helping them track and quantify how much they have learned.
Indicates how much of the lesson is completed. The bar can go forward and backward, and by varying amounts, as decided by our intelligent Engine.
Always represented with a ring to give the learner a sense of wholeness when their goal is met (think the Buddhist concept of ensō).
Duolingo tracks how strong you are in every word and linguistic concept. This strength bar can be used to represent strenth of words, lessons and skills.
Fluency measures your mastery of the vocabulary and grammar of a language and your ability to understand and produce the language.
Alerts & modals
An easy way to announce a new feature to a learner in a one-time, dismissable fashion.
These usually appear on desktop, and on hover, as a low overhead way to remind the learner of something like keyboard shortcuts.
Dotted underline indicates that you can interact with the text—via hover on desktop and tap on touchscreens—to get a translation and other helpful information. New words are highlighted in orange.
¿ Una manzana para comer ?
The ribbon appears after you submit your answer. The ribbon’s color reflects the correctness of the answer, and the information in the ribbon should give the learner as much insight into their answer as possible.
Por favor, levanten las manos.
Por favor, levanten las manos.
Use tab navigations to easily switch and browse between different functions.
Bold underline to call out the active page in header