Illustration Guidelines

Illustrations are supportive elements used to highlight content and to help tell the story. They can be used to break down information, establish a hierarchy and make content easy to scan.

Spot Illustrations

Spot Illustrations are used to bring clarity. By design, they are simpler and best used to depict a specific concept or action. They can be used effectively to break down information, establish a hierarchy and make content easy to scan.

When creating custom illustrations, follow these guidelines to maintain consistency and keep the look approachable and light.

Include a shadow

Include a white area in each illustration

Lines with rounded ends at 1-2 pt weight with one line as 3pt

Use only one color with its shadow color per illustration

Offset area of color

Simplify details enough to add interest

Background Options

There are two spot illustration sets to choose from - with and without the background circle. The circle is to always be a gray hexadecimal value of #e9e9e9 - RGB Value is R -233, G-233, B-233. Use whichever looks best for your design application.

General Illustration Guidelines

  • Do use at least one line with 3pt stroke
  • Don't have too much detail or use too thick of strokes
  • Do provide details in the illustration to make it interesting
  • Don't leave illustration without enough detail
  • Do use one color with the complementary shadow color
  • Don't use multiple colors. Use only one primary color
  • Do use complementary shadow color within the illustration
  • Don't use shadow incorrectly outside of illustration

Illustration Palette

Spot Illustrations These colors are an expanded color palette from the primary colors of the brand. No additional colors are to be used in illustrations regardless of application.

Primary
#45BFD3
64/2/16/0

Shadow
#129ECC
76/21/8/0

Primary
#FBC453
1/24/78/0

Shadow
#F4B225
3/32/96/0

Primary
#EE8842
3/56/83/0

Shadow
#D16934
14/70/91/2

Primary
#CAAF88
22/29/50/0

Shadow
#AA8D68
3/41/64/5/

Primary
#2DB88E
73/0/59/0

Shadow
#08A47B
81/11/68/0

Primary
#9C9C9D
41/33/33/1

Shadow
#7F8080
52/43/43/8

Primary
#8BA7D7
45/27/0/0

Shadow
#628FCA
3/37/0/0

Primary
#A9CF38
39/0/100/0

Shadow
#7EB542
7/8/100/0

Circle background color

#E9E9E9
7/5/6/0