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
A screenshot of the Card and Panel components

One of Gusto’s most common building blocks is now available in Workbench. Card has been given an “opinionated” makeover to create distinct content regions that make Cards easier and more predictable for our users. The new Card improves on accessibility by allowing heading levels to be customized according to the page context.

Panel is designed as a more flexible counterpart to Card. It also meant to create a visual separation between groups of content, but it lacks a box shadow and doesn’t use predefined content regions.

Check out Card | Check out Panel

We recently released the Heading component, which empowers engineers to create proper heading hierarchies using typographic design tokens. In other words: it’s now easier to build accessible page structures that can be styled as the designer sees fit. An h2 no longer needs to look the same—it can now be styled using any of our typographic tokens meant for headings.

Check out Heading

New icons
  • VeryHappy
  • VeryUnhappy
  • Covid19
  • Video

Check out the icons

New illustrations
  • DeviceDesktop
  • DeviceLaptop
  • DeviceMobile
  • DeviceTablet
  • Warning

Check out the illustrations

The cover of the Workbench UI Kit
  • Lab components have been moved from the Workbench Web UI Kit to their own file.
  • We’re making changes to how we structure components in Figma. Check out the Loom videos for Card and Panel to see how it works.
  • The Ideas page was removed from the Workbench Web UI Kit. Future explorations will instead live within their corresponding design proposal files.
  • Detailed release notes are now available with each update.

Autocomplete was initially built as a spike to suss out some ideas, but it was deprioritized below other components and has been lingering in Lab for the better part of two years. Fortunately we’re starting to work on it, but have determined that we want to take it in a different direction. Several teams have already implemented the Lab component, so we will temporarily keep it around and rename it DeprecatedAutocomplete. Implementations of DeprecatedAutocomplete will eventually be replaced with the new component.

Reach out to us in #design-systems with any questions.
Josh Cusick

Design Systems started out the new year with a new designer. Josh Cusick joins us from Microsoft and brings a fresh perspective on managing design assets in large systems. He is currently working from Seattle, but will soon relocate to Florida. Say hi! 👋

Design Systems is hiring a Senior Product Designer. Know someone who might be interested? Send them our way!

The search bar on the Workbench website

In January we added Algolia DocSearch to the Workbench website, allowing you to quickly and easily find what you’re looking for. Let us know if you see some confusing results and we’ll get them tidied up.

Testing snippets have been added to most component pages. These snippets are suggestions for testing the components using React Testing Library with occasional help from Jest. Certain static components—Box and Flex, for example—won’t have tests as they aren’t interactive and function more as utilities.

Check out Link testing docs

  • We fixed spacing guidance (and examples) between form fields from 24px to 12px

Lab is our prototyping environment where we publish experiments that we test amongst ourselves and with specific early adopters. Components in Lab frequently undergo changes to design and the underlying API, making them less stable and not suitable for widespread adoption. That said, we’re always looking for teams willing to partner with us and kick the tires on our latest ideas, so reach out to us in #design-systems if you see something you’d like to try out.

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