Andrew's Digital Garden

Encore at Spotify

It’s a framework that brings Spotify’s existing design systems under one brand—a “system of systems.”

Each part of the Encore family is managed by a distributed team and typically inherits from another Encore system, starting from Foundation and working its way out.

First layer: Encore Foundation is design tokens, motion, guidelines, spacing, etc. Everything uses this.

Second layer: Encore Web is everything for typical web design systems. Buttons, dialogs, forms, etc. Anything built from web tech, including the desktop client. Encore Mobile like web, but for native mobile.

Third layer: Encore also has 'local design systems'. A layer to keep design elements that are tailored for specific products or audiences. Shared, but not shared across everything.

Each layer builds on the previous, and provides assets, code, documentation, etc. Each is also actively maintained by a dedicated team to avoid bottlenecks from a single, central DS. This allows for more flexibility and maintainability. Not everything needs to be added to the core, nor does it need to be owned by a single team that may not work in the domain. Working with [[20211029153348-semantic-design-tokens]] is important here.

https://spotify.design/article/reimagining-design-systems-at-spotify https://spotify.design/article/can-i-get-an-encore-spotifys-design-system-three-years-on

https://engineering.atspotify.com/2021/04/customization-vs-configuration-in-evolving-design-systems/ https://engineering.atspotify.com/2023/05/multiple-layers-of-abstraction-in-design-systems/

[[designsystem]] [[designsystemapi]] [[designsystembranding]]

Encore at Spotify