Visual

Illustration

Sprout utilizes both small “spot” illustrations and large “scene” illustrations for visual storytelling purposes across brand and product.

Illustration differs from icons and UI visuals in that it is used to tell a story, convey a mood, or utilize metaphor to make a complex idea clear and concise. We can use it across product, marketing and internal initiatives.

General tips

Snap to Pixel/Snap to Grid
When creating spot illustrations, shapes should always be on whole pixels on the grid in Illustrator. This will create SVGs with a much smaller file size (each vector coordinate will be a whole number). This also helps prevent the image from being distorted when the SVG file is optimized.

Snap to Grid/Pixel

Consider setting your Illustrator document to Snap to Grid (using a grid set to a whole pixel value in Preferences) or Snap to Pixel before you start creating your illustration. This way, every shape you make will have clean whole-number coordinates that will create a smaller, more accurate-looking SVG.

Do not, however, just apply “Align Selected Art to Pixel Grid” to every shape once you are done creating an illustration that hasn’t been build to be pixel perfect. This will alter coordinates and potentially make things, especially icons or logos, janky.

DO: Use snap-to-grid (on a 10px grid) or snap-to-pixel in order to create vector shapes where the coordinates are whole numbers. DON’T: Just make shapes willy-nilly. If the X-Y coordinates or width and height of elements fall on fractions of a whole number, your image WILL look janky once it’s optimized.

Rounded Corners
Corners are not, by default, rounded. Rounded corners used only to better visually represent an object and should be whole numbers.

Gradients/Textures
At this point, we’re recommending that gradients and textures should be avoided on illustration, especially spot illustrations.

Spot illustration guidelines

Snap to Pixel

Smaller and contained. Straight forward. Can still use simple metaphor but is more about showing emphatically what the paired content is telling you. No background scene, stands on own.

Who are these guidelines for?

These guidelines apply to our core brand and product spot illustrations—and are meant for all designers, both in product and brand/creative to be able to pick up and use across our properties.

Anatomy of a spot illustration

Anatomy of a spot illustration

Composing spot illustrations

When creating spot illustrations, remember that these are designed to be concise and insightful. No need to make things overly elaborate or complex.

  • DO: Do Use the 80/20 Rule: 80% of the shapes are strokes and 20% of the shapes are fills.
  • DON’T: Don't Use around the same amount of strokes as fills. This creates boring and cluttered illustrations.
  • DO: Do Overlap elements to create a sense of movement.
  • DON’T: Don't Place shapes haphazardly. Really think about how these shapes work together.

Strokes for spot illustrations

Stroked shapes are the dominant type of shape in spot illustrations, with fill shapes incorporated to strategically draw interest and attention to specific areas of the composition.

Strokes should generally be 2pt. Strokes can be larger, like 3pt, in specific circumstances where the final image is getting resized down (like Sprout Blog images).

  • DO: Do Make sure stroke widths are whole numbers (typically 2pt, but can be 3pt for larger illustrations).
  • DON’T: Don't Use around the same amount of strokes as fills. Make the stroke width 1pt or a fraction of a whole number (ie. .75pt, 2.5pt, 3.735pt).

Fills for spot illustrations

Fills play a supporting role in spot illustrations. They should enhance the spot illustration and draw focus. Make sure to avoid the tendency to use too many fills or make them large areas of the composition.

  • DO: Do Use fills as emphasis to draw the viewers eye through the illustration.
  • DON’T: Don't Make the majority of the spot illustration have a fill behind
  • DO: Do Always offset fills down and to the right of the stroke shape they are offsetting.
  • DON’T: Don't Offset the fills in any other
  • DO: Do Offset the fills two times (2x) the stroke weight. So, if the stroke weight is 2pt the offset is 4px to the right and 4px down.
  • DO: Do Optically correct offset for irregular shapes. It doesn’t have to be 2x exactly. If the offset looks awkward, you can adjust it just as long as it looks like it’s a 2x offset.
  • DO: Do Make sure that fill shapes are arranged behind all strokes. This might involve “cutting” and adjusting some shapes.
  • DON’T: Don't Offset fill shapes at different distances. This creates an illustration that looks chaotic and unintentional.

To offset or not offset fill shapes

To offset or not offset fill shapes

If fills are free-standing (not the same shape as a stroked shape in front of it) they do not need to be offset and can be centered or placed wherever is aesthetically pleasant.

Color usage for spot illustrations

General Color Usage Guidelines

Spot illustration on light background

Example

Foreground strokes: Neutral 1000
Fills and twinkles: -400 to -600 level brand colors
Background: Neutral 0, Neutral 100

Spot illustration on color background

Example

Foreground strokes: Neutral 1000
Fills and twinkles: Neutral 0
Background: -400, -500 level brand colors

Spot illustration on dark background

Example

Foreground strokes: Neutral 0
Fills and twinkles: -400 to -500 level brand colors
Background: Neutral 800Neutral 1000