Welcome to SDS 2!

Explore the new features exclusively available in this version of the Shell Design System.

Guidelines

Illustration

Smart Library is a resource for creating customised illustrations for use in digital applications and printed media.

Section image

Constructing a scene

A variety of scenes have been created and are available to download and use directly from our Figma Illustration project. They can be edited by selecting different options for gender, ethnicity and clothing.

Composition

There are two planes in an illustrated scene: background and foreground. Background consists of backdrops and shapes, foregound consists of objects and people.

1. Foreground: Humans and scene objects.

2. Background: Shapes and scenic elements.

3. Guide: Use to ensure illustration focus is maintained.

Ensure that your scene image is balanced

Do:

Ensure that your scene image is balanced

Overcomplicate the scene. Establish a clear narrative and use select elements to highlight the message.

Don't:

Overcomplicate the scene. Establish a clear narrative and use select elements to highlight the message.

Guides

Refer to this guide for constructing a scene and illustrations.

Ensure that the focal point of your illustration falls in the focus area.

Do:

Ensure that the focal point of your illustration falls in the focus area.

Position the key items outside of the safe zone as it creates an illegible illustration when cropped to 4:3 or 1:1 ratios.

Don't:

Position the key items outside of the safe zone as it creates an illegible illustration when cropped to 4:3 or 1:1 ratios.

Colour

All colours and variant combinations have been considered for legibility, contrast and accessibility. Use our inclusive human colour palette to represent multiple ethnicities and diversity in people.

Ensure the scene is composed using colours from our SDS Foundations palette with sufficient contrast.

Do:

Ensure the scene is composed using colours from our SDS Foundations palette with sufficient contrast.

Use foreground colours with low contrast from the background.

Don't:

Use foreground colours with low contrast from the background.

FAQs

Do I have to always use a background?

No, you may simply use a character. If the character is seated then ensure to use a seating prop.

How do I recolour artwork for print?

All curated scenes can be downloaded in CMYK and RGB formats. Use Figma to construct your scene then export it as an SVG to Adobe Illustrator.

Previous

Iconography

Next

Motion