Illustration systems: when to draw, when to buy, when to skip

An illustration system is a fixed set of drawings, one defined style, and the rules that decide which screens are allowed to use them. Most products do not have one. They have illustrations: a few bought during a redesign, a few drawn by whoever had a free afternoon, a few inherited from a landing page nobody owns anymore. The screen-to-screen result reads as decoration applied at different times by different hands, because that is what it is.

The decision is a budget and maintenance question before it is an artistic one. Custom product illustrations, the kind used on headers and landing pages, run roughly $300 to $1,200 each depending on complexity. A twelve-piece set is a five-figure commitment before anyone mentions revisions or usage rights. That is enough money to deserve a rule instead of a preference.

What an illustration system actually contains

Four parts. Products that feel inconsistent are usually missing two of them.

• A style definition. Line weight, fill behaviour, palette limits, perspective, whether human figures appear and how they are drawn. Written down, not "look at these three files".
• An inventory with placements. Every drawing tied to the screen or state where it is allowed to appear.
• Production rules. Export format, viewBox behaviour, colour tokens instead of baked hex, the optimisation step, theme handling.
• An owner and a budget line. Who commissions the next drawing, and out of whose money.

Without the fourth part the first three decay in about two quarters. Someone needs a picture on a Friday, the freelancer is booked, a stock file goes in, and the style definition becomes a document describing half the product.

When to draw

Commission custom work when the drawing has to carry a concept the product invented. A pipeline, a canvas, a permission model, a data shape that exists only in your app: no library has it, and forcing a generic picture onto it teaches the user nothing.

Draw for surfaces that repeat forever. Onboarding, the empty states of core objects, the error path, the marketing hero. These get seen thousands of times and are cheap per impression. Draw when recognisability is the point: illustration is one of the few layers that a competitor cannot copy in an afternoon, which is why it belongs to art direction rather than to decoration.

Settle the commercial terms in the same conversation as the style. Illustrators commonly price the drawing and the licence separately, and commercial usage starts well above the editorial rate before exclusivity, term and territory push it further. Agree four things in writing: exclusivity, duration, geography, and whether you receive the editable source file.

When to buy

Library sets work when the concept is generic. Search, payments, security, a team around a table: these have been drawn ten thousand times and drawing them again buys nothing. Recolour a set to your palette, restrict it to low-traffic surfaces such as 404 pages, documentation and secondary marketing, and move the budget to the screens that matter.

Read the licence before the style. The three most used free libraries differ in ways that matter on a product UI:

• unDraw allows commercial use with no attribution, and forbids redistributing the illustrations as a pack or using them to train machine learning models (licence).
• Storyset is free only with a visible credit and a link back on every use; a Freepik or Flaticon premium subscription removes that requirement (terms).
• Blush permits commercial use including work delivered to a client, and forbids reselling, redistributing, or compiling the art into a competing library (licence).

A set that demands a visible credit link is not free on a product interface. It is a permanent obligation on every screen that carries it, and it will outlive the person who chose it.

When to skip

Dense data screens. An illustration next to a dashboard number competes with the number and usually wins, which is the opposite of what the screen exists to do.

Empty states that already work. A clear sentence and a primary button often beat a picture of a person holding a magnifying glass; the drawing is worth adding only when the state is genuinely ambiguous. We covered the four states each screen owes the user in a separate piece.

Any surface where the drawing repeats the heading. If the H1 says "No invoices yet" and the picture shows an empty folder, the picture is bytes and attention spent on a second copy of the same message.

Screens under active redesign. Illustration is the last layer. Drawing against a layout that will move is how a set turns into rework.

Do this

Cap the set before commissioning. Decide the number first: twelve drawings that stay maintained beat forty that drift. The cap forces the placement argument to happen early, when it is cheap.

Push colour through tokens. Reference CSS custom properties inside the SVG instead of baking hex values. One file then serves light and dark themes, and a palette change does not become a re-export of the whole set.

Optimise on the way in, automatically. Design tool exports carry editor metadata, comments, empty groups and absurd decimal precision. SVGO strips all of it without changing a pixel, and reported savings commonly land between 30% and 80%. Run it in CI so nobody has to remember.

Mark decorative drawings as decorative. An illustration that repeats what the text says takes an empty alt attribute or aria-hidden, so screen readers skip it. If it carries information the surrounding text does not, it is not decorative and owes a real description under WCAG 1.1.1.

Keep text out of the artwork. Words baked into an SVG do not translate, ignore the user's font size setting, and turn every new locale into a new export. Put the label in the DOM, over the drawing.

Buy the source file. Commission the editable original alongside the licence. Without it, the second version of any drawing costs a new commission.

Write the placement rule next to the drawing. "Projects empty state only" in the file metadata stops the same character appearing on six unrelated screens eighteen months later.

Do not do this

Do not run two styles at once. A flat geometric set on one screen and a hand-drawn set on the next reads as a migration someone abandoned. If a style change is worth making, it is worth finishing.

Do not use illustration to patch a layout. A picture dropped into an awkward gap makes the gap official. Fix the spacing, then decide whether the drawing earns its place.

Do not let marketing and product commission separately. Two budgets, two vendors, two styles, one product. The illustration set is one asset with one owner or it is not a set.

Do not ship the raw export. A single unoptimised hero illustration of several hundred kilobytes will show up in your Largest Contentful Paint measurement, and it is the easiest weight in the whole page to remove.

Do not default to human figures. Characters carry age, body type, skin tone and gender into every screen they appear on. That is a brand decision with real consequences for who feels addressed, and it deserves a deliberate answer rather than the default of the library you downloaded.

What generated illustration changes in 2026

Two facts are worth having straight before generating a set.

The first is ownership. The US Copyright Office concluded on 29 January 2025 that prompts alone do not give a user enough control over the output to count as authorship, and that material generated without sufficient human contribution is not copyrightable; human-authored elements inside a mixed work remain protected (Part 2 report). A purely generated set is art you can use and probably cannot stop anyone else from using.

The second is marking. Under Article 50 of the EU AI Act, providers of AI systems that produce synthetic image content must mark outputs in a machine-readable format and make them detectable as AI-generated. The obligation applies from 2 August 2026, with penalties reaching EUR 15 million or 3% of worldwide annual turnover, whichever is higher.

Neither fact bans generated illustration. They set where it sits well: internal decks, exploration, throwaway campaign work. For the visual signature a product intends to own for five years, the ground is thinner.

The decision in one pass

• Concept invented by the product, surface repeated daily, recognisability matters: draw it.
• Concept generic, surface low traffic, budget tight: buy it, recolour it, read the licence first.
• Screen dense with data, or the text already does the work: skip it and keep the space.

The rule holds for photography too, and we wrote the equivalent shot list in website photography for software. Same principle, different medium: decide what the image has to say before deciding who makes it.

Sources

• ManyPixels, Graphic Design Prices in 2026
• Freelance Illustrator Rates 2026: editorial, book and commercial pricing
• unDraw licence
• Storyset terms of use
• Blush licence
• US Copyright Office, Copyright and Artificial Intelligence, Part 2: Copyrightability (January 2025)
• EU AI Act, Article 50: transparency obligations
• Sidley, EU AI Act transparency obligations: preparing for 2 August 2026
• SVGO
• SitePoint, Three ways of decreasing SVG file size with SVGO
• W3C, Understanding WCAG 1.1.1 Non-text Content