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