Get Illustrations Flagship Chapter 1 | SaaS illustrations

Get Illustrations Flagship Chapter 1 is a set of 75 SaaS illustrations drawn for the screens a product actually ships: onboarding steps, empty states, error pages, and the marketing site that sits in front of them. Every scene uses the same loose hand-drawn line and the same soft green gradient fill, so a busy six-panel error sheet and a single quiet spot drawing read as the same family. This is the opening chapter of the Flagship series, and it leans business. You get teams shipping work, people checking off a plan together, a robot that has clearly stopped working, and an old computer showing a skull on a floppy disk.

The style, drawn not templated

Look closely at the line and you will see two weights doing separate jobs. A dark charcoal outline holds the outside edge of every shape, and a lighter green line handles the interior detail: the folds in a shirt, the coils of a broken spring, the slats on a computer vent. The line is hand-wobbled on purpose. Edges are not perfectly straight, corners are slightly rounded, and each stroke thins and thickens the way an ink pen does when you actually draw with one. Nothing here looks like it was snapped to a grid, and that is the difference between this and the flat vector sets it will sit next to in a search result.

The colour is deliberately narrow. One lime green accent carries the whole pack, laid down as a soft gradient that fades from a brighter chartreuse to a paler wash. In several pieces the fill sits a hair off from the outline, the way a risograph print misregisters, and a lot of the charm comes from exactly that.

There is no second accent fighting for attention, no halftone, no heavy grain. Against the warm cream background the green reads as friendly rather than loud, which means the whole set can drop into a page without pulling every eye straight to itself.

What is inside the pack

Chapter 1 is 75 illustrations, and the number in this description is the real file count, not a rounded marketing figure. The set is organised around the situations a SaaS product keeps running into, so most scenes map straight onto a screen you already have to design rather than sitting in a folder looking nice.

• Error and empty states, including a full run of 404 scenes: a figure fishing a 404 sign out of a hole, a dead computer showing a skull, a collapsed robot, legs disappearing down a manhole, and a cat floating off on a balloon.

• Team and business moments: people reviewing a checklist, celebrating a shipped result, and standing over a plan together.

• Ecommerce and transaction scenes you can use across carts, checkout, and order confirmation.

• General product and workflow spots that reuse cleanly across onboarding, dashboards, and settings.

• Single-object drawings you can pull out of a larger scene and use as a small inline graphic on their own.

Roughly, the weight of the pack sits on the error and empty-state scenes, because that is where a SaaS product hurts most and where good art is hardest to find. The team and business moments come next, then the ecommerce and workflow spots, with a run of single-object drawings underneath that you can scatter through an interface as small accents. You are not getting 75 variations on one idea. You are getting a working spread across the moments a product actually has to illustrate, which is what makes a single pack enough to dress a whole app rather than only its home page.

Who it is for

This is a set for product teams first. If you are designing a SaaS app and you keep hitting the same blank screens, the empty states and error pages here are built for exactly those slots. A 404 scene with a joke in it turns a dead end into something a person smiles at instead of bouncing from, and an empty-state drawing sitting over a "no results yet" line makes a new account feel less hollow on the first day. These are the screens teams tend to leave until last, and this pack is aimed right at them.

It suits marketing and growth work too. A founder building a pitch deck can drop one of the team scenes onto a slide and get a hand-drawn look that reads as human rather than as stock photography. A landing page for a developer tool can use the broken-robot and dead-computer scenes on its status page or error documentation and stay on brand with the rest of its illustration set. The single green accent makes it easy to place the art next to a real product screenshot without the two colours clashing on the page.

How to use it

In Figma, drop the SVG straight onto the canvas and it arrives as editable vector layers. Because the line and the fill are separate shapes, you can select just the green gradient and swap it for your own brand colour without touching the outline, or recolour the outline and leave the fill as it is. Put a scene inside a component and it scales with the frame instead of blurring. The Figma plugin lets you browse and place pieces from inside the file rather than importing them one at a time, which saves real minutes when you are trying five different empty-state drawings to see which one fits the space.

For the web, the SVG is clean enough to inline directly in your markup, so a React or Vue component can render it and you can drive the accent colour with a CSS variable or a fill prop. In Tailwind or plain CSS the gradient stays a real SVG gradient, so it holds its edges at any size and adds no extra image request to the page. Webflow users can bring the SVG in as an asset and keep it sharp on retina screens. When you only need a flat image for an email or a slide, export the PNG or grab the 2x version and you are done, no editor required.

If code is not your world, the point-and-click colour editor does the recolouring for you: open a file, change the green to your brand colour, and download the result. It is the fastest way to make the whole set match your product before you place a single file in a design. Between the editor, the plugin, and plain SVG, there is a way in whether you are hand-writing components, working in Figma all day, or just dragging finished art onto a slide the night before a meeting.

Formats and technical detail

Every one of the 75 illustrations ships in vector and raster, so you are covered from the source file to the final export. The vectors are real editable paths, not a bitmap traced into fake vector, which is why the line stays smooth however far you zoom into a scene.

• SVG for the web and for Figma, with the outline and the gradient fill kept as separate, sensibly named layers you can recolour on their own.

• PNG at 1x and 2x for quick flat use in slides, email, and anywhere raster is simply the easier path.

• Layered source you can open in Illustrator to restructure a scene or lift a single object out of it.

• Transparent backgrounds throughout, so a scene sits on any page colour without a white box showing around it.

The gradient is built as a proper SVG gradient rather than a flattened picture, which is the reason it looks right at both a hero size and a small inline spot. Layer names are kept readable, so you are not digging through "Group 47" to find the shape you want to recolour. If you drop the whole pack into a design system, the naming holds up well enough to sort into your own components. File sizes stay small because each drawing is paths and a gradient rather than an embedded picture, so a page carrying several scenes still loads quickly.

Licence

This is a paid pack with a commercial licence, so you can use the illustrations in client work, in a product you sell, in paid marketing, and in an app or a site that makes money. Use them across as many projects as you need to. The one thing you cannot do is resell or redistribute the files themselves as an illustration pack, or pass them off as your own stock for other people to download. Put simply, build what you like with them, just do not repackage the art itself and sell it on. If you are ever unsure whether a specific use is covered, the licence page lays out the detail in plain language.

Pairs well with

If you like the gradient treatment here, the rest of the gradient style shows what the same soft-fill approach looks like across other themes, which helps when you want more scenes in a matching look. When you need the loose line without the colour fill, the outline style gives you the same hand-drawn energy in a lighter, line-only form that sits comfortably next to this set. To see the whole library and find companion packs for icons or a specific category, browse the illustration packs, and if you expect to use several sets across one product, the bundle works out cheaper than buying pack by pack. Later chapters of the Flagship series carry this exact style forward, so Chapter 1 is a starting point rather than a one-off purchase.