Documentation
Foundation
Illustrations

Illustrations

Illustrations play a crucial role in enhancing the user experience. This section outlines guidelines for creating and using illustrations within the Adapt design system, categorized by illustration type.

Dark and Light Mode Compatibility

Illustration Types

Icons

Icons are small, symbolic visuals used to represent actions, objects, or concepts.

  • Style: Icons should be simple, clear, and easily recognizable. Maintain a consistent stroke weight and style across all icons.
  • Color: Use theme-specific colors for SVG icons to ensure compatibility with light and dark modes.
  • Accessibility: Ensure sufficient contrast against the background.
  • Usage: Use icons sparingly and purposefully to avoid visual clutter.

Spot Illustrations

Spot illustrations are small, decorative visuals used to add personality and visual interest to the interface.

  • Style: Spot illustrations should complement the overall design aesthetic. They can be more detailed than icons but should still be relatively simple.
  • Color: Use a limited color palette that harmonizes with the surrounding UI elements and works well in both light and dark modes (see Dark and Light Mode Compatibility).
  • Placement: Use spot illustrations strategically to enhance specific content or sections without overwhelming the overall layout.

Large Illustrations with Detail/Characters

These are larger, more complex illustrations often used for onboarding screens, empty states, or to communicate more complex ideas. They may include characters or detailed scenes.

  • Style: Maintain a consistent style with other illustrations in the system, even with increased complexity.
  • Color: Careful color selection is crucial for dual-mode compatibility. Use mid-tones with low opacity, tinted grays, and avoid pure black or white except for accents (see Dark and Light Mode Compatibility).
  • Narrative and Purpose: Ensure the illustration effectively communicates the intended message or narrative.
  • Accessibility: Pay close attention to contrast and visual hierarchy to ensure the illustration is accessible to all users. Avoid excessive detail that may be overwhelming.
  • Characters (if used): Develop a consistent style for characters, including their appearance, expressions, and poses. Characters should be relatable and representative of the target audience.

Additional Considerations

  • Style and Consistency: Maintain a consistent illustration style throughout the application. Consider using a defined set of character styles, color palettes, and visual metaphors to create a cohesive visual language.

  • Accessibility: Ensure sufficient contrast between foreground and background elements within the illustration. Avoid overly complex or visually cluttered illustrations that may be difficult for users with cognitive impairments to understand.

  • Purpose and Context: Illustrations should serve a clear purpose. Consider how the illustration supports the surrounding content and enhances the user’s understanding.

  • Localization: If your application supports multiple languages, ensure illustrations are culturally appropriate and don’t rely on text embedded within the image.