These designs, guidelines, and examples aren’t part of the QuickBooks Design System yet, but they might help you with the experience you’re building.

Questions? Suggestions? Ask the design system team during office hours.

Guidelines and frameworks


QuickBooks Online top and left navigation

QuickBooks Online top and left navigation

Contributors: Shailesh Shilwant, Jen Hong, Jing Wu
Guidelines | QBO Zeplin | QBOA Zeplin


QuickBooks Online page templates

Contributors: PJ Nidecker, Natalie Harmon, Jen Hong, Jing Wu
View Sketch file


QuickBooks dashboard overview

Dashboard overview framework

Contributor: Jen Hong
View framework


QuickBooks hero states

Bolt hero and zero states

Contributors: Shailesh Shilwant, Natalie Harmon, Jen Hong
View framework


Status badges

Status badges

Contributor: PJ Nidecker
Try them out in Zeplin

Enhanced step flow indicator

Contributors: Neena Burman, Jing Wu, PJ Nidecker, Lishuan Lee
Zeplin file (Box) | Figma file (request access)

Design examples

Champions badges

Champions badges

Contributors: Alexis Cotton, Juan Marquez
View designs in Zeplin

Multilevel tables

Multilevel tables

Contributor: Jing Wu
View designs in Zeplin

QuickBooks bar and line graphs

Data visualization

Contributors: Jen Hong, Jing Wu
Bar graph | Line graph

Serious play in the design system sandbox

QuickBooks designers are innovating to bring new features and functionalities to our customers. Before the innovations become part of the QuickBooks Design System, we conduct research into use cases, related components, processes, and systems.

We’ll update this page from time to time and keep the design community informed as components evolve.

Have questions, comments, or other feedback about the sandbox? Let us know.

  • Was this Helpful?