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 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
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
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.
Circle background color
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
- 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.