Illustration is an integral part of the Dropbox design ecosystem. This section explains its role and how it should be applied.
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.
Illustrations use colors that best support the message and the content. Semiotics are used to reinforce the tonal quality.
Security and trust in blue
Joyful moment in yellow
Warning message in orange
For hero illustration, use only coconut background which become graphite in dark mode.
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.
Line work on a skin tone remains black in Dark mode.
Line work on human tones remains black in Dark mode.
Don’t use a Light mode illustration in Dark mode, because the line work will not be entirely visible.
Don’t use a background color in the product.
Don’t misuse or misplace an illustration concept.