Illustration guidelines

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.


Our aim

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.

Spot Illustration Example: Spot Illustration Example
Spot Hero Illustration Example: Spot Hero Illustration Example

Technical instructions

Software

All Spot Illustrations should be created in Illustrator, exported to .SVG & .EPS in an RGB color space.

Artboard Sizes

Spot illustrations should be created in a square artboard at 768px x 768px.
Spot hero illustrations should be Rectangular artboard at 1024px x 768px.

Masking

Spot illustrations can have square or circular masks within the 768px x 768px artboard. Spot hero scenes (1024px x 768px) should not be masked.


Style instructions

Color Palette

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.

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Azure
Sass $c-b300
Hex #0073EC
rgb(0,175,239)

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Prince
Sass $c-p300
Hex #A644E5
rgb(166,68,229)

Backgrounds

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.

Negative Space

Whitespace around block colors within illustrations should be 32px as shown below...

Our spot illustrations should have a minimum of 24px white space around them as shown below...

Our spot hero illustrations should have a minimum of 64px white space around them as shown below...

Strokes

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

Stroke Example: Stroke Example

Corner Radius

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

Shadows appear in two main sizes within our illustrations. Larger shadows are 32px in size and smaller shadows appear as 16px in size.

Larger Shadow Example: Spot Illustration Example
Smaller Shadow Example: Spot Hero Illustration Example

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.

Perspective

All illustrations should be created from a front on view point and be executed in two dimensional space only.

People

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.

People Illustration Examples

Export process

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.

Best Practices

Do not resize Spot illustrations to output at icon sizes. Spot Illustration Example
Do not resize Spot Hero illustrations to output at Spot illustration sizes. Spot Hero Illustration Example

Do use all illustrations at recommended relationship sizes.
Do submit new illustrations to the lead illustrator and creative director for review and sign off.