Spot illustrations are used to add visual support to our marketing messaging. You’ll find them alongside of text on our web pages, blogs, and emails to better explain what is being said in text. Note that spot illustrations should not be used as call-to-actions, and they should only be recycled if the messaging is relevant.
Aesthetically speaking, our illustrations must be clean, consistent and professional in their execution. They should evoke feelings of friendliness and warmth. When illustrating people, we must be thoughtful, diverse, and inclusive.
Types of illustration
Our illustrations are executed in 2 main categories Spot illustrations and Spot Hero illustrations. Spot illustrations are square, singular moments or objects. Spot heros are larger, more complex rectangular scenes. Spot illustrations should always appear at half the size of Spot Hero illustrations throughout our artwork.
All Spot Illustrations should be created in Illustrator, exported to .SVG & .EPS in an RGB color space.
Spot illustrations should be created in a square artboard at 768px x 768px.
Spot hero illustrations should be Rectangular artboard at 1024px x 768px.
Spot illustrations can have square or circular masks within the 768px x 768px artboard. Spot hero scenes (1024px x 768px) should not be masked.
Azure is the primary illustration color. It should be used for the main focal point of our spot illustrations. Prince is the secondary illustration color. It should be used primarily as a background color to help emphasize the main object or focus of the illustration.
Azure can be used at 100% & 40% opacity. Prince can be used at 40% opacity only.
Cloud and star flourishes play a supportive role in the background of our illustrations. They’re executed in 40% opacity of the Prince primary color.
Our Illustrations should only appear on top of White and Off White backgrounds. Other colored backgrounds are unacceptable.
The stroke width should always be set at 8px. The stroke settings should be set to Round Cap, Round Corner, Align Stroke to Center.
Never resize the illustration without first expanding the lines in the drawing. Alternatively in the shape properties window make sure you have Scale Corners as well as Scale Strokes & Effects selected
There are 5 types of radius detailed below that can be used to add depth to our illustrations. Generally speaking objects in the foreground should be using the larger radius. Use smaller corner radius’ to scale toward the background of the image.
Foreground - 40px / 32px / 24px / 16px / 8px - Background
Shadows appear in two main sizes within our illustrations. Larger shadows are 32px in size and smaller shadows appear as 16px in size.
As a rule of thumb, objects that occupy around half of the canvas should use the larger shadow size and objects that occupy less than that should use the smaller size.
Shadows are generated from a light source situated at the top left corner of the illustration.
All illustrations should be created from a front on view point and be executed in two dimensional space only.
When creating new illustrations of people they should be initially drawn in an artboard that is 1152px in height. The artwork should then be outlined so that the line thickness scales correctly. It may then be resized to fit within one of our existing artboard sizes defined above.
When illustrating people be mindful of inclusion of all types of individuals, races, genders, abilities etc.
Generally speaking, people should be featured in Spot Hero Illustrations. Their inclusion in Spot illustrations should be limited to featuring the torso up toward the head.
Make sure all hidden layers have been removed. Make sure all masks are removed. Make sure you have expanded all line art for output. Be sure to retain a copy of the original line drawing so it may be edited easily at a later date if needed. SVG files should be optimized with the svgo tool.
Do use all illustrations at recommended relationship sizes.
Do submit new illustrations to the lead illustrator and creative director for review and sign off.