Start here

01 Brand
Every touch point we have with our customers represents our QuickBooks brand. As such, it is imperative to understand our Brand strategy.  Here is are some links from our FUEL website



02 Visual Elements
The core foundational visual elements of our QuickBooks brand

Photography System
Illustration Style

03 Mechanics
The logic and relationships between spacing, layout, typography and sizing of all elements

Visual Mechanics
Supported Browsers and OS Systems

Fixed and flexible

To innovate fast and ensure a cohesiveness experience, we make a distinction between fixed and flexible elements.

Fixed elements are specific and repeatable solutions to common UI problems. They are already defined, built and standardized, so please use them consistently. They include foundational elements such as buttons, checkboxes, form fields, headers, font sizes and colors.

Flexible areas are where you can optimize for a specific use case. These should address interaction issues only and should not contain visual design requirements. If you are assigned to an innovation project then you are encouraged to stretch the boundaries of the system. Although any innovation needs to follow the visual mechanics structure.

If you are assigned to one of the supporting projects, for example care pages, secondary products, etc. then you need to follow the lead of the already established layout and its components to achieve the highest quality. Talk to your manager and fellow designers to understand the constrains of your project. In particular, no project gets developed in isolation, it’s always a critical part of the end to end experience. Please use your judgement and skill to make sure it will achieve just this. Every designer contributes to one Design System, one Experience, one Brand.


To streamline design efforts, share files effectively and automate as much as possible, our designers primarily use Sketch. We use the Lingo library plugin for Sketch to synchronize design assets across instances in real-time. If you have never used Sketch before, learn it. It’s very powerful and the learning curve is short.  For you coders out there, we’ve got a robust UI component library built with ReactJS.

Harmony UI Components

Images and assets

You can find images and assets in the Downloads section of this site. If you can’t find a specific asset please contact your manager or get in touch. Please refrain from using external assets unless permitted otherwise.

Ok, I got this. Let's start my project.




More pieces to successfully run your project



Start with a brief

Every project starts with a project brief or similar documentation that specifies customer benefits, business goals, insights, audience, and market implications. Rapid prototyping and testing in front of customers is highly encouraged.  We need to ensure all of our projects support the end to end experience and are aligned with company and business unit priorities.

Get support early and often

If you feel like you’re stuck there are several forums to get help. Start with your fellow designers on your team and then reach out to one or all of these resources:

QuickBooks Design office hours
Make an appointment

  • Tuesdays 1:00 – 2:00pm (USA/PST)
  • Thursdays 10:00 – 11:00am (USA/PST)

Brand office hours
Make an appointment. Email your question to

SBG OnDemands
Schedule time with your team lead

  • Mondays and Wednesdays (schedule on Slack #sbg-xd-announce)

Review and approval process

Final approval for your project sits with the project owner. During your project, you have several resources to help you deliver awesome:

For visual design feedback
The first step is to reach out to the Visual Stakeholders team for their input. Contact Hetal Soni if you need support and/or project review.

For content feedback
Make sure the content of your project is reviewed by a writer. If there is no writer assigned to your project, visit Brand office hours to discuss.

For all projects
OnDemands occur weekly on Mondays and Wednesdays. The goal is for you and your project partners to introduce the project and receive feedback from the design leadership at QuickBooks. This forum allows the design leadership to keep an overview on all ongoing initiatives and how they contribute to the overall end to end experience.

Share your expertise

The QuickBooks Design System is owned by every SBG XD designer and developer. Yes, that’s you! The QuickBooks Design team is here to help you learn how to contribute content that will help create a world-class design system. There’s no better time than the present, so let’s begin! See how it works

SBG XD is a collaborative environment and we encourage conversations among designers across project and team boundaries. You will find a number of events and activities in your calendar to foster collaboration and friendship among our designers. We encourage everyone to participate in ongoing dialogs on excellence in design. Welcome to the team!


  • Was this Helpful?