Product expression

Product expression visually enhances content about QuickBooks functionality. When showing our product, focus on one element at a time, ensuring that each point of focus flows naturally to the next.

3 quarter view of a mobile phone with a floating widget

The basics

Devices

We’ve created a family of stylized vector devices to use across marketing channels as needed.

close up of the bottom of an illustrated mobile device

We only use white stylized devices.

1 illustrated laptop with 1 illustrated mobile phones in front

Mobile and laptop as a pair should be reserved for cross-device reference only.

Product UI screens

quickbooks expenses screen UI

Extracted product UI detail

quickbooks UI on an illustrative mobile device

Product UI on device

quickbooks UI on an illustrative mobile device with a pop up on top

Product UI on device with pop-up

extracted product ui pop-up over photo

Extracted product UI pop-up over photography 

extracted product ui in combination with photo tile

Combination of extracted product UI and photography tiles

Before using any product screens, make sure that:


  • All numbers, values, and dates are accurate and relevant to the use case
  • Names of people and businesses are taken from our Name In Lights program, which is a comprehensive, up-to-date list of all approved names we’re allowed to use. If you need access to Name in Lights for your project, please ask your QuickBooks design partner.
  • If combining the product screen with brand photography, use the name of the business featured in the image, if applicable.
  • Extracted product UI and image pairs should reflect the same device (for example, both are from a desktop product).

Adding product UI screens to devices

Fitting our product UI screens into various devices properly may require some adjustments.

Status barSpeaker notchScaling & masking

Mobile status bar

Keep the status bar at the top of a mobile screen in lifestyle photography or videos.


Remove the status bar if product UI is shown in a vector device.

two images showing the lifestyle phone with the status bar and the illustrated phone without the status bar

Photography and product UI

image inside a circle of a man’s hand holding a device with device breaking the edge

Image crop can have a device partially breaking the edge.

full bleed image of a laptop on a desk inside a curved shape with the laptop breaking the edge of the curve

For full-bleed photography, crop a curve at the top edge, with a device breaking the edge.

a pop up ui over a laptop image with a more comprehensive screen ui

Only use one pop-up UI when placing it over an image or a full screen UI.

Product spotlight

We sometimes use a circle shape as a vibrant graphical element to draw additional attention to our product.

full bleed image of a laptop on a desk inside a curved shape with the laptop breaking the edge of the curve

If a pop-up and a full UI screen are used together, spotlight the pop-up.

a pop up ui over a laptop image with a more comprehensive screen ui

If a laptop image shows a pop-up, the color spotlight should be placed above the keyboard.

a device on a blue spotlight and a device on a green spotlight

Only use Kiwi-50 or Agave-50 for the circle spotlight background element.

3 devices on 3 separate spotlights aligned horizontally

If there is a stand-alone device or a stand-alone pop-up, center-align the circle behind it.

Drop shadow

Drop shadow and elevation also help with product focus by adding dimensionality and visual dynamic.

image inside a circle of a man’s hand holding a device with device breaking the edge

If the device is shown at an angle, the pop-up’s drop shadow should be only on the device. 

mobile device with pop up on top of a spotlight

With all frontal views, the shadow should be on the device and the background, too.

ui pop up with drop shadow on top of a photo in circle

Photography or video thumbnails don’t have a drop shadow, but the pop-up does.

What not to do

screen ui in mobile device also duplicated in pop up ui

If using a pop-up over a device, don’t duplicate what’s already shown on a device (unless it’s illegible).

laptop image with quickbooks dashboard in the background with mobile ui pop up in front

Don’t combine a pop-up and a device from different platforms (for example, mobile vs desktop).

3 illustrated mobile devices with 3 different colors that is not white

Don’t change the color of the stylized device.

mobile device in front of a laptop with a pop up ui on top

Don’t include a product UI pop-up when showing more than one device.

product ui showing mailchimp logo and name

Don’t use logos, names of people, or business names without legal approval.

product ui showing wrong math in data visualization

Don’t use mathematically inaccurate data and graphs.

product ui shows expenses of a bakery business next to a photo of a man in construction hat holding a phone

Don’t pair non-relevant data and images.

Laptop and phone lockup with a green spotlight element in the background

Don’t include a spotlight element when showing more than one device.

a mobile phone is place on top of the spotlight to the left

Don’t use a spotlight off-center.

mobile device placed on top of an orange spotlight

Don’t use non-approved spotlight colors.

a small spotlight placed behind the top right corner of a mobile device

Don’t use spotlights as decorative elements.

A pop up UI on top of a dashboard screen on the laptop with dark overlay

Don’t add overlays to the screen behind the extracted UI pop-up.

Available libraries

Here are the assets you’ll need to get started.

2 illustrated mobile phones in 2different angles

Stylized devices 


Download stylized devices

Have work that’s ready for review?

Come to design and content office hours to make sure it’s brand-approved. Agencies and external partners welcome.

Sign up now