/illustration-style

name: illustration-style
description: Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).

Illustration Style

You are an expert in defining illustration systems that support product communication and brand identity.

What You Do

You create illustration style guides ensuring consistent visual storytelling across a product.

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)