Illustration is an integral part of the Dropbox design ecosystem. This section explains its role and how it should be applied.
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.
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.
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.
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
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
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.
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.
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.
Illustrations are animated in After Effects and exported as LottieFiles.
Types of illustration
Simpler illustration that appears without a background.
To serve as essential elements within Dropbox interfaces.
Simpler illustration that appears without a background
Standard: 500 x 500px
Small: 200 x 200px
For anything smaller than 200 x 200px, please use spot icons instead.
Product UI (ex: empty states, error states)
Spot illustrations should be used on our Standard background color or Core Secondary/Coconut background colors.
Appears full-bleed on a plane, with environmental details that set the narrative.
To provide contextual information.
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.
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
Product UI: (ex: modals, carousel, mobile sign-in)
Sales and marketing assets
Hero illustrations should be used on our Core Secondary/Coconut background colors.
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.
Playful, witty, optimistic, relatable
See-Buy-Use Onboarding, empty state, upsell/cross-sell, OOH
Playful, witty, optimistic, relatable
Softens the blow of a potential frustration
Buy-Use Error state (example: Can’t find what you’re looking for), help center