Description
Illustration is a key part of the Sage brand. It helps communicate ideas clearly, tell stories, and bring warmth, personality, and authenticity to the experience.
Our illustrations make complex concepts feel simple and approachable, while reflecting our brand through shape, color, softness, and curves. They scale from rich marketing hero visuals to smaller in-product moments, always maintaining a practical, optimistic, and friendly tone.
Illustration by context:
- Marketing: Use larger, richer illustrations to inspire, engage, and tell a stronger story.
- Onboarding: Keep illustrations simpler and more restrained so users stay focused on key tasks.
- In-product: Use illustrations sparingly and subtly, only where they add clarity or meaning.
Anatomy
The static illustration should always be in SVG format where possible.
IMG_Anatomy
When to use
- Consider whether the illustration will positively influence user behaviour.
- Use illustration with intention—not as decoration. It should support understanding, reinforce meaning, and create clear associations across products and experiences.
- For maximum impact, use illustrations only in key moments, such as:
- To celebrate success: for example, exceptional success states
- To reduce confusion or frustration: for example, exceptional error states
- To guide behaviour: for example, when a feature is being bypassed, misused, or underused, such as in getting started or empty states
Color and background
The presence of Brilliant Green is key in making illustrations distinctly Sage. Brilliant Green is the active state.
IMG_Backgrounds
Size
In the Figma Illustration Library we have summarised illustrations into four sizes:
- Size 1 = 980 x 680 pixels
- Size 2 = 820 x900 pixels
- Size 3 = 510 x 510 pixels
- Size 4 = 708 x 708 pixels
We have labeled them sizes for ease of production. There is no ‘one size fits all’ and designers must pick the size that fits the best for the design in hand.
When passing to developers, please refer to the pixel size.
Types
Our illustration system is based on the unique characteristics of the Sage Flow, our Sage logo, and our brand system.
Hero illustrations
Content panel illustrations
Empty and error states
Illustrations are placed inside a roundel to reduce empty space, focus attention, and maintain a cohesive visual journey.
Specifications for roundels:
- artboard 1080×1080 (900×900 padding, 500×500 focal core)
- product up to 300px wide
- mobile 100% width with a 300px maximum
Empty state illustration
Error state illustration
Illustration vs photography
- Illustrations add distinctive personality and convey specific messages that connect with customers.
- When used correctly, illustrations can reduce file size and improve loading speed.
- Do not overuse illustrations, and avoid mixing them with stock photography, as this adds little value.
- Photography brings authenticity and tells engaging stories, as seen in campaign image examples.
- Maintain a balance between photography and illustration:
- Photography: use when users should see themselves reflected in context.
- Illustration: use for complex or abstract content, or for key brand moments.
Best Practice
Hero illustrations (full bleed)
Expressions
Dos and don'ts
Rules for hero illustrations
Do
Do
Don't
When to use illustrations over icons
Do
Don't
How to use illustrations in cards
Do
General illustration rules
Do
Do
Do
