Skip to content

Design Systems Newsletter

New components to brighten your day:

Some upcoming gems are hanging out in the Lab:

Design work has begun on the next round of components:

  • Autocomplete
  • Card
  • DatePicker
  • List
A screenshot of the DataGrid component

Here at last! DataGrid, which is a composition built upon Table, was a labor of love that required most of the year of ideation and testing with various teams. It was built with an intense focus on accessibility, so we’re thrilled to finally make this component available to make it easier for all our users to manage complex tasks.

Check out DataGrid | Check out Table

Design Systems recently hosted a kickoff meeting for Design Systems Ambassadors. This monthly meeting brings together a group of designers and engineers interested in engaging with us to help improve Workbench for everyone. This is a safe space for us as Design Systems to understand use cases and priorities and nurture cross-functional collaboration with the teams who use our product.

Learn more in #design-systems-ambassadors or in the meeting notes

We have introduced a tool called tota11y that allows anyone at Gusto to run accessibility audits in our local and staging development environments. This easy-to-use tool will help us build quality experiences that are accessible to all users. Give it a shot!

Learn more about how we use tota11y

Illustration of Workbench shadows used to create a sense of elevation

We recently updated the shadows used to create a sense of elevation in our components. The new approach uses a series of layered box shadows to create a more natural effect. The updated shadows are already live and can be seen on components like Card, Dialog, Popover, or Toast.

Check out the updated Elevation page to see some examples.

We made a small corrective adjustment to the default margin below headings. There is now 12px of default margin below each heading, up from 10px before. No changes were made to Figma.

We updated our Img component to enable lazy loading by default. This feature has finally appeared in early beta versions of Safari, which means that most of our users will now benefit by only downloading image assets when the browser specifically requests them.

Check out the Img component

Daniel Flynn
Lise LaTorre

Design Systems continues to welcome new members in an expansion that will double the size of the team and allow us to deliver more value to Gusto so we can build great experiences for our customers.

Daniel Flynn joined early December as the PE for Engineering. Daniel previously worked at Gusto as a contractor on the Product Infrastructure team (our parent team). His new role on Design Systems will allow him to bring his deep knowledge of APIs and systems and combine it with a passion for the craft of the front end. Welcome (back) Daniel!

Lise LaTorre joined this week as the Head of Design Systems. She joins us from Salesforce, where she was Director of Design System Enablement for their Lightning Design System. Lise will empower both the Design and Engineering teams and drive team strategy, helping us to scale Workbench. She is a champion for front-end excellence and encourages meaningful collaboration between design and engineering. Welcome Lise!

We will also welcome an additional designer to the team in January.
A mobile view of the Workbench website homepage

We’ve embraced the power and convenience of Airtable to keep our status pages more up-to-date and relevant.

The Component Status page was completely redesigned to make it easier to see what we’re working on. We are now explicitly calling out deprecated components and will soon add a field to list its replacement. This data is powered by our own team project tracking so it will always be up-to-date.

The Updates page was also refactored using Airtable as a CMS to provide an easier space to surface Derek’s “Weekly Design System Update”. The current data is backfilled using previous entries, but beginning in January we will have more curated weekly updates as well as monthly “looking forward” and “wrap-up” summaries.

We have been working to incorporate Algolia DocSearch into the Workbench website. We’re in the final stages of structuring the content for the Algolia crawler and should be able to release it early January.

We’ve been exploring opportunities to improve the performance of the Workbench website to reduce load times and reduce layout shifting as the pages render. We were able to work with DEx to enable a proper caching strategy that reduces the amount of code users need to download.

We’ve begun drafting some performance guidelines to help engineers build more performant experiences for our users. Stay tuned!

DataGrid and Table have the same styling and similar features but have different purposes.

  • Table is great for simple data sets that require minimal user interaction. The Table component can be implemented similarly to a standard HTML table.
  • DataGrid is a separate package from other Workbench components and has an extensive API for maximum flexibility and tons of built-in UI for advanced features like searching, filtering, and bulk selection.
  • In Figma, both components are variants of the “Table” component, and you can choose from a mobile or desktop version depending on your needs.

Have questions? Want to propose changes or additions to Workbench? Need other support or advice on using the system? We’re here for you!

  • Reach out in #design-systems
  • Office hours are held Wednesdays, 1–2pm Pacific

Warmest regards,

Team DS • Ben, Brad, Daniel, Eric, Jordan, Josh, Juliann & Lise