One style, drawn across three chapters

Every piece is built the same way. A dark slate outline holds the outer edge of each shape, and a lighter lime line handles the interior detail and the small marks around it: sparkles, tick marks, motion loops. The line has the slight wobble of a real pen, thinning and thickening as it turns a corner.

Colour does very little, on purpose. One lime gradient carries all the illustrations, fading from bright chartreuse to a pale wash, and it sits a touch off the outline instead of filling it exactly. That offset is why the set reads as drawn rather than traced. Nothing has a background or a ground shadow, so a character from Chapter 1 and a pointing hand from Chapter 3 can share a screen without their scenery clashing.

The mood holds across topics too. A hospital bed and a piggy bank carry the same light, friendly tone, which is harder to pull off than it sounds, and it's the best reason to buy these chapters together instead of mixing packs from different illustrators.

Why the chapters work better as a set

Each chapter covers a different layer of a product. The first handles the marketing site and the moments when something breaks. Chapter 2 brings subject matter for a specific industry, such as a clinic booking app or a personal finance dashboard. The third fills the gaps inside the interface itself: the tap prompt, the payment step, the icon in the nav bar.

Picture a fintech app. The Chapter 3 card in hand goes on the payment screen, the Chapter 2 piggy bank sits on the savings goal, and a Chapter 1 404 scene shows up when a page fails to load. A healthtech startup gets clinical scenes for its landing page and gesture illustrations for its booking steps.

The collection also costs less than any two chapters bought separately, so once a project needs a second topic, the full set is the cheaper option. You save $71 against buying all three.

How to use it

In Figma, drop the SVGs onto the canvas or pull them in through the GetIllustrations Figma plugin. Because every file uses the same slate line and lime gradient, moving the whole collection to your brand colours means changing two values. If you'd rather not open a design tool, the SVG colour editor handles the swap in the browser.

In React, Next.js or Webflow, inline the SVG when you want to animate it or tie its colour to a CSS variable, and use the PNG when a plain image tag is enough. Open the layered AI files in Illustrator to adjust colours or arrange pieces from different chapters in one layout.

Formats and technical detail

• SVG for all illustrations, editable vector paths that scale to any size

• PNG with transparent backgrounds

• AI source files with layers

Licence

The commercial licence covers websites, apps, client work, presentations, social posts, print and video, and you can recolour and resize the art as you like. You can't resell or redistribute the files on their own, include them in templates or themes for resale, use them as the main design on merchandise, or add them to AI training datasets. Attribution isn't required.

Buying a single chapter

If one topic is all you need today, each chapter is sold on its own. Flagship Chapter 1 is the pick for SaaS screens and error states, Flagship Chapter 2 for healthcare, creative and finance products, and Flagship Chapter 3 for app flows that need hands and matching icons. Start with one, and the style stays consistent when you add the rest.