illustration-style
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).
By owl-listener · 1,860 installs
npx skills add owl-listener/designer-skills --skill illustration-style
Source repository · Upstream listing
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)