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

Detailed Illustrations

Detailed illustrations are generally used as a hero or as an island between sections on a webpage and should be used only for digital. They are similar to spot illustrations, but with a few differences:

  • Does not have a background shape or color
  • Can be used in large sizes
  • Digital use only

General Rules

  • When creating illustrations, favor simple over complex.
  • All illustrations are created with a combination of spot illustrations in our established icon library.
  • Use the expanded illustration color palette that includes primary and shadow colors.
  • Use 3 larger icons and 1-2 smaller outline-only icons to create each illustration.
  • Only use 2-3 colors + outline color. Colors can be edited from the original icon to any color within the illustration palette. Each icon within the illustration should use 1 accent color and its shadow color.
  • Scale icons proportionally and then match all of the strokes to use 1 common thin and 1 common thick stroke weight.
  • One outline-only icon with white strokes should be centered in a gray circle that acts as an anchor and focus for the illustration.
  • Only use 2-3 main colors + outline color (can edit original colors to any within the illustration color palette).
  • Leave smaller elements as outline only. Proportionally resize stroke weights to match thick/thin of other icons.
  • Add .05" of space of white or a 7 pt. white outline around/behind overlapping objects.