July 11, 2020

New design tool set to launch in September,
New page templates launch now

With the launch of Figma and a fresh approach to page templates, QuickBooks designers will have more powerful tools to organize, build, share, and improve customer experiences.

  • Figma is set to launch to the entire QuickBooks Online design community in September. This beta launch will give designers and stakeholders access to a collaborative, cloud-based tool for making and sharing designs. We’re working with teams across Intuit to figure out details, and we’ll keep you posted. For more information and to get answers to some of your questions, read the latest Figma update.
  • QuickBooks Online page templates are the newest addition to the design system sandbox. The templates give designers a framework and guidelines for how we structure pages and screens in QuickBooks Online. To check out and start using the Sketch files, see the design system sandbox.

June 14, 2020

Shining the light on new badges and dark mode

New badges and dark mode are the highlights of today’s QuickBooks Design System updates.

Revisions in the visual system of badges help us guide customers to new and useful features. And dark mode makes sure customers can see those features in whatever light the customers are working in.

  • Badges help guide customers to helpful information or new features.
    • To show customers things they might need to act on, we use status badges.
    • To guide customers to important numbers they should pay attention to, we use numeric badges.
    • To inform customers about new or revised features, we use new feature badges. We also include guidelines for using the indicator dot.
    • To let customers know a feature is in progress or incomplete, we use beta badges.
  • Dark mode lets customers keep reading and using our product in dim or dark lighting conditions. When using dark mode, customers “turn out the lights” on QuickBooks, and colors and some functionality change to keep the experience readable and useable. This alternate way of presenting our screens is still work in progress. Get enlightened about dark mode.

April 18, 2020

Customer celebrations and design system sandbox launched

The QuickBooks Design System site now features a new pattern for presenting celebratory moments and a fresh way to explore design innovations even before they become part of the design system.

  • The celebration framework helps designers create just the right moments of joy when customers complete a task or meet a goal. The pattern blends interaction, visual, and content design to create the appropriate amount of delight for these moments of accomplishment. To celebrate good times, come on.
  • The design system sandbox gives our design community access to emerging designs, guidelines, and examples that aren’t yet included in system standards. Many of these new designs haven’t been coded yet or haven’t been verified as components or patterns. But these innovations are worth a look and can guide or inform the work we’re doing. Go play in the sandbox.

In addition to these efforts, new work on typography, dark mode, and other designs are in progress. More to come.

March 30, 2020

Design system site struggles

Throughout the past week, the QuickBooks Design System site has not been working well. We apologize for the inconvenience and are working to stabilize the site.

We identified a number of issues:

  • Slow load times
  • Missing graphics
  • Inability to download logos

We’re working to address these and other problems. If you notice other site issues, please let us know.

We’ll update this page with information as soon as we have it.

September 20, 2019

Keeping up with design system changes

The QuickBooks Design Systems team has been busy, and we’ve resolved to do a better job of keeping our design community and partners posted about updates. Here are some of the latest.

The visual design refresh continues

Guidelines for the visual refresh were completed earlier this year, and some components and patterns are still being updated to reflect the new design direction. To keep up with the latest changes, see the visual refresh dashboard.

Browse through a gallery of components

Not sure what the components or patterns are called? You can browse through a gallery of them in the component gallery. It’s a work in progress, so please feel free to let us know how we can make it better.

A final goodbye to Geogrotesque

This should be old news by now, but let’s make sure: The font known as Geogrotesque should not appear in any QuickBooks screens. Avenir is the new boss. Read more about migrating to the new font.

Intuit content designers come together with a unified style guide

For the most up-to-date content guidelines, visit the one Intuit content design style guide. Content creators across Intuit brands and teams contributed to this new resource, and the site will be redesigned and relaunched later this year.

Revising the design system site and tools

Other efforts to refresh the design system site and tools are underway. We’ll publish more updates about improved communication, migration, and tools soon.

Jan. 18, 2019

Bolt transforms QuickBooks design

The Bolt visual design refresh continues to make its way into the QuickBooks Design System. To make Bolt and the system easier to use, we’ve Boltified buttons, form elements, and guidelines. And we updated the Lingo Sketch library too.

These elements now include Bolt updates:

Bring Bolt into the product experiences you’re creating. Find out how.

Thanks to contributors

  • Ariel Alvarez
  • Matt Ashwood
  • Steve Chen
  • Michael Cheung
  • Bill Clarke
  • Michael Haggerty-Villa
  • Jen Hong
  • Andrew Jones
  • Lishuan Lee
  • PJ Nidecker
  • Kim Ryu
  • Gordon Tuji
  • Ace Vu

May 7, 2018

Progress report: voice, modals, marketing, and wireframes

Recent design system updates reflect progress in how we sound, look, and create experiences fast.

  • New voice and tone system includes examples.
    As the content design team launched its renewed, streamlined voice and tone guidelines, the design system introduced a new showcase for content examples. Highlighting content from marketing and product, the fresh examples show our design community what our champion voice looks and sounds like. Learn by example.
  • Get more guidance for modals.
    Including contributions and ideas from a number of designers, we expanded the modal component and updated our guidelines. Check out new documentation.
  • Marketing guidelines support campaigns.
    Are you a marketing designer looking for guidelines for the latest campaign? Do you want to know what components and patterns to use? We made a special place for marketing campaigns. Look for it soon.
  • Create fast with our wireframe kit.
    You’ve been asking for a lightweight, low-fidelity component library to help you quickly design product experiences. Our wireframe kit in Lingo can help. Get the kit now.

 

Thanks to contributors

  • Angela Browne
  • Justin Carboneau
  • Steve Chen
  • Michael Haggerty-Villa
  • Jad Limcaco
  • Chorock (Green) Park
  • Eri Zhong

March 7, 2018

Create experiences that are accessible to all

The design system continues to strengthen its guidelines for making experiences that are accessible to all users. Among the latest additions are rules specifically for content design.

Written by Principal Content Designer Louise Mintun in collaboration with a number of design and accessibility experts, the new guidelines present sound advice for crafting content for users with specific needs:

  • Blind users who navigate websites with screen readers
  • Color blind users or those with low vision
  • Users with hearing impairments
  • Users with cognitive impairments or learning disabilities

These guidelines appear in the usage section of the style guide.

For additional guidance, including considerations for interaction and visual design, the design system has a section devoted specifically to accessibility.

Thanks to contributors

  • Ted Drake
  • Louise Mintun
  • PJ Nidecker
  • Yvonne So
  • JP Tran
  • Ace Vu