A picture speaks a thousand data points. In a data-driven world, the ability to display information through visualization can help our customers understand their business better; it allows the complex to become simple, the abstract tangible, and the invisible (data) visible with bold illustrations. Consistent and persistent usage will ensure a successful end-to-end brand expression.

Note: Our current QBO and QBSE products use custom created graphics which are not reusable components in our library.  The only data visualization chart that is a Harmony UI component is the money bar 2.0 (a.k.a. horizontal bar chart). The team is in the process of updating this design and creating additional reusable UI components so we have the equivalent code for all data visualization designs. This will happen as we transition from the Harmony UI component library to App Fabric UI components that will be included in the shared tech infrastructure across Intuit.  

Foundational elements

Color   |   Typography   |   Shape and weight   |   Draft/forecast   |   Components   |   Dos and don’ts 


The QuickBooks Design system uses a color framework to set a visual tone, afford interaction and communicate meaning. This system is derived from the color proportion of our brand and industry best practices. For color values and hex numbers, see color framework.

Money in / Income / Nav / Confirm
Money out / Expense
Liabilities / Tax / Loan
Blocker / Decline / Error
Tooltips / Secondary nav
Historical data
Warning / Critical
Info / Help / In-progress / Links



Good typography is important for our brand, which cherishes craftsmanship and quality. Our fonts were chosen for their distinctiveness. Using a modern design system we need to make sure our typography is consistent across all pages.


The text font for all Intuit brands is Avenir Next forINTUIT. Geogrotesque is a display font and should be used sparingly.


Given accessibility constraints do not apply color to typography. Color is reserved to communicate functionality (e.g: text links are Intuit blue #0077c5)


To create clear hierarchies avoid introducing more than 3-5 typographic styles. To create visual cohesion, use labeling components when possible.


Shape and weight

Units should align to 4 pixel atomic grid, bootstrap grid, and margins as defined by the Intuit Design System. Each element in a component is aligned to the grid. Elements and components have relationships with each other and play off each others’ dimensions, which creates an easy rhythm in the design.









Not all components are mandatory and there are many ways to combine. Consistent and persistent usage will ensure a successful end to end brand expression over time.


Dos and don’ts

Do not apply color to typography.


Do not place typography on top of full color fills.


Do not assign random color, color has meaning. Refer to color for usage recommendation.



Refer to types to determine when to use a particular chart metaphor.


As scale increases or decreases, adjust the layout by adding or removing detail to maintain consistent visual density.




Best practices

Donut   |   Line   |   Vertical bar   |   Horizontal bar


Show the part-whole relationships

Show relative proportions/percentages of information



Quickly view trends in data over a period of time (e.g: seasonal effects and large changes over time)

Use to connect individual numeric data points to visualize a sequence of values.


Vertical bar

Quickly compare data across categories, revealing highs and lows at a glance

Use when there is numerical data that splits nicely into different categories


Horizontal bar

Quickly compare the status of data

Use when there is numerical data that splits nicely into different categories


  • Was this Helpful?