In 2018, Spotify continued to grow, and fast. The days of designing for mobile and desktop were long gone. Now we were also designing for cars, smartwatches, speakers, and even smart fridges. This was in part due to a new company strategy: ubiquity. We wanted to make it possible for listeners to access Spotify anywhere.Ī lot of great work went into these ground-up efforts, and we’re still using parts of these systems today. But this extremely decentralized, “everyone make your own” approach wasn’t sustainable. At one point, we counted 22 different design systems floating around. Can you imagine being a new designer or engineer and asking, “Hey, do we have a design system?” and the answer is, “Yeah, we actually have 22”? Pretty confusing. Spotify really needed a useful, unified design system-but we knew that a centralized team like GLUE probably wouldn’t work. So, in 2018, we kicked off a new effort to create a design system for the company.

This time, we wanted to design our design system, just like we’d design one of our product experiences. We weren’t starting with a completely blank slate, though. We wanted to consolidate the resources we had, and create a system that felt unified, accessible, collaborative, and based on a coherent vision. Most importantly, we wanted a system that would fit with Spotify’s culture of autonomy-one that could scale across multiple platforms and use cases. There are several design systems inside Encore, each managed by a different team around the company. And while these teams maintain the different systems, anyone who builds products at Spotify can contribute. So is Encore Spotify’s “new design system”? Not exactly. The framework is new, but Encore actually reuses a lot of the great that went into our previous design systems. We’ve either straight-up rebranded them or extracted parts of them to create the new Encore systems. The different systems stay connected because they’re all built using design tokens, and they live on the same website, following a similar structure defined by the Encore framework. Before, we had 22 disconnected design systems now, we still have multiple systems, but they’re all connected and under the same umbrella. Here's what Encore looks like under the hood. Encore FoundationĪt the center, we have Encore Foundation. It’s where we keep things like color, type styles, motion, spacing, plus guidelines for writing and accessibility. #Spotify color palette based on my music plus# #Spotify color palette based on my music plus#.

Gamecih 3.0.3