illustration guidelines

Shape Language
All of our illustations are made from three
basic shapes: the rounded rectange, the
circle and the rounded triangle. You’ll
probably find yourself using the rounded
rectangle the most.

It’s ok to use your pathfinder tool to

cut shapes up as you need them. Be
conscious of any pointy shapes, it’s off
brand. Ensure that every shape has
rounded edges.
Rhythm
While it’s one thing to compose an
illustration using simple shapes, it’s the
rhythm of those shapes that makes the
illustration interesting. Imagine each
illustration is a melody, no one likes to
hear the same note over and over, but
throwing in longer notes and shorter
notes makes it more pleasing to the ear.
Take a look at the reddish blocks on the
left: shapes with more similar visual
weight are predictable and uninteresting,
whereas a variation in shapes gives the
eyes something more exciting to look at.
We want to create more than just a
visually pleasing character, we want a
character that communicates as story
through their outward design – good
rhythm helps with that.
 Simplicity

An illustration can have good rhythm,

yet remain simple. To use the music
analogy again, simple songs can be
powerful but there is more pressure
on each note to be in the right spot.
The trick is to identify that line for
6 shapes 14 shapes 30 shapes
each illustration. It’s important
Not enough shapes/ Good! Too many shapes
(stylistically and practically) to use as
too abstract
few shapes as necessary in an
illustration.

The most important part of each

illustration is ensuring the user can
easily identify what object, scene, or
character you’re trying to
communicate. Going too abstract can
WIP - MORE EXAMPLES COMING SOON
hurt the identitication of an
illustration thus resulting in the user
getting an answer wrong within our
language learning product.
Objects in Space
Perspective

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 an oval implies
perspective.

The color of the shadow depends on the

background. Never put shadow under an
illustration that isn’t a darker color of the
base it’s sitting on.

There may be times when you want to put

an object back in space and give it a
slightly different color, try not to! This
only adds more colors to an illustration.
It’s also easier for an animator to turn an
object in space when they can be more
suggestive where body parts align.
 Color Palette
We have quite a range of colors we
use for our illustrations. Sometimes
Ghost Albino Duck Sea Sponge Iguana Starfish
F7F7F7 EBE3E3 FFD900 FFCE8E DDF4FF FFAADE different illustrations warrent a color
outside of the palette, we get that, all
we ask is that you use these colors as
Swan Walking Fish Bee Turtle Anchovie Beetle
a general guide and be consistent
E5E5E5 FFD7D8 FFC800 ADE756 D2E4E8 CE82FF
where you can.

Hare Flamingo Lion Owl Beluga Betta

AFAFAF FFC1C1 FFB100 78C800 9069CD
BBF2FF

Wolf Pig Fox Tree Frog Moon Jelly Butterfly

777777 F5A4A4 6F4EA1
FF9600 58A700 7AF0F2

Eel Crab Cheetah Bluejay

4B4B4B FF7878 FFCE8E 47D7FF

Cardinal Monkey Macaw

FF4B4B E5A259 1CB0F6

Fire Ant Guinea Pig Whale

EA2B2B CD7900 1899D6

Grizzly Humpback
A56644 2B70C9

Narwhal
1453A3
 Color
Assigning Color

Feel free to be playful –we try to

keep all of our illustrations
colorful and vibrant.
This is fine This is better!

Pastels vs Grey

Since all of our apps and services

are designed with white
backgrounds, that prevents us
from using white as a base colors.
Instead of white, use the light
pastels in our palette. But never
This is fine This is better! use grey, grey appears lifeless and
cold compared to the rest our
bright palette.

Too much color

Keep your illustration to just a few

basic colors. Too many colors can
hurt the legibility the object at
small sizes.
 Character Construction
Body Types

Our characters are diverse, quirky,

and lovable. The most important
thing about our characters is how
well they scale - not just in terms of
size but also in terms of production.
A character is much easier to pose
in other positions when the pieces
are simple. However, this doesn’t
mean a character shouldn’t be
unique. Everything from head width
and height, head shape, and facial
features are customizable. Ususally,
the head and body are composed of
1-2 basic shapes each. The
examples on the left are but a few of
many shape combinations.

One way of keeping a character’s shape language cohesive is to use shape

repetition throughout their design. While this isn’t always required, its a good
starting point.

Ensure that the arm socket Avoid too many shapes, it

is always concealed behind complicates the overall
the torso. silhouette.
 Floating Accents

Occasionally we’ll have certain

objects float above or below a
character or object. We take this
design element from Duo’s feet.
Floating objects give us flexibility
when turning that object in space
and helps make posing easier. Only
float an object if it lends itself to it,
don’t force it.

Yikes! Ouch!
 Eyes
There are five main eye styles that we
use with our characters. Different eye
styles can be explored, but ensure
they’re geometric in nature. No ovals!
Round Glasses Almond

Linear Dots
Only recommended if a character
always appear at a small scale

Use eyebrows sparingly. They add Feel free to make eyes touch.
a lot of visual noise. This helps keep reduce noise
in the face.

Small glasses cover up Never center the pupils Ensure that the eyes and
eye emotions vertically within the eye. whites are always fully pill
shaped.
 Hair
Hair should be simple but interesting.
Too many irregular shapes will make the
hair unneccessarily complex and
difficult to turn in space. Try to compose
hair with one or two large shapes, if
possible.

Ensure that you include some kind of hair above the ear/sideburn in your
hairstyle, otherwise they look like they received a bad haircut.

When adding facial hair, keep the nose the same color as the skin. This avoids
adding too many colors to the face which sometimes leads to noisy features
and muddy colors.
 Noses

Nose are made of up 1-2 rounded rectangles.

Sizes of the nose can be determined by the
artist. When coloring the nose, ensure that it’s
just as saturated as it is dark. When in profile,
the nose takes on the color of the base skin
tone.

In three-quarter view, the right side of the nose angles out while the left
side becomes a vertical line.

Uh-oh.. No good.

Be careful when aligning the eyes too closely with the top of the head. If
the eyes are fixed on an area that is curved you’ll find that as you being
turning the character in space the eyes will appear as though their
floating.

Too dark Too saturated

 Mouths

Mouths are expressive and the least

geometric shape in our style - irregularity
gives more emotion to the face. Most of the
mouths favor one side, this prevents too
much symmetery in the face.

The mouth can break out of the frame of the The teeth and tongue should
face to convey more extreme emotions always be centered inside of the
mouth

Ensure that the pupils are
always pushed inward a few
pixels, otherwise you get a
creepy Duo..
Duo
Duo is quirky, there is no better way to put it.
Feel free to explore lots of different poses
and emotions for him, he’s an expressive
owl and we want to communicate that in our
marketing and product.
Duo’s overall construction is pretty basic but
there are a few rules to follow that will help
you avoid certain pitfalls.
Duo’s ears are his most iconic feature but
theyr’re also the most challenging to turn in
space. Dragging the top middle anchor point
from side-to-will give the illusion of a head
turn. But don’t slide it too far, it creates a
unnatural pinch!
If you need him to, Duo can bend at the
waist, elbow and wrists. When bending at
the waist, use a rounded rectangle to place
over his body instead of editing his existing
shape.
Duo’s feet can seperate from his body when
he’s in motion, they can also bend, lengthen,
and even wiggle (like a hot dog). If Duo were
to walk in the sand, his footprints would be
perfect circles.
Duo doesn’t have fingers! It will be tempting to make
Duo’s wings a slightly darker
color when their posed over or
behind his body, but don’t do it!
When Duo is posed correctly,
an additional color isn’t
necessary.
Posing
Posing a character adds personality and
quirk to their design and ultimately tells
more of their story. As much as possible,
try not to use characters in a static,
expressionless state, this leaves them
feeling lifeless.

Not all poses will work for certain

characters, you must cater to their
overall design to find what works best. In
the example of the gorilla, both of these
poses are very gorilla-like but only one
of them works within our style. Since the
gorilla’s is composed of large blocks of
color, it’s best to keep them seperated in
a static pose.
 Arms and Hands
Hands and arms can be one of the most time
consuming parts for illustartors and
animators when posing and animating. Try to
keep the hand as abstract as you can by
keeping them as circles in most places. If you
need fingers, use the bare minimum.

Arms can lengthen a bit to

get the hand over the top
of the head

Too many fingers, this could Forearm is much too short

be accomplished with less

Never separate the hand

from the arm

Don’t add fingers to the All of our characters

hand where they’re not have four fingers
necessary, it’s just more to
keep track of