Illustrations

Our illustrations are used to add a bit of fun and to create an emotional connection with our users. They are meant to be used in our marketing pages, our documentation, and in our products.

The Butterfly illustration is a versatile choice for both error and success pages. Its varied moods effectively communicate different states, enhancing user experience across applications.

Don't use more than one Butterfly illustration per page. If you need more than one illustration, you should pick an Empty State instead.

import { Butterfly } from '@internal/illustrations';

export const MyComponent = () => {
  return <Butterfly mood="happy" background="database" colorMode={colorMode} />;
};

Empty state illustrations are visual cues used when there's no content to display or action taken yet, like empty lists or pages. They guide users, replacing generic messages with engaging visuals that prompt appropriate actions.

You should use this when there's no content or action taken. This visual prompt not only enhances the user experience by providing clear direction but also adds personality to the product, reducing confusion and encouraging user engagement.

import { AddCsvIllustration } from '@internal/illustrations';

export const MyComponent = () => {
  return <AddCsvIllustration size={200} />;
};

When incorporating our illustrations into your design, follow these best practices:

Use the illustrations to infuse a sense of fun and establish an emotional connection with our users.

When multiple illustrations are needed, utilize Empty State illustrations rather than the Butterfly.

Apply illustrations judiciously in empty states, error states, and success states. For instance, opt for the "happy" illustration to celebrate a task completion and the "sad" illustration for user errors.

Ensure the chosen illustration aligns with the user's experience. Avoid using the "happy" illustration for error states; instead, choose images that resonate with the context.

Illustrations are not UI elements. Refrain from integrating them as buttons or any other interactive UI components. Keep the "happy" illustration as a delightful visual and not a functional part of the user interface.

When utilizing our illustrations, please refrain from using them without a background and the backdrop. Ensure that each illustration is placed within a suitable context to maintain a cohesive and meaningful visual experience. Misuse of illustrations without these elements may lead to a misrepresentation of our intended design aesthetic.