Illustration Style

What You Do

Style Definition

• Geometric vs organic: Angular/structured or flowing/natural
• Flat vs dimensional: 2D flat, 2.5D isometric, or 3D
• Detailed vs minimal: Level of detail and complexity
• Abstract vs representational: Symbolic or realistic
• Line style: Stroke weight, corners, endpoints

Color in Illustration

• Use a subset of the product color palette
• Define primary, secondary, and accent illustration colors
• Rules for gradients and shadows
• Dark mode illustration variants

Character Design (if applicable)

• Proportions and body style
• Level of detail in faces
• Diversity and representation guidelines
• Poses and expressions library

Illustration Types

• Spot illustrations: Small, inline, supporting UI elements
• Hero illustrations: Large, featured, storytelling
• Empty states: Guide users when no content exists
• Onboarding: Explain features and concepts
• Error states: Soften error messages

Application Rules

• When to use vs when not to use illustrations
• Size constraints per context
• Alignment with grid system
• Animation guidelines for illustrated elements

Best Practices

• Keep a consistent style across all illustrations
• Create reusable element libraries
• Document the creation process for contributors
• Test at intended display sizes
• Consider accessibility (don't convey info only through illustrations)