Visual Imagery

Illustration

Illustration is an integral part of the Dropbox design ecosystem. This section explains its role and how it should be applied.


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.

Illustration Role

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.

Illustration Stylistic Figurative Do

Do use photographic references to capture specific facial features.

Illustration Stylistic Figurative Dont 1

Don’t simplify features using cartoon-like shortcuts.

Illustration Stylistic Figurative Dont 2

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.

Illustration Stylistic Bold

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

Illustration Stylistic Bold Do 1

Emphasizes work and support.

Illustration Stylistic Bold Do 2

Emphasizes individual and user.

Illustration Stylistic Bold Do 3

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.

Illustration Content Narrative

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.

Illustration Content Diverse

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. 

Illustration Content Reality 1
Illustration Content Reality 2
Illustration Content Reality 3

4. See say

Illustration concepts should relate clearly to the accompanying text. 

Illustration Content SeeSay Do
Illustration Content SeeSay Dont 1

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

Illustration Content SeeSay Dont 2

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. 

Illustration Content Personality Do
Illustration Content Personality Dont 1

Avoid clichéd imagery.

Illustration Content Personality Dont 2

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:

Illustration Anatomy 1

01 — Line work

Illustration Anatomy 2

02 — Cutout shape

qSbhyKQ

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é. 

Illustration Anatomy Line 1
Illustration Anatomy Line Dont 1

Don’t use a pen tool to illustrate.

Illustration Anatomy Line Dont 2

Don’t use mono-weight brushes to illustrate.

Illustration Anatomy Line Dont 3

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

Illustration Anatomy Line Dont 4

Lines are too thick

Illustration Anatomy Line Dont 5

Lines are too thin

Illustration Anatomy Line Do

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!

Illustration Anatomy CutShape 1

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

Illustration Anatomy 3

Use only one accent color.

Illustration Anatomy CutShape 3

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

Illustration Anatomy CutShape 4
Illustration Anatomy CutShape 5
Illustration Anatomy CutShape Dont 1

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

Illustration Anatomy CutShape Dont 2

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

Illustration Anatomy CutShape Dont 3

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

Illustration Anatomy CutShape Dont 4

Don’t use multiple colors in a single illustration.

Illustration Anatomy CutShape Dont 5

Don’t add textures to colors.

Illustration Anatomy CutShape Dont 6

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.

Illustration Anatomy Human Skin

Skin Tones

Illustration Anatomy Human Hair

Hair Tones

Illustration Anatomy Human Do 1
Illustration Anatomy Human Do 2
Illustration Anatomy Human Do 3
Illustration Anatomy Human Dont 1

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

Illustration Anatomy Human Dont 2

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

Illustration Anatomy Human Dont 3

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


Motion

Illustrations are animated in After Effects and exported as LottieFiles. 

Illustration Anatomy Motion 1

Types of illustration

Spot

Illustration Anatomy Types 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

Illustration Anatomy Types 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

Illustration Anatomy Tone Motivational Do

Do

Illustration Anatomy Tone Motivational Dont

Don't

Emotion

Playful, witty, optimistic, relatable


Humanity

See-Buy-Use Onboarding, empty state, upsell/cross-sell, OOH

Supportive

Illustration Anatomy Tone Supportive Do

Do

Illustration Anatomy Tone Supportive Dont

Don't

Emotion

Playful, witty, optimistic, relatable


Purpose

Softens the blow of a potential frustration 

Humanity

Buy-Use Error state (example: Can’t find what you’re looking for), help center