Illustration Style Guide

Octagon's illustration style is designed to be consistent, engaging, and aligned with the overall design system.

Key Characteristics

1. Flat design with subtle shadows
2. Consistent line weight
3. Limited color palette based on Octagon's color system
4. Simple, geometric shapes
5. Scalable vector graphics (SVG) format

Usage Guidelines

• Maintain consistent style across all illustrations
• Use illustrations to enhance, not replace, textual content
• Ensure illustrations are accessible and understandable across cultures
• Optimize SVGs for performance

By following this style guide, you'll create illustrations that are both visually appealing and consistent with the Octagon Design System.

Proper use of illustrations can significantly enhance user experience and visual appeal of interfaces.

Best Practices

1. Use illustrations to support and clarify content
2. Place illustrations strategically to guide user attention
3. Ensure illustrations are responsive and scale appropriately
4. Use alt text for illustrations to improve accessibility
5. Balance illustration use with other design elements

Common Use Cases

• Empty states
• Onboarding screens
• Error pages
• Feature explanations
• Brand reinforcement

By following these guidelines, you'll effectively integrate illustrations into your interfaces, enhancing both aesthetics and user understanding.