Coming soon! Digital asset management tool integration

We’re still in the process of migrating illustration assets from the brand portal to this site. In the meantime, you can download illustrations by visiting, select “Downloads” from the dropdown, then select “Illustrations”. Or you can click here.

Our illustrations are used to explain functions, benefits and features. Each metaphor needs to be clearly identifiable and consistently used across channels. Illustrations can be a stand-alone element or used to create a visual narrative for editorial scenarios for QuickBooks products and services.


How to create/request a new illustration


 Create a new illustration:

  1. If you’d like to create a new illustration yourself, please use the guidelines that follow. When possible, download an existing illustration and modify it before starting from scratch.
  2. Draw your illustration masterpiece.
  3. Get your illustration approved at brand office hours.
  4. Email Scott Ng your final illustration


 Request a new illustration:

  1. Check the downloads section in the brand portal to see if the illustration you need already exist. Ask the #sbg-brand-systems Slack channel on if you’re unsure if you’re using the right metaphor.
  2. If the illustration does not exist, sign-up for brand office hours.
  3. Bring the following information to brand office hours:
    a) corresponding illustration copy
    b) timeline, size and context (mock-ups, screenshots, prototypes, etc.)
    c) metaphor ideas and/or sketches (if possible)
  4. We’ll take it from here! Turnaround is between 3-5 business days depending on the complexity of the metaphor.


Getting started

Before you begin, make sure your grid is set to a 1 pixel/gridline. To do this in Adobe Illustrator, go to  “Preferences” and set grid to 1 pixel/gridline, check SHOW PIXEL ABOVE 600% ZOOM



Stroke weight and corner radius

When we refer to lines, we are referring to the strokes that make up our illustrations.

The stroke weight for all lines in 2px.

When lines curve or connect, they use a 2 px corner radius. Exceptions are for tight corners, where a 0 or 1 pixel radius is used, or for more rounded objects where a 3-5 pixel radius is used.

Details about lines
Lines connect and flow from element to element within illustrations, forming illustration into a unit.

Line gap occurs in some places where two elements meet, giving illustration open and airy feeling. This open, yet connected approach uniquely defines our illustration style.

Types of (connecting) lines
The use of a solid line connecting elements together represents a solid connection. A solid line also used as a way to create a composite illustration.

The use of a dotted line refers to a transaction, a process, or some kind of movement. Dotted lines are also used in work flows.





Use of colors
Green and gray are the primary colors for QuickBooks illustrations.

Simple graphics use Gray 04 in the stroke. Complex graphics use two shades of gray, Gray 04 in the foreground and Gray 05 in the background.

Green 03 is used sparingly to highlight aspects of the design and create a beautiful rhythm with in the final illustration. This green is one shade lighter than QuickBooks Green.




Additional colors
If you need more than one color, use the green palette. Accent colors other than green are reserved for in-product only. Limit the accent to no more than 25% of the total illustration, and use a maximum of three colors/shades.




Background colors

When using illustrations on a colored background be sure to follow these guidelines:

If using the illustration on a green background, use Green 03 for the background color and Green 01 as the primary stroke color. Use QuickBooks green sparingly for background strokes to create depth. Green 01 should be used as the fill color.

Using gray is also an alternative option. For the background, use QuickBooks Dark Gray and Gray 03 as the primary stroke color. Use Gray 02 sparingly for background strokes to create depth. Green 03 should be used as the fill color.


Drawing People
To draw the head, create a square 16x16px, with 12px radius corners.

If the head is 1x, (hat/hairstyle/beard can make the head bigger than 1x, 1x is just the shape of the head).

• Body is 1.5x width (shoulder width)

• Torso 2x high

• Legs 3–4x high

The ear/side hairline is placed on 1/4 width line position.

Left eye and nose details is depicted using a “ L ” shape.

Final size can vary  depending on neck details, hair style, facial expressions etc.

Explore adding details and personality.



Using modifiers
Modifiers have a specific meaning than can be added to an illustration to enhance the metaphor.



Do not create new modifiers. If you have a need outside what is currently available here, please email Scott Ng.



Scaling of illustrations

Scaling of illustrations example


Scaling illustrations
Illustrations can not be scaled to fit in a spot. It will alter the consistency of the line weight as well as the relationship between elements and ultimately damage the style. Please consult with the 
brand team to evaluate your situation.

As an illustration scales, add surrounding details to maintain consistent visual density. That will also advance the meaning of the metaphor.

Arranging illustrations

Arranging illustrations


Editorial illustrations are compound illustrations which can easily be taken appart and used as smaller components. They are a great tool to tell a comprehensive story comprised of individual elements.


Editorial Illustrations example


Final step

Once you complete your final illustration, convert it to a symbol to maintain the stroke weight when scaled.

Remember to email Scott Ng and Thom Suh your file so others can use your illustration.






  • Was this Helpful?