Design Systems Newsletter

We are excited to announce the initial release of the Workbench documentation website.

We’ve added several features and expanded content after a successful round of beta feedback in November. The documentation site will eventually contain detailed documentation, examples, and usage guidelines for all of our components, including notes on accessibility. We will continue expanding on our pattern libraries and design guidelines so that designers and engineers have one consistent point of reference when developing UI for the Gusto app.

Workbench has now made its way to Figma! Our new design system assets, including a brand new component library and UI kit, are now available to use in Figma. These are net new files, to ensure none of your existing mockups get updated or overwritten. The old library will still exist, but will not be maintained or updated moving forward. The goal is for all designers to begin using the new improved design system at a time that works for them.

We made sure to rebuild all of the components using the latest features in Figma such as Auto Layout and Variants. These features help improve speed, efficiency, and convenience of our workflows as designers. Our typography and color styles have been revised to help guide designers to know how and when to use each different style. The icon library has been refreshed to consider more balance and cohesion. Everything that is available to an engineer to use is available in the Figma component library for designers to use. The Figma components have been built with the 4px grid system in mind, and how we plan to move our design standards forward.

To help answer any questions in regards to how the new Figma design system works, there are two weekly Figma Office Hours in the calendar, on Tuesdays and Thursdays. You don’t need to book anything, just show up and ask questions. There is also a new process for submitting ideas or changes, and contributing to the design system. All that to say, we are very excited to share this with you.

Check out our Getting Started video »

Explore the UI Kit

Submit an idea, change, or request

Design Systems is actively contributing to a project to improve the way users navigate through Gusto. This includes a simplification and redesign of the side nav, as well as relocating some pages and links to make navigating through the app more intuitive and frictionless for our users.

We have designed a new side nav based on the results from user testing two separate prototypes. We will now begin the cross-team effort of implementing the changes to the payroll admin nav and rolling them out to Concierge customers who are interested in participating in the beta. The team will study the learnings with the ultimate goal of rolling out the new design to all users across all of our navs.

We’ve added a handful of new components for your UI-building pleasure. Check them out!

Badge is used to notify users of updated content and also serves as an item counter.

You know it and love it! One of our most foundational components, Button has been migrated to Workbench.

FilterTag is an interactive component used to toggle filter options.

Another of our most foundational components, Link has been re-written in Workbench. It introduces new best practices to make our links more accessible. A react-router variant has also been added.

Tag is a static component used to call out status information to the user.

ToggleButton is an interactive component used to toggle a setting on or off.

NumberInput is a variant of a text input that provides numerical formatting based on locale.

There are lots of new and exciting components to explore in the Workbench lab! These are experimental components that we’re playing with as we finalize their form and function. We would love to hear feedback of how they might work for you.

A modern replacement for the Alert component in the CL, now with a cleaner design and simpler API.

Dialog is a modern replacement for the Modal component in the CL. Free of third-party dependencies and accessibility baked right in.

Built off of Dialog, Drawer is a modern replacement for the existing Drawer component.

Menu is a replacement for the legacy MoreActions component designed to be more accessible and flexible.

Table is a modern replacement for the legacy Table component that improves mobile usability and adds sorting.

The Storybook documentation site has been updated to combine component documentation for Workbench and the Component Library in one place. How convenient!

We have been working on an icon refresh. Our new icons focus more on balance and cohesion between one another. We are also considering how directional icons are utilized differently in our system.

New type styles are coming. We have revised the type styles in Workbench, removing a style that wasn’t being used, and adjusting line-heights to abide by the 4px grid system. We’ve also renamed our type tokens to be consistent with other token naming.

Box recently received an upgrade by Mandy Mitchell that dramatically improved its performance. We love this kind of contribution and thank her for improving the system for everyone.