Digital Illustration Style Guide

We aim to illustrate a world where everyone is financially empowered to take charge of their life, no matter the stage they’re at.

Our illustration style builds off our brand system - from the colours, lines, and shapes - they are intended to make information digestible and delightful in a contextual and meaningful way.

Illustrations

Principles

Be Inspiring

Our illustrations should convey a sense of euphora, optimism, and confidence.

Be Playful

Our illustration style puts forth whimsical, yet down-to-earth narratives of teamwork and self-empowerment.

Tell a Story

Create compelling and practical illustrations through storytelling. We strive to create depth and dimensions to our messages, products, and people.

Types of Illustration

Hero

Used to convey complex, metaphorical, yet contextual narratives about our products and services. Hero illustrations should contain background, middleground, foreground, as well as supporting elements.

Spot

Used in smaller and lighter contexts, spot illustrations are typically more literal than heroes. They should be accompanied with copy most of the time.

Badge

A badge is the literal visual translation of a concept. One or more badges can be used to support the narrative in a hero or spot illustration. Often they are background elements and not people.

Avatar

They are usually faces of people and should be used when we are talking about something relatable to a person, as opposed to the concept of a person. Avatars can be designed in high-fi scenarios by placing them in a hero or spot illustration to tell a story and to show interactions.

Animals

Our furry and sea animals are sometimes heroes in our narratives, but most of the time, they should only be used to add an element of surprise and playfulness.

Anatomy

Illustrations are made up of the following:

  1. Background: The circle acts as a backdrop to draw attention to the piece of information we’re currently communicating - whether it’s a person, place, illustration or product.
  2. Middle Ground: Elements in the middle ground are used to create depth and balance to an illustration.
  3. Foreground: The ‘hero’ of the illustration is displayed at the foreground - whether it is a person(s), place, illustration or product. Hero(es) in action should always be displayed in the foreground.
  4. Supporting Elements: The usage of supporting elements, such as badges, doodles, and partial bursts should primariyl be used to highlight a moment of interaction by tracking to gestures or hands. They can also be thoughtfully used on a background for stylistic purposes.

Color Roles for Illustrations

Tonal values are especially useful for indicating depth. Here's one example of how tones can be used in an illustration:

  1. Teal 80 is applied.
  2. Teal 90 is applied on the shadow.
  3. Mandarine 20-0 is applied to the background to make it less prominent.
  4. Skin tone and hair color are colors that should be considered outside of the color scheme.

Singlife x Aviva character colours are used on the main subject for prominence.

 

Singlife x Aviva character colours are used on the main subject for prominence

 

Here’s how the below image would look with a different color scheme but the same color roles.

A full tonal color scheme can also be used for illustrations with less complexity. Here the tonal values of the color are applied to a single illustration.

  1. Red 40
  2. Red 60
  3. Cool grey 70
  4. Cool gray 30
  5. Blue 40
  6. Blue 60

Implementation

SVGs are the most efficient format for illustrations to adapt the colors as it has flexibility of control in applying the established color system to the different parts of a single illustration.

Best Practices

Ensure that texts are legible on colored backgrounds.
Using 30-0 tone range on the majority of your illustration in light mode as it will blend with the color of the background, creating insufficient contrast.
Ensure that the hero in each illustration is proportionately scaled.
Using 70-100 tone range on the majority of your illustration. These tones lead to a very high contrast look in illustrations.
Use a combination of colors in the tone range of 40-100 on illustrations to create sufficient contrast against the tone of the background.
Use colors aside from the ones listed in this guide.
Outline illustrations.
Overuse the monotone color.
Use gradients for background.