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

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
Mileage
Tooltips / Secondary nav
Historical data
Neutral
Overdue
Warning / Critical
Info / Help / In-progress / Links

 

Typography

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.

Draft/forecast

 

Components

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

Donut

Show the part-whole relationships

Show relative proportions/percentages of information

Line

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

Accessibility pro tip

Create text alternatives for charts and graphs. A cool way to do this is to include a data table near the chart. See accessibility guidelines

  • Was this Helpful?
  •