Illustration

Shape language

You know a Duolingo illustration when you see one. That's because we follow a few simple guidelines, from the color palette to our use of shadows. Follow along to create illustrations that fit into the Duolingo world.

Constructionanchor

All of our illustrations are made from three basic shapes: the rounded rectangle, the circle, and the rounded triangle. You'll probably find yourself using the rounded rectangle the most. It's okay to use your pathfinder tool to cut shapes up as you need them. Just make sure that every shape has rounded edges. Pointy shapes are off-brand.


Rhythmanchor

It's the rhythm of simple shapes that makes our illustrations interesting. Imagine each illustration is a melody. No one wants to hear the same note played over and over, but if you switch between longer and shorter notes, the ear gets interested. Take a look at the reddish blocks on the left: Shapes with similar visual weight are predictable and uninteresting, while a variation in shapes gives the eye something exciting to look at. We want to create a character that, beyond being visually pleasing, actually communicates a story through their design. Rhythm helps with that.


Simplicityanchor

6 shapesNot enough shapes, too abstract
15 shapesGood!
30 shapesToo many shapes

An illustration with good rhythm can still be simple. To use the music analogy again: Simple songs can be powerful, but there is more pressure on each note to strengthen the song. The trick is to make each shape matter in the illustration. Stylistically and practically, we need to use the fewest shapes possible.


Objects in spaceanchor

Duolingo characters and icons are designed on a flat perspective. Depth can still be conveyed as long as it's on the same line of sight.

Objects in space

Shadows and shading

Shadows always appear below characters and objects as a pill shape — never an oval, because ovals imply perspective.

The shadow's color depends on the background. Never put a shadow under an illustration that isn't a darker color than the base it's sitting on.

You may want to put an object back in space and give it a slightly different color. Try not to! This adds more colors to the illustration. Animators can also turn an object in space more easily when they can be more suggestive with where the body parts align.


Coloranchor

Polar

F7F7F7copy
Swan

E5E5E5copy
Hare

AFAFAFcopy
Wolf

777777copy
Eel

4B4B4Bcopy
Squid

EBE3E3copy
Walking Fish

FFDFE0copy
Flamingo

FFB2B2copy
Pig

F5A4A4copy
Crab

FF7878copy
Cardinal

FF4B4Bcopy
Fire Ant

EA2B2Bcopy
Canary

FFF5D3copy
Duck

FBE56Dcopy
Bee

FFC800copy
Lion

FFB100copy
Fox

FF9600copy
Cheetah

FFCE8Ecopy
Monkey

E5A259copy
Camel

E7A601copy
Guinea Pig

CD7900copy
Grizzly

A56644copy
Sea Sponge

D7FFB8copy
Turtle

A5ED6Ecopy
Owl

58CC02copy
Tree Frog

58A700copy
Iguana

DDF4FFcopy
Anchovy

D2E4E8copy
Beluga

BBF2FFcopy
Moon Jelly

7AF0F2copy
Blue Jay

84D8FFcopy
Macaw

1CB0F6copy
Whale

1899D6copy
Humpback

2B70C9copy
Narwhal

1453A3copy
Starfish

FFAADEcopy
Beetle

CE82FFcopy
Betta

9069CDcopy
Butterfly

6F4EA1copy

Our illustrations use a wide variety of colors. It's understandable that some illustrations will need a color outside of the palette, but use these colors as a general guide and be consistent where you can.

Color

Assigning color

This is fine
This is fine
This is better
This is better

Be as playful as you'd like. We want our illustrations to be colorful and vibrant.

Color

Pastels vs. gray

All of our apps and services are designed with white backgrounds. This prevents us from using white as a base color. Instead, use the light pastels in our palette. But never use gray — it appears lifeless and cold compared to the rest of our bright palette.

Color

Too much color

Keep your illustration to a few colors. Too many colors can hurt legibility when an object scales to a small size.


Floating accentsanchor

We'll occasionally have certain objects float above or below a character or object. We take this design element from Duo's feet, which kind of flutter below his body as he jumps and flies. Floating objects give us flexibility when turning an object in space, and they help make posing easier. Only float an object if it serves the illustration — don't force it.

successAll good.