Applying tone
Understand which tone applies to your circumstance. Consider whether you need to educate, redirect or deliver bad news. Read through the below to pick the best approach for your illustration.
Educating users
➤ Typically used for: onboarding, blank states, new/upgrade features
Tone: Experts + Approachable where the illustrations assist in educating our users. The visual concepts should help aid in greater understanding of the feature. Where appropriate we reinforce product concepts by using common visual representations found across the devOps domain.
Amount of tone:
An example of this is the insights feature, we use the illustration to reinforce that they will be able to visualize data in graphs and hint at what kind of data that would be.
Add First Project Onboarding
Redirecting users
➤ Typically used for: Permissions, User Error (though most of these will be inline)
Tone: Reliable + Approachable. Illustrations can help reinforce a sense of our security, guide users to more information or reach out for help to solve their problem.
Amount of tone:
Giving bad news
➤ Typically used for: 404, Unforeseen connection issue (whole app unresponsive), Maintenance window
Tone: Relaxed + Reliable. Sometimes really unforeseen issues do occur. Delivering bad news with a small dose of witty and strong dose of this can be resolved through relatable visuals can help ease the moment. The reliable part typically comes through the micro copy. See error message micro copy.
Amount of tone:
|
Everyday relatable 
Great examples of small inconvience that people can relate to and the sense of urgency is low and implied it can fixed easily or shortly. |
Subtle nod or reference to meme culture 
Our social media team often use memes for communication and is another way of adding relatable humor.
|
Subtle nod or reference to internet / geek culture 
Example: Reference to Stranger Things TV Show |
|
|
|
|
What to avoid
Being overly dramatic, references to real life disasters and using octopus related items for example tentacle imagery is to be avoided.
Avoid using real life disasters
Avoid using tentacles
Visual Principles
Supportive not distracting
Colour choices should not distract or compete with the CTA. The illustration should be supportive, informative and secondary.
Clean and geometric shape
Elements should use flat (non 3D) style graphics. Avoid using outlines, and drop shadows. Gradients should only be used on backgrounds.
Use of depth
Add interest by using perspective and depth. Depth can be implied with angled layers of graphics.
Types of illustrations
Hero
- Tells a story
- Dominant colours brand blue/green
- Up to 4 colours
- Includes the CTA colour from the page it appears on (eg green.500)
- Includes a background blob
- Can include people who are small in scale VS real life objects
- Has a dark mode variation
Utility
- A more literal expression of a concept / single-subject matter
- Dominant colours brand blue/green
- Up to 3 colours
- Has a dark mode variation
Flows
- Utility illustrations that have been combined to create flows
- Combine them with connecting lines to make flows
- Can use the connector plug
- Can use integration logos
Instructional graphics
- A more detailed technical diagram that explains a process
- Dominant colours greyscale
- Often includes text
- Used exclusively in the help panel
- Has a dark mode variation
- More to come on these at a later date
Use of colour
Palette
An illustration should use the Interface palette as a base, with the option to also use the Brand palette. When using the Brand palette try to use it only for including the brand blue and green.
Each type of illustration specifies which colours should be the dominant colour for that type. For the majority, the dominant colours will be blue and green, with 1-2 accent colours at smaller quantities only if required.
A colour refers to all shades of that colour eg multiple shades of blue still counts as one colour.
Colour ratios
The way in which colour is used in illustrations is important, specifically the ratio of colours used.
Each type of illustration has different rules around the number of colours it should contain, but they should all use the same method for deciding how much of each colour is appropriate.
The golden ratio/rectangle can help keep the colour ratio of an illustration in balance no matter how complex it is. Any good illustration will be made up of only one or two dominant colours with a small amount of accents when needed.
Colour ratio is not an exact science. A certain colour may carry more visual weight even though it technically uses less pixels. This is why it should be thought of as a guide rather than a strict rule, and something that should be judged by the illustrator in each case.
Some examples showing how the ratio can be applied to images with 2, 3 and 4 colours.
Dark mode
Each illustration should have a dark mode variation.
Creating a dark mode variation can be a simple as increasing the depth of a few colours.
Assets
Background blobs
There are 5 different blob shapes available to use and 2 colour options (1 for light mode, 1 for dark mode).
Light mode background blob. It uses Gradients/Extended/2 from library Design System | Foundations
Dark mode background blob. It uses Gradients/Dark/Blobs at 65% opacity from library Design System | Foundations
People
A variety of people in different poses are available. The scale of any person used should be one third to maximum a half of the size of your main object. This helps them appear tiny in relation to real world objects and ensures they are a background feature and not the main focal point.
Feel free to adjust poses, colours, hair, clothing etc to suit your illustration and also feel free to create additional people when needed.
When using people we should strive to show diversity in skin tones and hair colour. There is a Skin tone palette available in Figma library Assets | Illustration.
