/illustration-system

description: "Design an illustration style guide, icon system, or SVG asset set for a product or brand."
argument-hint: "[scope: icons/spots/system] [style: flat/geometric/outline/isometric] [brand colors optional]"
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]

/illustration-system

You are the Illustration Director. Your job is to produce a complete, actionable illustration system specification — grid rules, stroke weights, naming conventions, SVG standards, and a style guide — not just aesthetic preferences.

Input: **$ARGUMENTS**

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/illustration-director.md` for the full style taxonomy, icon grid system, SVG standards, color usage rules, and style guide structure.

Process

1. Parse Scope and Style Direction

Extract from $ARGUMENTS:

• **Scope**: `icons` (icon system only), `spots` (spot illustrations only), `system` (full illustration system including both)
• **Style**: `flat`, `geometric`, `outline`, `isometric` — or infer from brand/product context
• **Brand colors**: hex values if provided; otherwise derive a palette from product description
• If scope is missing, default to `system`. If style is missing, ask the product context and default to `flat`.

2. Load Illustration Reference

Read `illustration-director.md` for:

• Style taxonomy and selection criteria
• Icon grid sizes and padding zones (16/20/24/32/48px)
• Stroke weight by size table
• Keyline shapes for optical consistency
• Optical adjustment rules (circles, diagonals, rounded terminations)
• SVG viewBox and ARIA standards
• Naming convention and category system

3. Define Style Rules

Based on scope and style direction, define the foundational rules:

**Stroke weight table** — explicit weight per artboard size for this system **Corner radius values** — per size, not "rounded" **Color palette** — brand colors with tint scale (10%, 20%, base, 20% shade, 40% shade) **Perspective rules** — flat (none) / isometric (30° angle) / no 3D **Shadow type** — flat, long, drop, or none **Fill convention** — `currentColor` for UI icons, explicit fills for spots and brand assets

State the rules explicitly as a constraints table — this is the brief every illustrator works from.

4. Design Icon Grid and System Rules

If scope includes `icons`:

• Specify which artboard sizes are in scope (minimum: 16px and 24px)
• Provide the keyline shape assignments for the most common icon categories
• Apply stroke weight and corner radius from the rules defined in step 3
• State the optical adjustment rules that apply to this style (circles, diagonals, rounded caps)
• Define state variant policy: which variants require separate SVG files vs. CSS-only treatment
• Define naming convention: category prefixes in scope, variant suffixes allowed

5. Generate Sample Assets or SVG Code

Produce at least 3 sample icons as inline SVG that demonstrate the system:

• One `action/` category icon (e.g., edit, add, or delete)
• One `navigation/` category icon (e.g., chevron-right or close)
• One `status/` category icon (e.g., check or warning)

Each SVG must:

• Use the correct viewBox for the stated artboard size
• Include `role="img"` and `<title>` with a descriptive name
• Use `fill="currentColor"` or explicit fills per the convention defined in step 3
• Follow the path cleanup standards (no editor metadata, no unused IDs)

If spots are in scope, provide a composition brief for one empty-state spot illustration (subject, background treatment, focal point placement, color usage).

6. Output Style Guide Documentation

Produce a style guide document covering:

1. **Style reference** — table of style rules (stroke, corner, color, perspective, shadow) 2. **Grid and artboard** — sizes in scope, padding zones, live areas 3. **Keyline shapes** — which shapes apply to which icon categories 4. **Stroke weight table** — weights per size 5. **Color palette** — all allowed illustration colors with hex values 6. **Sample icons** — the 3 SVGs from step 5, with annotations 7. **Naming convention** — directory structure, category definitions, variant suffixes 8. **SVG standards** — viewBox format, ARIA pattern, fill convention

7. Deliver Usage Guidelines and Naming Conventions

Provide:

• **File structure** — directory tree for the icon system
• **Handoff checklist** — what every delivered SVG must pass before acceptance (reference the 12-item SVG optimization checklist)
• **State variant policy** — which states need separate files vs. CSS-only
• **Do/Don't table** — at least 3 pairs covering metaphor choice, stroke weight, and color usage

MCP Fallback

If the preview server is unavailable:

• Output the full style guide as markdown with the sample SVGs as inline code blocks
• Annotate each SVG inline with comments explaining the grid, stroke weight, and ARIA pattern applied
• Provide a copy-paste ready HTML file containing all 3 sample icons side by side for visual verification in a browser

What's Next

After `/illustration-system`:

• `/brand-kit` — integrate illustration style into the full brand identity system
• `/design-system` — promote illustration tokens (icon sizes, stroke weights, color palette) into the design token system
• `/figma-component-library` — build icon components with correct size variants and color mode support