Skip to content

Design Systems Newsletter

Lots of new components for you to enjoy:

Some upcoming gems are hanging out in the Lab:

A series of blocks created using our spacing tokens, displayed from shortest to longest

In early July we made a change to the CSS helper classes provided by the Component Library. This change replaced the Bootstrap-era naming scheme based on 5px increments with our new 4px grid that we express in terms of “spacing units”. The value of the units are also now expressed as REM units.

This change will allow designers and engineers to speak a common language and more easily implement UI based on our new design guidelines.

Example

We round down, so 15 pixels became 12 pixels, which we now refer to as 3x—or three times our spacing unit of 4 pixels (3×4 = 12). This then gets translated to REM (12 / 10 = 1.2rem).

<div class="margin-right-15px">
↓ becomes ↓
<div class="margin-right-3x">
Cover of the Figma Starter Template

This spring, we sent out a survey to Product Designers hoping to learn how the team starts new projects in Figma. We took the common themes from the survey and follow-up conversations and created a new Figma template to make starting a new project easier and more predictable.

We know searching for files and filling in text fields in Figma can be tedious, so we've also created a Figma plugin that enables you to quickly generate a starter template. To get started, create a new Figma file, right-click and run the "Gusto Starter Template" plugin.

This summer, Design Systems welcomed two new interns: Kayla Buki (engineering) and Celine Fucci (design). They have been working diligently on a replacement Tabs component—from research, to design, to engineering. Their project is now available in the Lab and will soon be available in Workbench core. We’re thrilled to have had them on our team and thank them for bringing this much-need component to Workbench.

Gusto’s new side navigation

This spring, Design Systems participated in a project to overhaul the primary navigation in Gusto. A beta was released in May to concierge customers and has now been made available to all users. Users can currently opt in/out of the beta with a toggle switch.

Usage statistics are being monitored to learn how the new nav is being used, but the Information Architecture team will likely flip the switch and make it the official nav in the next month or two. This change will also make permanent some page-level changes that make common tasks easier (such as changing the account password).

Snapshot of the IconButton page showing the new tab structure for Implementation and Usage

Earlier this year we launched our new documentation site to serve as the canonical source for understanding and using our design system. We’ve been adding content and are starting to catch up with documenting some of Workbench’s first components.

  • The documentation site was moved to its own repo, which has simplified development (who would have thought that maintaining three build systems in one repo would be problematic?!).
  • New “Usage” tab: some of the newer component documentation pages have a Usage tab with context to understand the intended purpose of the component. Not all components will need this level of detail, but some do.
  • We’re making a push to get all the form components documented in the near future and will reach parity with other components shortly thereafter.

This documentation is meant to be a self-service resource to answer any questions you have about how to use our system. Please let us know if we’re missing anything; we want it to be useful for you.

Text showing the deprecation of the Checkbox component

We continue to deprecate more and more components in the Component Library in favor of their Workbench equivalents. Storybook is very limited in its ability to call this out in the UI, but we’ve done what we can to call them out and link to docs about its replacement.

  • StepTracker
  • PercentageBar

Design Systems is hiring both designers and engineers, including an engineering PE! Know someone who might be interested? Send them our way!

Warmest regards,

Team DS • Ben, Brad, Daniel, Eric, Jordan, Josh, Juliann & Lise
#design-systems