Start here

The building blocks of the front end are UI components. The UI component library is a catalog of these components available for all engineers to accelerate building of their flows.

01 UI component library
You can view the latest catalog of components in the master gallery.
See documentation here.

02 Test drive
The easiest way to see the components in action is with the product demo.
Launch test drive

UI component

Our components are built using React, vanilla JS, HTML, and CSS.
Total components: 40+
Normal release: Every Thursday

  • provides 40+ UI components to ensure a cohesive user experience for all QB developers, including 3rd party
  • codifies the design system components and patterns
  • ensures WCAG 2.0 accessibility compliance
  • works on web, mobile

Design and code view

The switch on top of each component page on our toolkit takes you from design view to code view that includes code snippets, resources as well as additional developer guidelines.

CSS guidelines

CSS Guidelines for OIUX (Intuit Design System, App Fabric), and most broadly across all of Intuit front-end engineering.

Style guides are particularly important in support of the Intuit Design System and OIUX strategic goals which include supporting the needs of product teams working on large codebases that evolve over long project lifecycles, with multiple engineers contributing over expansive geographic distances and maintainenace timeframes. In this context more than ever before, all teams involved must strive for the necessary degree of standardization in their code.

CSS guidelines

Semantic SASS variables

Semantic SASS variables deliver our brand as “code”. It augments the QB Brand portal and creates a technology framework under which we will be able to deliver the brand promise with consistency, quality, and speed.

This will be a central way of managing brand assets and connects brand deeper into technology solutions

SBG brand repo

Design data

Through a certain lens, it is. A simple example is the color we know of as Intuit Blue, which is encoded as #0077C5 for web browsers, and CMYK 85,49,0,0 for four-color printers.

Our design data is generated, captured, stored, and transmitted through various processes and systems here at Intuit, ultimately reaching our customers and delivering delightful experiences. The most common process is known as “copy and paste”.

Unfortunately copy and paste is insufficient for our needs, because the connection between the design data, the reference name, and the source of truth is destroyed forever, leading to tedious and costly rework.

IDS Design Data aims to solve this by providing a single source of truth that can distribute target-appropriate encodings available for consumption across all of Intuit’s design and development processes.

IDS design data

IDS design data source

Design data naming convention

Questions/general feedback: Slack #ids-design-data

Get support early and often

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

Slack #ask-hui

Email HUI team:

The Intuit Developer Community contains answers to the most common issues users face.

Prototyping and motion office hour: Every Tuesday 1:00 – 2:00PM

Share your expertise

The QuickBooks Design System is owned by every SBG XD designer and developer. Yes, that’s you! The QuickBooks Design System 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!

How to contribute

  • Was this Helpful?