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