Lifestyle illustrations

Story

Illustrations are imperative to storytelling. We use them to tell the diverse stories of our customers and share their craft and aspirations.

Emotion

We use illustration to drive emotion. It represents our customer journey and QuickBooks as a whole. We reflect this through active, organic, and approachable illustrations. They create connections in the right moments.

Presence

Illustrations guide users while supporting messages. Use them sparingly to provide clarity without taking away from the message.

You can get the latest illustrations from the Bolt product toolkit or request an illustration. 

Our character illustrations are global and representative of our customers and their industries. We keep them narrowed so we can always recognize them.

Character set *

Each character illustration has its own personality and is carried through physical features, outfits, and accessories.
*These are examples of our characters. It’s not the full set.

Our secondary elements are simplified and shouldn’t compete when used with illustrations. The customer is our focus and we’re the invisible force supporting them.

Background elements are scaled in proportion to the illustration.

Only use color that doesn’t compete with the character.

*The color for the shape is HEX #ECEEF1 on a white background
*The color for the shape is HEX #FFFFFF on a HEX #ECEEF1 background

Diversity is core to who we are. Our customers to their businesses, each is uniquely different. It is important for us to represent them, celebrating them and their story. To do so, we’ve added colors to our brand palette specifically to address the range of diversity in skin tones and hair colors. We crafted characters, inclusive of gender, ethnicity and occupation.

Color

The colors we use are from the QuickBooks color palette. we have added addtional tones to address diversity in physical features, and leverage transparency on darker colors for shadows.

Introduction to the color palette

We’re utilizing the full Intuit color palette in our lifestyle illustrations. We added skin tones and darker shades that allow for contrast and shading to ensure our character illustrations feel more human and less cartoon-like. Skin tones can also be used as hair colors.

60/30/10

To keep the palettes minimal and simple, all color should be applied with a 60/30/10 rule. Choose one color for the majority of the illustration i.e. a large field of color, a prominent article of clothing, or element. Choose another color that’s harmonious with the first. Then choose 1-3 accent colors.

Avoid using green above 30.

Color harmonies

It’s important to consider color harmonies when applying color to lifestyle illustrations. When you choose color harmonies, you’re ensuring that the colors work well together.

Keep in mind how colors complement each other. Examples of color harmonies are:

• Complementary. These colors are opposite on the color wheel.
• Split complementary. These are a variety of the complementary color scheme. In addition to the base color, split complimentary uses the two colors adjacent to its complement.
• Triadic. These colors are evenly spaced around the color wheel.
• Double complementary. These use four colors arranged into two complementary pairs that are evenly spaced on the color wheel. 

Red and green are complementary colors, but they should never be the primary colors of an illustration. They should always be used as accent colors and should not exceed 10% of the illustration.

Shadows and highlights

Lifestyle illustrations have highlights and shadows to create contrast and add depth. When you choose a color for a field, apply that color to all parts of the field. To create a highlight, choose the section that’s used to highlight and change the color to white. Change the opacity until the desired highlight is created.

To create a shadow, select the shaded area. Apply the color of the rest of the field. (In some cases, you may need to duplicate the object before following with the next step.) Then change the blending mode to multiply and adjust the opacity until the desired shadow is created. 

Make sure there’s enough contrast in the color usage.

Crop

Cropping is allowed when there are spacing constraints. Use the dot to crop and frame the illustration.

All parts in the upper body, including accessories like laptops and tools, must be in the foreground of the mask shape.

Don’t scale the illustration smaller than its original size. It’s not meant to be used at such a small scale.

Lifestyle illustration is used as a storytelling element primarily for marketing. One exception where lifestyle illustrations can be used in product is for first-time use, non-filtered/results zero state, and in-product discovery.

Use illustration to capture the whole section and the overall theme of the content.

Marketing

Product