Can you believe we’ve already entered Q2?! This year is flying by and the Design Systems team has a few things we’re excited to share from Q1.

The Future of Design Systems at Sprout Social

You may have noticed: Our team is growing. As Sprout continues to scale so does the scope of our design system.

To build into this future, our team needs to shift our focus to think laterally across our product platform. While we work on the breadth of the Design System’s components, patterns and systems, you--our product partners--can focus on the depth of your features and how these elements support and accelerate your work.

This future vision promises that everyone can contribute to the system and share their deep thinking, and all Sprout teams will benefit.

Dark Mode

Along with our partners in the Web Working Group, we’ve been hard at work introducing Dark Mode in Racine. We’ve just kicked off partnering with our Dark Mode Ambassadors (👋 , Zone Ambassadors!) as we implement Dark Mode in the Sprout web app.

So far, we have:

• Created two new semantic color themes for both light and dark mode with fully functional Flow support
• Refactored Racine to use these semantic themes, including data visualization
• Replaced thousands of instances of literal or hard-coded color values within the web app
• Refactored our design tokens in Seeds Packets to support these new semantic themes
• Provided a SCSS solution for Dark Mode

Dark Mode is more than just easy on the eyes: It’s helpful for users with vision impairments, makes contextual decision making easier, puts us at a competitive advantage in the market and satisfies some excited customers.

Curious to know more? Want to learn how Twitter and others are going even darker? Learn more about Dark Mode in this Product Review presentation.

System Updates

Our strategic focus for the first half of 2022 is to establish a healthy baseline for Seeds as a product. Here are some of the steps we’ve taken towards that goal:

• Introduced semantic colors in Racine for future themability (👋  Hello, Dark Mode!)
• Elevated all Racine components to meet WCAG 2.1 AA compliance.
• Shipped a number of component fixes (a.k.a. “quick wins”) to improve the Sprout developer experience (💅  OK, intuitive menu button placement and badge text!)

Finally, we introduced the Design Systems Team as Codeowners of Racine, Seeds and Seeds Packets. This change is to ensure that the Design Systems team is aware of updates made to shared core resources and how these updates impact the system as a whole.

Team Updates

Since our last newsletter, our team has almost tripled in size from three to eight(!). We’re now a crew of designers, product managers, and engineers, who maintain and enhance our design system so that great Sprout experiences get in our customers’ hands faster.

Say hello to our mighty Design Systems team:

• Amber Stickel, Product Design Manager
• Bill Foehring, Staff Design Engineer
• Caitlin Grogan, Group Product Manager
• Cory Faller, Senior Engineering Manager
• Lucas Mosele, Design Engineer
• Mich Elliott, Senior Web Engineer
• Nathan Sanders, Staff Product Designer
• Ozzy Cardenas, Web Engineer

We’re also still hiring for our next Senior/Staff Web Engineer! Please reach out to James Basco if you know someone who might be interested.

What’s next

• Shore up our core design system, define its health criteria, audit and remediate its current quality and parity gaps
• Streamline our existing release processes so that we can ship faster and more reliably to Racine and the web app
• Continue to establish our enhanced collaboration across the product org by focusing on initiatives that improve our customer experience, such as supporting the Dark Mode implementation and introducing a new Sprout-branded icon library

Thanks for reading! If you have any questions, please reach out to the Design Systems team in Slack via the #design-systems channel.

Have questions, feedback, or ideas for the Design Systems team? Send us an email or check out our wiki page to learn more about the team.

If you would like to unsubscribe from this newsletter, please send an email to design-systems-newsletter+unsubscribe@sproutsocial.com.