Illustrations¶

Usage¶

Illustrations support communication, add personality, and engage users without overwhelming or detracting from core content.

Core Principles¶

Consistency with Brand style¶

All illustrations must adhere to the Brandville Guidelines for color, line weight, and styling to ensure a consistent look and feel. Use the approved color palette, primarily focusing on brand colors, and avoid heavy gradients or patterns unless specified by the style guide.

Simplicity and focus¶

Illustrations should be simple, clean, and purposeful. Avoid unnecessary details that may distract or clutter the visual experience. Focus on clear forms and intentional use of space to guide users' eyes to key information.

Accessibility and inclusivity¶

All illustrations should be designed with accessibility in mind. Ensure sufficient contrast for readability, and represent diverse and inclusive characters and scenarios where applicable.

When to use¶

• In onboarding and welcome screens.
• In tutorials and help screens, to explain how to use a feature or functionality.
• In marketing materials.

Best practices for illustrations¶

• Use illustrations sparingly; consider if an icon would be more appropriate.
• Ensure the illustration adapts well across different screen sizes.
• Verify the illustration works in both light and dark modes with proper contrast.

Resources¶

In addition to the brand guidelines, we offer extra resources to support design consistency. Refer to the Illustration figma file for examples and assets for Adobe Illustrator and Figma.

Design¶

Color¶

Illustrations use a subset of the color palette, with special cases for skin tones. Make sure to download and install the correct palettes as needed from Brandville.

• Use the RGB palette for digital materials.
• Use the CMYK palette for print materials.

Follow this tutorial to install the palettes in Adobe Illustrator or use the appropriate library in Figma, depending on the software being used.

Theming¶

Illustrations must integrate seamlessly with both light and dark themes.

There are two approaches: Design a single illustration with a color palette that works across both themes, or create separate versions optimized for each theme.

• Single-theme-compatible illustrations: Ensure colors meet WCAG contrast standards in both modes.
• Theme-specific illustrations: Provide separate versions for both light and dark mode, and use CSS classes to dynamically switch between them based on the active theme.

Accessibility¶

Text and important visual elements in illustrations should have an AA contrast ratio for normal text.

If illustrations convey essential information (e.g., a diagram or icon), they must meet contrast requirements to ensure the information is perceivable.

Non-essential decorative elements do not need to meet contrast guidelines, but should not interfere with readability.

Grid¶

Illustrations follow the same 8x8 px grid as any other UI element to maintain visual harmony and alignment across the interface.

Size the illustration based on the surrounding layout and content hierarchy, ensuring it complements the design. When scaling, maintain aspect ratios to preserve proportions, and ensure the illustration remains visually clear and not too small.