Stats
Actions
Tags
From harness-claude
Guides illustration system design — style consistency, spot vs. hero illustrations, abstract vs. representational choices, and illustration tokens for systematic production.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:design-illustration-styleThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Illustration system design — style consistency, spot vs. hero illustrations, illustration as brand voice, abstract vs. representational choices, and illustration tokens for systematic production
Illustration system design — style consistency, spot vs. hero illustrations, illustration as brand voice, abstract vs. representational choices, and illustration tokens for systematic production
Choose a position on the abstract-to-representational spectrum and commit. The spectrum runs from pure geometric abstraction (shapes that suggest concepts without depicting objects) to photorealistic illustration (rendered objects that look like photographs). Most product illustration sits in the middle. Define your position explicitly:
| Position | Description | Brands Using It | Emotional Signal |
|---|---|---|---|
| Geometric | Shapes, lines, gradients — no recognizable objects | Stripe, Vercel, Linear | Technical, abstract, premium |
| Flat graphic | Simplified objects, no perspective, bold fills | Shopify, Notion, Asana | Friendly, clear, systematic |
| Isometric | 3D perspective on a 30-degree grid, flat color | Dropbox (past), Slack | Technical, dimensional, organized |
| Hand-drawn | Visible brush/pen stroke, imperfect edges | Basecamp, MailChimp (past) | Human, casual, approachable |
| 3D rendered | Full 3D objects with lighting and materials | Apple (some), Pitch, Figma | Polished, premium, contemporary |
| Representational | Detailed scene illustration with characters | Airbnb, Headspace, Duolingo | Narrative, emotional, immersive |
Decision procedure: match the illustration style to the brand attribute map. Technical brands (developer tools, analytics) default to geometric or flat graphic. Consumer brands (travel, wellness, education) default to representational or hand-drawn. The critical rule: pick ONE position and enforce it across all illustrations. A product with geometric illustrations on the marketing page and hand-drawn illustrations in the product creates a brand identity split.
Stripe uses geometric gradients exclusively — flowing color forms that suggest technology and motion without depicting specific objects. The gradients use the brand palette (violet, blue, teal, pink) with consistent noise texture overlay at 3% opacity. No Stripe illustration contains a recognizable real-world object. This is a committed, extreme position on the abstract end.
Define illustration tokens for production consistency. Just as UI components use design tokens, illustrations need codified parameters that multiple artists can follow:
Document these tokens in a shared specification sheet. When onboarding a new illustrator, the tokens are the briefing — not "make it look like this other illustration."
Distinguish spot illustrations from hero illustrations by function and size. These are two different classes of illustration with different design constraints:
Spot illustrations — Small (40-120px rendered), inline with content, functional purpose. They appear in:
Spot illustration constraints: must read at small sizes, must work in single-color or two-color variants, must have transparent backgrounds, must be visually lightweight (they support text, not compete with it). GitHub's empty state illustrations are spot-sized, monochrome (single gray + one accent color), and depict a simple scene (a desert for "no repositories").
Hero illustrations — Large (300px+ or full-bleed), standalone visual anchors. They appear in:
Hero illustration constraints: must carry visual interest at large scale, can use full color palette, can include detail and complexity, must have a defined focal point. Shopify's marketing pages use hero illustrations that span the full viewport width with multiple overlapping elements, gradients, and brand characters.
The critical rule: spot and hero illustrations must share the same style tokens (stroke weight, corner radius, color palette, perspective) but differ in complexity and detail level. A spot illustration is not a scaled-down hero illustration — it is a purpose-built simple version.
Use illustration as brand voice amplifier, not decoration. Every illustration should reinforce the brand personality established in copy and visual design. Test this with the "mute test" — if you removed all text from a page, would the illustrations alone communicate the brand's personality?
Mailchimp's illustration system (pre-Intuit acquisition) featured Freddie the chimp in various scenarios — wearing a party hat for celebration, looking confused for error states, giving a high-five for success. Each illustration communicated an emotional state that matched the corresponding copy's tone. The illustrations were not decorative — they were a parallel communication channel that reinforced the verbal message.
Headspace's illustration system uses simple, rounded characters with closed eyes in meditative poses. The style — soft gradients, warm colors, minimal detail, organic shapes — directly communicates "calm, mindful, approachable." The illustrations are functional: they teach meditation postures, visualize breathing exercises, and represent emotional states. Remove the text, and the illustrations still communicate "meditation app."
Decision procedure: for each illustration placement, ask: "What does this illustration communicate that the text does not?" If the answer is "nothing — it just looks nice," the illustration is decorative and should either be removed or reworked to carry meaning.
Build an illustration component library with atomic elements. Illustration systems scale when they are composable — built from reusable elements that combine into scenes:
Duolingo's illustration system is highly composable: the Duo owl character, supporting animal characters, speech bubbles, hearts, and geometric backgrounds are independent components assembled into hundreds of scenes. New illustrations do not require new assets — they recombine existing components in new arrangements.
Define the illustration-to-UI boundary. Where does the illustration end and the UI begin? Unclear boundaries create visual confusion:
Notion handles theme adaptation by using illustrations with transparent backgrounds and a limited palette that works on both light and dark surfaces. The illustrations use the same foreground colors in both themes, relying on the background contrast to maintain readability.
Beyond decoration and brand expression, illustration can encode information more effectively than text in specific contexts:
The key constraint: informational illustrations must pass the 2-second comprehension test. Show the illustration to someone for 2 seconds and ask what it communicates. If they cannot answer, the illustration is too abstract or the metaphor is unclear.
When working with multiple illustrators (internal team, freelancers, agencies), style drift is the primary risk. Enforcement mechanisms:
Style Mixing. Using flat graphic illustrations on the marketing site, isometric illustrations in the product, and hand-drawn illustrations in the blog. The user experiences three different visual personalities, which fragments brand identity. Fix: pick one style position (step 1) and enforce it across all touchpoints. If the marketing site needs a different emotional register than the product, use complexity variation (hero vs. spot) rather than style variation.
Illustration as Afterthought. Adding illustrations to a finished page to "make it look less boring." These illustrations are disconnected from the content, inconsistent in style, and often sourced from generic illustration libraries (unDraw, Blush) without customization. The result: the illustrations feel like clip art. Fix: plan illustration placements during the wireframe stage, define what each illustration must communicate, and commission or customize to match the brand's illustration tokens.
Overcomplicated Spot Illustrations. A spot illustration for an empty state that contains 15 objects, 8 colors, a detailed background, and a full scene composition — but renders at 80px wide where none of this detail is visible. The illustration becomes a blob of color at its actual display size. Fix: spot illustrations at sub-120px sizes should use 2-3 colors maximum, 1-2 objects, no background, and simplified contours that remain legible at small scale. Test every spot illustration at its actual render size.
No Dark Mode Adaptation. Illustrations designed for light backgrounds with white fills, light shadows, and pastel colors. In dark mode, the white areas become blinding rectangles that break the visual flow. Fix: design illustrations with transparent backgrounds and colors that maintain contrast in both light and dark themes. Or produce explicit light/dark variants where fill colors are swapped to dark-mode equivalents.
Decorative Overload. Every page, every section, every card has an illustration — including contexts where illustration adds no communication value (a settings page, a data table, a form). Illustration fatigue sets in, and users learn to ignore the illustrations entirely. Fix: use illustration strategically in high-impact moments (onboarding, empty states, error states, marketing heroes) and leave functional screens unillustrated. The absence of illustration in functional contexts makes its presence in emotional contexts more impactful.
Stripe — Geometric Gradient as Brand Art. Stripe's illustrations are not illustrations in the traditional sense — they are abstract gradient compositions. Flowing color forms in violet, blue, teal, and pink suggest motion, technology, and premium quality without depicting anything concrete. The gradients use a consistent production technique: layered mesh gradients with 3% noise grain, rendered at high resolution and clipped to geometric containers. The style requires no character design, no object library, and no scene composition — it is purely about color, form, and movement. This makes it highly scalable (new illustrations are new gradient compositions, not new drawings) and impossible to produce "off-brand" (the token constraints are so tight that any gradient in the brand palette with the standard noise feels like Stripe). Key lesson: the most enforceable illustration style is the most constrained one.
Shopify Polaris — Systematic Flat Illustration. Shopify's Polaris design system includes a complete illustration library built from composable components: a character archetype (4-head proportion, circular head, no face), a set of merchant objects (boxes, storefronts, phones, charts), and environment templates (desk scene, outdoor scene, abstract background). Every illustration uses the same 1.5px stroke weight, 4px corner radius, and 6-color palette subset. New illustrations are assembled from existing components — a "shipping" illustration combines the character, a box, and a delivery truck from the object library. Illustrators follow a spec sheet that defines exact proportions, colors, and composition rules. Key lesson: composability is the scaling strategy for illustration systems.
GitHub — Mona and the Octocat Universe. GitHub's illustration system centers on Mona (the octocat mascot) and a cast of supporting characters. Mona appears in spot illustrations (empty states, success messages) and hero illustrations (marketing, GitHub Universe conference). The style uses clean outlines, flat fills with subtle gradients, and consistent character proportions. Mona's expressions communicate emotional states: confused (404 page), happy (successful deployment), determined (GitHub Actions). The mascot approach gives GitHub a memorable visual voice that transcends individual illustrations. Key lesson: a mascot character provides automatic brand recognition and emotional range.
Vercel — Abstract Minimalism. Vercel uses almost no representational illustration. Visual accents are geometric: circles, lines, gradients, and the triangle logo itself used as a decorative motif. Marketing pages use animated geometric patterns (dots that connect, lines that flow) rather than illustrated scenes. This extreme restraint matches Vercel's developer-focused, no-nonsense brand. The visual message: "we are too serious for whimsical illustrations." Key lesson: choosing not to illustrate is an illustration strategy — the absence of illustration communicates as strongly as its presence.
Headspace — Illustration as Product. Headspace's illustrations are not supporting content — they ARE the product experience. Meditation sessions are accompanied by animated illustrations that guide breathing (expanding/contracting circles), visualize focus (a moving light in darkness), and represent emotional states (a character surrounded by storm clouds that gradually clear). The style — soft gradients, rounded organic shapes, warm colors, minimal detail — was designed specifically to reduce cognitive load during meditation. Every illustration decision serves a therapeutic function. Key lesson: when illustration IS the experience (not just supporting it), the style must be designed for the use context, not just the brand.
Illustration delivery impacts page performance differently depending on format:
fetchpriority="high"). Spot illustrations below the fold use loading="lazy" to avoid blocking initial page render. For SVG illustrations loaded as <img> tags, lazy loading works natively. For inline SVGs, use Intersection Observer to inject the SVG markup when the container enters the viewport.As brand evolves, illustration style may shift. Managing the transition:
style: v2.0). When a new style is introduced, existing illustrations continue to render correctly while new illustrations follow the updated tokens.npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeDefines illustration style guides covering visual styles, color palettes, character designs, usage rules, and best practices for consistent product UI visuals.
Establishes a cohesive visual language for illustration projects, brands, or publications requiring consistent artwork across multiple pieces or contributors.
Generates complete visual design systems including style guides and AI assets through phased workflow: discovery, synthesis, documentation, asset generation, assembly. Activates on design system, style guide, or color palette mentions.