Illustration

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. 

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’ts

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.