Visual Imagery

Illustration

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


Use

Most illustrations used in products are spot illustrations. Hero illustrations are used occasionally in elements such as modals and carousels. Every illustration in products should be compatible with Light and Dark mode. In-product illustrations can be either motivational or supportive, depending on their context. See Tonal categories for guidance.


Color application

Illustrations use colors that best support the message and the content. Semiotics are used to reinforce the tonal quality. 

Illustration Applications Use Color 1

Security and trust in blue

Illustration Applications Use Color 2

Joyful moment in yellow

Illustration Applications Use Color 3

Warning message in orange

For hero illustration, use only coconut background which become graphite in dark mode. 

Illustration Applications Use Color 4
Illustration Applications Use Color 5

Light mode and Dark mode

Every illustration in our products are compatible with Light mode and Dark mode. The line work is white when it’s in Dark mode. Use only one accent color per illustration. The cutout shape should always remain the same color, whether in Light mode or Dark mode.

Illustration Applications Use DarkLight 1

Line work on a skin tone remains black in Dark mode. 

Illustration Applications Use DarkLight 2

Line work on human tones remains black in Dark mode.

Illustration Applications Use DarkLight 3

Don’ts

Illustration Applications Use Dont 1

Don’t use a Light mode illustration in Dark mode, because the line work will not be entirely visible.

Illustration Applications Use Dont 2

Don’t use a background color in the product.

Illustration Applications Use Dont 3

Don’t misuse or misplace an illustration concept.