Construction

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.

Rhythm

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.

Simplicity

6 shapes Not enough shapes, too abstract

15 shapes Good!

30 shapes Too 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 space

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.

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.

Color

Polar

F7F7F7

Swan

E5E5E5

Hare

AFAFAF

Wolf

777777

Eel

4B4B4B

Squid

EBE3E3

Walking Fish

FFDFE0

Flamingo

FFB2B2

Pig

F5A4A4

Crab

FF7878

Cardinal

FF4B4B

Fire Ant

EA2B2B

Canary

FFF5D3

Duck

FBE56D

Bee

FFC800

Lion

FFB100

Fox

FF9600

Cheetah

FFCE8E

Monkey

E5A259

Camel

E7A601

Guinea Pig

CD7900

Grizzly

A56644

Sea Sponge

D7FFB8

Turtle

A5ED6E

Owl

58CC02

Tree Frog

58A700

Iguana

DDF4FF

Anchovy

D2E4E8

Beluga

BBF2FF

Moon Jelly

7AF0F2

Blue Jay

84D8FF

Macaw

1CB0F6

Whale

1899D6

Humpback

2B70C9

Narwhal

1453A3

Starfish

FFAADE

Beetle

CE82FF

Betta

9069CD

Butterfly

6F4EA1

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.

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.

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.

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 accents

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.