![\"\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/4se0dl0LXhhxn1qE2G5i0q\/5ff663bb944caf72845098660bf9b4b5\/Shaun_Bent.png?w=60&h=68&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\nHow we acquired right here\u00a0<\/strong><\/h3>\nHow ought to we do design programs at Spotify? That\u2019s a query we\u2019ve tried to reply a number of occasions, by totally different approaches: from treating it as a one-off undertaking to having a fully-staffed design workforce and many issues in between.\u00a0<\/p>\n
In the early days of Spotify, there was no design system\u2014we have been constructing all the things for the primary time. When we launched the cell app in 2009, there have been few requirements or shared patterns in place, and the Spotify expertise began to get more and more\u2026inconsistent.<\/p>\n<\/div>\n
\n\n\n![\"02](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2o7uLudo2rbx126qdQgXNe\/bb4e246d59f37ff96dd061808c3b4331\/02_No_system.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nThis drift continued till 2013, after we kicked off our first actual try to align the visible design throughout platforms. This was an enormous effort, and it had a huge impact: we launched the signature darkish expertise<\/u><\/a>, and Spotify began to look one thing like what we\u2019re acquainted with immediately. <\/p>\n<\/div>\n\n\n\n![\"03](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2HSe6Td1J1hS9ObTCoLGtg\/89a052668d927f26ba992ab45376ca52\/03_CAT_project.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>Our 2013-14 \u201cPaint it black\u201d redesign.
\n<\/figcaption><\/figure>\n<\/div>\n\nThen in 2014-2015, the Brand and Creative workforce refreshed Spotify\u2019s model id<\/u><\/a> in a serious means. We had a brand new coloration palette, a brand new typeface (Circular), and many visible updates that wanted to be built-in into our apps. To do that, we arrange a fully-staffed workforce to create a design system for Spotify, somewhat than treating it like a one-off undertaking. We referred to as this design system GLUE, aka Global Language Unified Experience (you might have heard of this one<\/u><\/a>). <\/p>\n<\/div>\n\n\n\n![\"04](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/PxWKOREMZGWQ7akrjCf70\/06e06906c63fafd0938744db3ba1c5e7\/04_GLUE_2.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>GLUE, our first design system staffed with a full-time workforce.<\/figcaption><\/figure>\n<\/div>\n\nThe GLUE design system was successful in plenty of methods. The workforce refreshed Spotify\u2019s feel and appear, standardized a lot of our elements throughout cell and desktop, and grew from a handful of individuals to 30+ full-time engineers and designers.<\/p>\n
But there was a catch: GLUE was a single, centralized workforce. This was nice for consistency, and plenty of firms discover {that a} centralized workforce works for them. For us, although, it turned a bottleneck. Why? It comes all the way down to how the group is about up. Spotify values \u201caligned autonomy\u201d and empowers groups (squads) to make their very own choices. After some time, we noticed that having a centralized design programs workforce didn\u2019t match with this manner of working.<\/p>\n
In 2018, Spotify continued to develop, and quick.\u00a0<\/p>\n
We had 200 designers.\u00a0<\/p>\n
2000 engineers.\u00a0<\/p>\n
45 totally different platforms.\u00a0<\/p>\n
The days of designing for cell and desktop have been lengthy gone. Now we have been additionally designing for vehicles, smartwatches, audio system, and even good fridges. This was partially as a result of a brand new firm technique: ubiquity. We wished to make it doable for listeners to entry Spotify anyplace. <\/p>\n<\/div>\n
\n\n\n![\"06](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/52MUWplqDyotPyRc0cEnbl\/d05c31def99db86a08b868e02c8d44d0\/06_Platforms.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div> How many design programs are you able to consider that embrace each telephones and fridges? It\u2019s numerous stuff.
\n<\/figcaption><\/figure>\n<\/div>\n\nWith Spotify shifting in all these thrilling new instructions, we noticed a urgent want for brand spanking new elements, patterns, toolkits, and all the opposite time-saving, efficiency-boosting sources a design system gives. The challenge was the GLUE workforce had been disbanded by this level, and nobody was actively pushing the GLUE design system ahead.\u00a0<\/p>\n
That\u2019s after we entered the \u201cgrassroots\u201d section of Spotify design programs. Designers and engineers across the firm took it upon themselves to make their very own design programs. For instance, a workforce in New York began engaged on Tape, a design system for internet. (Get it? Tape? And Glue? Yes, we love a pun.)\u00a0 A workforce in Stockholm began a unique system for design tokens; and so forth. <\/p>\n<\/div>\n
\n\n\n![\"07](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5rZWa4WegYTyQGfZqMDxBI\/cba20c3cf640bb254c44fd668dc223d5\/07_Design_systems_overview.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>Examples of our design programs ca. 2018.<\/figcaption><\/figure>\n<\/div>\n\nPlenty of nice work went into these ground-up efforts, and we\u2019re nonetheless utilizing components of those programs immediately. But this extraordinarily decentralized, \u201ceveryone make your own\u201d strategy wasn\u2019t sustainable. At one level, we counted 22 totally different design programs<\/i> floating round. Can you think about being a brand new designer or engineer and asking, \u201cHey, do we have a design system?\u201d and the reply is, \u201cYeah, we actually have 22\u201d? Pretty complicated.\u00a0<\/p>\nLet\u2019s give it one other go\u00a0<\/strong><\/h3>\nSpotify actually wanted a helpful, unified <\/i>design system\u2014however we knew {that a} centralized workforce like GLUE most likely wouldn\u2019t work. So, in 2018, we kicked off a brand new effort to create a design system for the corporate.\u00a0<\/p>\n
This time, we wished to design<\/i> our design system, identical to we\u2019d design considered one of our product experiences. We weren\u2019t beginning with a very clean slate, although. We wished to consolidate the sources we had, and create a system that felt unified, accessible, collaborative, and primarily based on a coherent imaginative and prescient.\u00a0<\/p>\n
Most importantly, we wished a system that will match with Spotify\u2019s tradition of autonomy\u2014one which\u00a0 might scale throughout a number of platforms and use instances.\u00a0\u00a0<\/p>\n
Which brings us to Encore.<\/p>\n<\/div>\n
\n\n\n![\"08](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/14MzhhmPPfaeSbeSxPL3u2\/d9cf318bce9bcb2e800b8107e7de3526\/08_Encore.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nIntroducing Encore<\/strong><\/h3>\nEncore is the household of design programs that has all the things groups must construct lovely, scalable Spotify apps.\u00a0<\/p>\n
What\u2019s totally different about Encore is that it isn\u2019t a single monolithic factor. It\u2019s a framework that brings Spotify\u2019s current design programs below one model\u2014a \u201csystem of systems.\u201d\u00a0<\/p>\n<\/div>\n
\n\n\n![\"09](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/6Ef2okSnxI3AtLvd682VTo\/f8b25e6a7fce25f5d09e69d94491e92f\/09_Encore_framework.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nThere are a number of design programs inside Encore, every managed by a unique workforce across the firm. And whereas these groups preserve the totally different programs, anybody who builds merchandise at Spotify can contribute.\u00a0<\/p>\n
So is Encore Spotify\u2019s \u201cnew design system\u201d? Not precisely. The framework is new, however Encore really reuses numerous the nice that went into our earlier design programs. We\u2019ve both straight-up rebranded them or extracted components of them to create the brand new Encore programs.<\/p>\n
The totally different programs keep related as a result of they\u2019re all constructed utilizing design tokens<\/u><\/a>, they usually dwell on the identical web site, following the same construction outlined by the Encore framework. Before, we had 22 disconnected design programs; now, we nonetheless have a number of programs, however they\u2019re all related and below the identical umbrella.\u00a0<\/p>\nDesign programs inside Encore<\/strong><\/h3>\nHere’s what Encore appears like below the hood.<\/p>\n
Encore Foundation<\/strong><\/h3>\nAt the middle, we’ve got Encore Foundation<\/strong>. It\u2019s the place we maintain issues like coloration, kind kinds, movement, spacing, plus tips for writing and accessibility. It\u2019s additionally the place our design tokens dwell. These are issues everybody ought to use\u2014it\u2019s what makes Spotify appear to be Spotify. Using Encore Foundation is the minimal bar for each Spotify product.<\/p>\n<\/div>\n\n\n\n![\"10](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2msFttaR8Qb7F6efZ3BrI2\/981e8cd64d2302f92a2a25478aa2f17e\/10_Encore_Foundation.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nEncore Web<\/strong><\/h3>\nNext up, we’ve got Encore Web. It provides all of the issues present in typical internet design programs: buttons, dialogs, kinds controls, and extra. These elements can be utilized in something that\u2019s constructed utilizing internet tech\u2014from internet apps to web sites, our desktop shopper, and, sure, even the fridge app.\u00a0<\/p>\n
Encore Web has the shared sources for our web-based platforms, nevertheless it additionally <\/i>consists of all the things from Foundation. The elements are constructed utilizing tokens, they usually comply with the patterns and tips outlined in Foundation. So the programs aren\u2019t stand-alone issues: they\u2019re related.\u00a0<\/p>\n<\/div>\n\n\n\n![\"11](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/bCLd8oHrROvM2ozLDmIsL\/a17c41ac763f90df3addbfe63a6fa464\/11_Encore_Web.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nEncore Mobile<\/strong><\/h3>\nWe\u2019re nonetheless defining this one\u2014much like Encore Web, we envision this being the place for frequent elements which can be shared throughout a number of cell apps.<\/p>\n<\/div>\n
\n\n\n![\"11](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/YDzdbPsGU29TyYkKsAWUv\/98fb13ca2c3f75f05eda40c636117515\/12_Encore_Mobile.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nLocal design programs\u00a0<\/strong><\/h3>\nBut that\u2019s not all, people. In this subsequent layer, Encore additionally incorporates what we name \u201clocal design systems.\u201d Local programs are a spot to maintain design parts which can be tailor-made for particular merchandise or audiences. These are issues that have to be shared\u2014simply not shared throughout all <\/i>of Spotify. <\/p>\n<\/div>\n\n\n\n![\"13](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3IcAdjlOLETtjUedxyGZPY\/e1f53220682c5fea4fea8a60aee9ae47\/13_Local_systems.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nSome internet elements are solely utilized in experiences for artists or podcasters (for instance, the Spotify for Artists<\/u><\/a> app may have a particular navigation sample or desk format). With the Encore framework, we will maintain customized design parts in an area system so all of the groups engaged on Spotify for Artists can share them.\u00a0<\/p>\nIt\u2019s the same concept on the cell facet. There are plenty of groups engaged on the primary Spotify app, so there\u2019s an enormous want for shared cell elements and patterns. These design parts dwell inside an area system that\u2019s tailor-made to the platform (iOS and Android cell apps) and viewers (individuals who take heed to music and podcasts).<\/p>\n
Right now we’ve got two native programs, however we don\u2019t assume that is the ultimate set. With Encore, we will add further native programs if wanted\u2014for instance, sooner or later we could add native programs for stand-alone apps like Spotify Kids<\/u><\/a> and Stations<\/u><\/a>. The key’s that they keep related, and that they\u2019re all accessible in the identical place (the Encore web site).\u00a0<\/p>\n<\/div>\n\n\n\n![\"14](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/75FIsXkz5CGt5mv6uEswKC\/d03874a631ab78a7d5a8608cae46d15c\/14_Inside_systems.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\nTo recap, every of the small circles above is a totally fledged design system that:<\/p>\n
\n- \n
Provides design belongings, code, and documentation\u00a0<\/p>\n<\/li>\n
- \n
Builds on the opposite programs\u00a0<\/p>\n<\/li>\n
- \n
Is actively maintained by a devoted workforce<\/p>\n<\/li>\n
- \n
Has an outlined interface for engineers to work with<\/p>\n<\/li>\n<\/ul>\n
This underlying construction is essential for the success of the general Encore program, nevertheless it\u2019s not one thing everybody must learn about. If you\u2019re a designer, engineer, or author at Spotify, you\u2019d simply decide the Encore design system that\u2019s related to you, then dive into the shared sources. <\/p>\n<\/div>\n
\n\n\n![\"15](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7xaoK0Enf9olIOX3Boxmfh\/f3af6beb12ff3735f2923f670c65695f\/15_Encore_website1.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n\n\n![\"15](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7houG2LcNp7hPMUya2u0KM\/a6cf2562d0d198eaded9b978355a9eb0\/15_Encore_website2.png?w=1000&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\nHere\u2019s what the interior Encore web site appears like.<\/p>\n<\/div>\n
\nSome last ideas<\/strong><\/h3>\nWe noticed that as Spotify\u2019s visible language and product technique developed, our design programs needed to change too. We\u2019ve seen how a design system isn\u2019t one-size-fits-all<\/u><\/a>\u2014it must be tailor-made to the corporate\u2019s wants.\u00a0<\/p>\nPerhaps the most important lesson for us was how essential it’s to grasp the corporate tradition and adapt to it. For a design system to work, it must embrace the corporate\u2019s traits and peculiarities. For us, that meant acknowledging the large product panorama we dwell in and the autonomous methods during which our groups work. Rather than having a single system or workforce, we consider it\u2019s higher for Spotify to have a household of design programs, taken care of by a number of distributed groups.<\/p>\n
This is only the start, and there\u2019s loads to determine as we transfer ahead with constructing our system of programs. While Encore isn\u2019t publicly accessible proper now, we\u2019ll maintain sharing what we study as we go\u2014so keep tuned for future posts!<\/p>\n
P.S. Want to affix us in benefiting from Encore? Check out our open roles.<\/u><\/a><\/p>\n\u2014<\/p>\n
Big due to everybody who\u2019s labored on Spotify\u2019s design programs over time! Design programs are a workforce sport, and we\u2019ve had numerous gamers…too many to call, however you understand who you’re.\u00a0<\/i><\/p>\n<\/div>\n\nCredits<\/h2>\n\n\n![\"Gerrit](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2CeIehJwYTLgtxzM31BrRe\/ac7e1fed0436df697844ed668d4d8c6b\/Gerrit_Kaiser.png?w=240&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n\nGerrit Kaiser<\/h3>\n
Senior Design Manager<\/span><\/p>\nGerrit\u2019s design programs considering acquired out of hand when he began serving deconstructed Swedish meatballs laid out on a grid.<\/p>\n
Read More<\/a><\/div>\n<\/div>\n\n\n![\"Marina](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/721j6yCWbnVKc6Jexu4y8l\/76dcb8fc291e517630dfb74010a09a95\/Marina_Posniak.png?w=240&q=96\")
<\/picture><\/noscript><\/div>\n<\/div>\n\nMarina Posniak <\/h3>\n
Principal UX Writer<\/span><\/p>\nMarina\u2019s work focuses on the intersection of language, design programs, and consumer expertise. She lives in Gothenburg, and loves all issues Scandinavian.<\/p>\n
![\"02](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2o7uLudo2rbx126qdQgXNe\/bb4e246d59f37ff96dd061808c3b4331\/02_No_system.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nThis drift continued till 2013, after we kicked off our first actual try to align the visible design throughout platforms. This was an enormous effort, and it had a huge impact: we launched the signature darkish expertise<\/u><\/a>, and Spotify began to look one thing like what we\u2019re acquainted with immediately. <\/p>\n<\/div>\n Then in 2014-2015, the Brand and Creative workforce refreshed Spotify\u2019s model id<\/u><\/a> in a serious means. We had a brand new coloration palette, a brand new typeface (Circular), and many visible updates that wanted to be built-in into our apps. To do that, we arrange a fully-staffed workforce to create a design system for Spotify, somewhat than treating it like a one-off undertaking. We referred to as this design system GLUE, aka Global Language Unified Experience (you might have heard of this one<\/u><\/a>). <\/p>\n<\/div>\n The GLUE design system was successful in plenty of methods. The workforce refreshed Spotify\u2019s feel and appear, standardized a lot of our elements throughout cell and desktop, and grew from a handful of individuals to 30+ full-time engineers and designers.<\/p>\n But there was a catch: GLUE was a single, centralized workforce. This was nice for consistency, and plenty of firms discover {that a} centralized workforce works for them. For us, although, it turned a bottleneck. Why? It comes all the way down to how the group is about up. Spotify values \u201caligned autonomy\u201d and empowers groups (squads) to make their very own choices. After some time, we noticed that having a centralized design programs workforce didn\u2019t match with this manner of working.<\/p>\n In 2018, Spotify continued to develop, and quick.\u00a0<\/p>\n We had 200 designers.\u00a0<\/p>\n 2000 engineers.\u00a0<\/p>\n 45 totally different platforms.\u00a0<\/p>\n The days of designing for cell and desktop have been lengthy gone. Now we have been additionally designing for vehicles, smartwatches, audio system, and even good fridges. This was partially as a result of a brand new firm technique: ubiquity. We wished to make it doable for listeners to entry Spotify anyplace. <\/p>\n<\/div>\n With Spotify shifting in all these thrilling new instructions, we noticed a urgent want for brand spanking new elements, patterns, toolkits, and all the opposite time-saving, efficiency-boosting sources a design system gives. The challenge was the GLUE workforce had been disbanded by this level, and nobody was actively pushing the GLUE design system ahead.\u00a0<\/p>\n That\u2019s after we entered the \u201cgrassroots\u201d section of Spotify design programs. Designers and engineers across the firm took it upon themselves to make their very own design programs. For instance, a workforce in New York began engaged on Tape, a design system for internet. (Get it? Tape? And Glue? Yes, we love a pun.)\u00a0 A workforce in Stockholm began a unique system for design tokens; and so forth. <\/p>\n<\/div>\n Plenty of nice work went into these ground-up efforts, and we\u2019re nonetheless utilizing components of those programs immediately. But this extraordinarily decentralized, \u201ceveryone make your own\u201d strategy wasn\u2019t sustainable. At one level, we counted 22 totally different design programs<\/i> floating round. Can you think about being a brand new designer or engineer and asking, \u201cHey, do we have a design system?\u201d and the reply is, \u201cYeah, we actually have 22\u201d? Pretty complicated.\u00a0<\/p>\n Spotify actually wanted a helpful, unified <\/i>design system\u2014however we knew {that a} centralized workforce like GLUE most likely wouldn\u2019t work. So, in 2018, we kicked off a brand new effort to create a design system for the corporate.\u00a0<\/p>\n This time, we wished to design<\/i> our design system, identical to we\u2019d design considered one of our product experiences. We weren\u2019t beginning with a very clean slate, although. We wished to consolidate the sources we had, and create a system that felt unified, accessible, collaborative, and primarily based on a coherent imaginative and prescient.\u00a0<\/p>\n Most importantly, we wished a system that will match with Spotify\u2019s tradition of autonomy\u2014one which\u00a0 might scale throughout a number of platforms and use instances.\u00a0\u00a0<\/p>\n Which brings us to Encore.<\/p>\n<\/div>\n Encore is the household of design programs that has all the things groups must construct lovely, scalable Spotify apps.\u00a0<\/p>\n What\u2019s totally different about Encore is that it isn\u2019t a single monolithic factor. It\u2019s a framework that brings Spotify\u2019s current design programs below one model\u2014a \u201csystem of systems.\u201d\u00a0<\/p>\n<\/div>\n There are a number of design programs inside Encore, every managed by a unique workforce across the firm. And whereas these groups preserve the totally different programs, anybody who builds merchandise at Spotify can contribute.\u00a0<\/p>\n So is Encore Spotify\u2019s \u201cnew design system\u201d? Not precisely. The framework is new, however Encore really reuses numerous the nice that went into our earlier design programs. We\u2019ve both straight-up rebranded them or extracted components of them to create the brand new Encore programs.<\/p>\n The totally different programs keep related as a result of they\u2019re all constructed utilizing design tokens<\/u><\/a>, they usually dwell on the identical web site, following the same construction outlined by the Encore framework. Before, we had 22 disconnected design programs; now, we nonetheless have a number of programs, however they\u2019re all related and below the identical umbrella.\u00a0<\/p>\n Here’s what Encore appears like below the hood.<\/p>\n At the middle, we’ve got Encore Foundation<\/strong>. It\u2019s the place we maintain issues like coloration, kind kinds, movement, spacing, plus tips for writing and accessibility. It\u2019s additionally the place our design tokens dwell. These are issues everybody ought to use\u2014it\u2019s what makes Spotify appear to be Spotify. Using Encore Foundation is the minimal bar for each Spotify product.<\/p>\n<\/div>\n Next up, we’ve got Encore Web. It provides all of the issues present in typical internet design programs: buttons, dialogs, kinds controls, and extra. These elements can be utilized in something that\u2019s constructed utilizing internet tech\u2014from internet apps to web sites, our desktop shopper, and, sure, even the fridge app.\u00a0<\/p>\n Encore Web has the shared sources for our web-based platforms, nevertheless it additionally <\/i>consists of all the things from Foundation. The elements are constructed utilizing tokens, they usually comply with the patterns and tips outlined in Foundation. So the programs aren\u2019t stand-alone issues: they\u2019re related.\u00a0<\/p>\n<\/div>\n We\u2019re nonetheless defining this one\u2014much like Encore Web, we envision this being the place for frequent elements which can be shared throughout a number of cell apps.<\/p>\n<\/div>\n But that\u2019s not all, people. In this subsequent layer, Encore additionally incorporates what we name \u201clocal design systems.\u201d Local programs are a spot to maintain design parts which can be tailor-made for particular merchandise or audiences. These are issues that have to be shared\u2014simply not shared throughout all <\/i>of Spotify. <\/p>\n<\/div>\n Some internet elements are solely utilized in experiences for artists or podcasters (for instance, the Spotify for Artists<\/u><\/a> app may have a particular navigation sample or desk format). With the Encore framework, we will maintain customized design parts in an area system so all of the groups engaged on Spotify for Artists can share them.\u00a0<\/p>\n It\u2019s the same concept on the cell facet. There are plenty of groups engaged on the primary Spotify app, so there\u2019s an enormous want for shared cell elements and patterns. These design parts dwell inside an area system that\u2019s tailor-made to the platform (iOS and Android cell apps) and viewers (individuals who take heed to music and podcasts).<\/p>\n Right now we’ve got two native programs, however we don\u2019t assume that is the ultimate set. With Encore, we will add further native programs if wanted\u2014for instance, sooner or later we could add native programs for stand-alone apps like Spotify Kids<\/u><\/a> and Stations<\/u><\/a>. The key’s that they keep related, and that they\u2019re all accessible in the identical place (the Encore web site).\u00a0<\/p>\n<\/div>\n To recap, every of the small circles above is a totally fledged design system that:<\/p>\n Provides design belongings, code, and documentation\u00a0<\/p>\n<\/li>\n Builds on the opposite programs\u00a0<\/p>\n<\/li>\n Is actively maintained by a devoted workforce<\/p>\n<\/li>\n Has an outlined interface for engineers to work with<\/p>\n<\/li>\n<\/ul>\n This underlying construction is essential for the success of the general Encore program, nevertheless it\u2019s not one thing everybody must learn about. If you\u2019re a designer, engineer, or author at Spotify, you\u2019d simply decide the Encore design system that\u2019s related to you, then dive into the shared sources. <\/p>\n<\/div>\n Here\u2019s what the interior Encore web site appears like.<\/p>\n<\/div>\n We noticed that as Spotify\u2019s visible language and product technique developed, our design programs needed to change too. We\u2019ve seen how a design system isn\u2019t one-size-fits-all<\/u><\/a>\u2014it must be tailor-made to the corporate\u2019s wants.\u00a0<\/p>\n Perhaps the most important lesson for us was how essential it’s to grasp the corporate tradition and adapt to it. For a design system to work, it must embrace the corporate\u2019s traits and peculiarities. For us, that meant acknowledging the large product panorama we dwell in and the autonomous methods during which our groups work. Rather than having a single system or workforce, we consider it\u2019s higher for Spotify to have a household of design programs, taken care of by a number of distributed groups.<\/p>\n This is only the start, and there\u2019s loads to determine as we transfer ahead with constructing our system of programs. While Encore isn\u2019t publicly accessible proper now, we\u2019ll maintain sharing what we study as we go\u2014so keep tuned for future posts!<\/p>\n P.S. Want to affix us in benefiting from Encore? Check out our open roles.<\/u><\/a><\/p>\n \u2014<\/p>\n Big due to everybody who\u2019s labored on Spotify\u2019s design programs over time! Design programs are a workforce sport, and we\u2019ve had numerous gamers…too many to call, however you understand who you’re.\u00a0<\/i><\/p>\n<\/div>\n Senior Design Manager<\/span><\/p>\n Gerrit\u2019s design programs considering acquired out of hand when he began serving deconstructed Swedish meatballs laid out on a grid.<\/p>\n Read More<\/a><\/div>\n<\/div>\n Principal UX Writer<\/span><\/p>\n Marina\u2019s work focuses on the intersection of language, design programs, and consumer expertise. She lives in Gothenburg, and loves all issues Scandinavian.<\/p>\n![\"03](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2HSe6Td1J1hS9ObTCoLGtg\/89a052668d927f26ba992ab45376ca52\/03_CAT_project.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>
\n<\/figcaption><\/figure>\n<\/div>\n![\"04](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/PxWKOREMZGWQ7akrjCf70\/06e06906c63fafd0938744db3ba1c5e7\/04_GLUE_2.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>![\"06](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/52MUWplqDyotPyRc0cEnbl\/d05c31def99db86a08b868e02c8d44d0\/06_Platforms.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>
\n<\/figcaption><\/figure>\n<\/div>\n![\"07](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5rZWa4WegYTyQGfZqMDxBI\/cba20c3cf640bb254c44fd668dc223d5\/07_Design_systems_overview.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>Let\u2019s give it one other go\u00a0<\/strong><\/h3>\n
![\"08](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/14MzhhmPPfaeSbeSxPL3u2\/d9cf318bce9bcb2e800b8107e7de3526\/08_Encore.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nIntroducing Encore<\/strong><\/h3>\n
![\"09](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/6Ef2okSnxI3AtLvd682VTo\/f8b25e6a7fce25f5d09e69d94491e92f\/09_Encore_framework.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nDesign programs inside Encore<\/strong><\/h3>\n
Encore Foundation<\/strong><\/h3>\n
![\"10](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2msFttaR8Qb7F6efZ3BrI2\/981e8cd64d2302f92a2a25478aa2f17e\/10_Encore_Foundation.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nEncore Web<\/strong><\/h3>\n
![\"11](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/bCLd8oHrROvM2ozLDmIsL\/a17c41ac763f90df3addbfe63a6fa464\/11_Encore_Web.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nEncore Mobile<\/strong><\/h3>\n
![\"11](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/YDzdbPsGU29TyYkKsAWUv\/98fb13ca2c3f75f05eda40c636117515\/12_Encore_Mobile.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\nLocal design programs\u00a0<\/strong><\/h3>\n
![\"13](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3IcAdjlOLETtjUedxyGZPY\/e1f53220682c5fea4fea8a60aee9ae47\/13_Local_systems.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n![\"14](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/75FIsXkz5CGt5mv6uEswKC\/d03874a631ab78a7d5a8608cae46d15c\/14_Inside_systems.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n\n
![\"15](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7xaoK0Enf9olIOX3Boxmfh\/f3af6beb12ff3735f2923f670c65695f\/15_Encore_website1.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"15](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7houG2LcNp7hPMUya2u0KM\/a6cf2562d0d198eaded9b978355a9eb0\/15_Encore_website2.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\nSome last ideas<\/strong><\/h3>\n
Credits<\/h2>\n
![\"Gerrit](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2CeIehJwYTLgtxzM31BrRe\/ac7e1fed0436df697844ed668d4d8c6b\/Gerrit_Kaiser.png?w=60&h=68&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\nGerrit Kaiser<\/h3>\n
![\"Marina](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/721j6yCWbnVKc6Jexu4y8l\/76dcb8fc291e517630dfb74010a09a95\/Marina_Posniak.png?w=60&h=68&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\nMarina Posniak <\/h3>\n