Illustration

Intro

The role of illustration 

Illustration is wonderful at communicating complex, hard-to-explain, or dry topics—providing humanity and soul to abstract technological concepts. That’s why we’re not shy about using it, especially when we’re educating the user in an onboarding flow or a product 101. 

Dropbox illustrations are composed of three layers: line work, cutout shape, and human tones.

Stylistic principles

1. Figurative

Figures should have realistic proportions, clothing, and surroundings. They should display a wide and nuanced variety of emotions, and there should be enough detail in the face and body to clearly communicate these emotions. Consider the body language and mood of every subject.

Do use photographic references to capture specific facial features.

Don’t simplify features using cartoon-like shortcuts.

Don’t exaggerate or stylize facial features.

2. Bold, controlled color

Use only one accent color per illustration, plus skin and hair tones if a person is shown (fur tones for animals). The color should play a conceptually significant role in the intended message of the illustration, and, ideally, it should be fairly prominent.

The story told by an illustration depends on the object that’s depicted with a cutout shape.

Emphasizes work and support.

Emphasizes individual and user.

Emphasizes home and warmth.

Content principles

1. Narrative driven

Illustration is not superfluous ornamentation. It should always tell a story related to Dropbox and our products and services. If we don’t have a story to tell, we don’t use illustration.  Keep concepts simple and grounded in real moments so that illustrations are relatable and digestible.

2. Diverse

The world is diverse, and we strive to represent it honestly. Diversity in age, race, ability, religion, sexual orientation, and gender is a core pillar of our illustrations. We portray people with realistic features, using accurate proportions and perspectives.  To represent people with respect and care and without bias, illustrators can refer to photos of coworkers, friends, and family for every person they draw.

3. Based in reality

Illustrations should show people doing believable things in realistic places in the present day. Using reference images is recommended to bring specificity to the places and objects depicted. 

4. See say

Illustration concepts should relate clearly to the accompanying text. 

Don’t use ambiguous illustrations that do not communicate intended message at a glance.

5. Full of personality

Avoid clichés and reach for the unexpected and imaginative. Combining our more realistic style with unique scenes and concepts allows us to bring humor and personality to customers without sacrificing meaning and utility. 

Avoid clichéd imagery.

Don’t rely heavily on iconography or literal interpretation.

Anatomy of a Dropbox Illustration 

The current style is a vectorized line treatment saved as an SVG paired with a simpler shape that is activated by the line. Illustrations are composed of three layers:

01 — Line work

02 — Cutout shape

03 — Human tones

Line work

Less is more. Strive for enough detail so that the image and its content can be easily understood while still being gestural and suggestive. Beauty is often in the imperfection. We prefer a certain sense of artistic naiveté. 

Don’t use a pen tool to illustrate.

Don’t use mono-weight brushes to illustrate.

Don't outline color-fill areas such as the cutout shape or skin tone.

Lines are too thick

Lines are too thin

Lines are just right

Cut shape

While an illustration might be dominated by a human character or an inanimate object, the cutout shape is the main visual focus. It should not be used decoratively; rather, it should help drive the mood or message of the illustration. The shape should look as if it had been cut loosely with scissors from a piece of paper. The simpler, the better!

The cutout shape plays a vital role in the storytelling and composition of the final illustration.

Use only one accent color.

Use Coconut when the cutout shape appears on a colored background.

Don’t use a layer effect such as Multiply or adjust the transparency when overlapping. Cutout shapes should be opaque.

Don’t create a complex silhouette for the cutout shape.

Don’t cut around the fill shape to avoid overlapping with another cutout shape.

Don’t use multiple colors in a single illustration.

Don’t add textures to colors.

Don’t use an accent color when a cutout shape appears on a colored background.

Human tones 

Dropbox embraces the full spectrum of humanity. As part of this mission, we have developed an expansive palette for the skin and hair tones of the people who are depicted in illustrations.  Make sure there’s enough contrast between hair and skin tone, as well as between human tones and the background.

Skin Tones

Hair Tones

Don’t pair a skin tone with a similar hair tone.

Don’t use a hair tone that blends into the background color.

Don’t use a skin tone that blends into the background color.

Motion

Illustrations are animated in After Effects and exported as LottieFiles. 

Types of illustration

Spot

Simpler illustration that appears without a background.

Purpose

To serve as essential elements within Dropbox interfaces.

Characteristics

Simpler illustration that appears without a background 

Aspect ratio

1:1

Size

Standard: 500 x 500px

Small: 200 x 200px

Minimum Sizes

For anything smaller than 200 x 200px, please use spot icons instead.

Example uses

• Product UI (ex: empty states, error states)

• Signed-out web

Background

Spot illustrations should be used on our Standard background color or Core Secondary/Coconut background colors. 

Hero

Appears full-bleed on a plane, with environmental details that set the narrative. 

Purpose

To provide contextual information.

Characteristics

Appears in full-bleed on a plane, with environmental details that set the narrative. 1:1 and 5:6 crop centrally into a 16:9.

Aspect ratio

1:1

5:6

16:9

Size

16:9: 1696 x 954px 1:1: 954 x 954px 5:6: 795 x 954px

Minimum Sizes 16:9: 600 x 338px 1:1: 338 x 338px 5:6: 230 x 338px

Example uses

• Product UI: (ex: modals, carousel, mobile sign-in)

• Signed-out web

• Presentations

• Sales and marketing assets

Background

Hero illustrations should be used on our Core Secondary/Coconut background colors.

Tonal categories

To ensure that an illustration addresses the customer’s emotional state effectively, we have created two overarching tonal categories: motivational and supportive. See The Dropbox Voice for more details about voice and tone.

Motivational

Do

Don't

Supportive

Do

Don't