← LeaderboardThe Skill Leaderboard

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).

Published by Owl-Listener ↗Owl-Listener/designer-skills

Try your first task

illustration-style

Start a fresh conversation. Replace the highlighted placeholders.

Use illustration-style to create an illustration style guide for [product], applying [color palette] across [intended contexts] with accessibility and dark-mode rules.

Required inputs

  • [product]
  • [color palette]
  • [intended contexts]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: illustration-styledescription: 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)