I’m on a quest : discovering how incredible Design Systems leverage Web Components to bring quality and efficiency to all their Web projects! Today, we’ll be exploring Spectrum 2, a powerful and inspiring system created by the design giant, Adobe.
Launched in 2013, Spectrum has undergone a remarkable evolution over the past decade. Backed by Adobe’s vast experience in building at scale, Spectrum 2 embodies the latest advancements in design and development, making it a valuable resource for anyone interested in design systems and web components.
Strong Foundations and Collaborative Spirit
Spectrum 2 boasts a solid foundation built on core principles and values. This robust framework is constantly evolving to meet the needs of both Adobe and its users. The secret sauce? A dedicated team of 35 full-time members who collaborate with a vast network of hundreds of active contributors. These diverse minds bring a wealth of experience to the table, ensuring Spectrum 2 stays relevant in today’s fast-paced design landscape.
Consistency is an idea that designers think is universal, it is not. Talk to any product manager and they’ll tell you the opposite : every product wants to be different and do its own thing, designers like to innovate, people want to be creative. So, consistency, sure, to some degree, but it needs to have some principles behind it. Otherwise, it’s just like, your opinion, man.
Shawn Cheris (Sr. Director of Design @ Adobe Design) – Design System Podcast #104
Unlike some design systems managed by smaller teams, Spectrum 2 takes a flexible approach. They understand that every product is unique and requires the ability to tailor experiences. The focus isn’t on dictating how teams implement features, but rather on identifying common challenges and best practices. Once these patterns emerge, Spectrum 2 steps in to offer a unified solution. This collaborative spirit keeps the team in tune with project needs, resulting in components designed with flexibility and modularity at their core.
I think the best thing we can do is to partner with the people making new experiences, learn from the user research and the experiments that they’re doing. And then once we know that we have something that is a winning model that works for the audience that we’re trying to reach, that’s the point at which we codify it and sort of figure out what its rules are and make sure that it’s available for the next team that comes along that needs to leverage something like that.
Shawn Cheris – Design System Podcast #104
Tackling Complexities at Scale
Spectrum 2 addresses several crucial aspects of application development. Efficiency is a core focus, alongside accessibility — ensuring everyone can interact with Adobe products seamlessly. But two specific features stand out:
Adaptive Interfaces for Personalized User Experience
Spectrum 2 introduces a groundbreaking concept – the ability to personalize interface elements like contrast and density. This innovative approach fosters inclusivity by catering to individual preferences. Behind the scenes, design tokens manage hundreds of possible permutations, enabling teams to create components that adapt to project needs while accommodating user choices.
Every person is different, and we want future Adobe products to flex and adapt to personal needs and preferences.
Eric Snowden (Head of Adobe Design) – Adobe’s unveils Spectrum 2
Balancing Brand Identity with Platform Nuances
Adobe offers a wide range of software applications for various platforms, including VR. Each platform has its own strengths and interaction styles. Spectrum 2 strikes a perfect balance between brand consistency and platform-specific functionality. This ensures users have a familiar and efficient experience, whether they’re on a phone, laptop, or even in VR, while still recognizing the distinct features of each platform.
Web Components: The Future-Proof Approach
Spectrum 2’s web component implementation represents a forward-thinking approach based on web standards. A key benefit is framework agnosticism, allowing diverse teams and projects to converge towards a unified brand and coding practice. Additionally, Spectrum offers a CSS library for broader adoption, enabling developers to leverage its styles across various frameworks.
One of the primary responsibilities of Design Engineers on the SWC team is to architect and build web components that serve as the building blocks for various product teams within Adobe. This involves understanding the requirements of different products, designing components that are flexible and reusable, and implementing them in a way that promotes consistency and efficiency.
Rajdeep Chandra – Engineering with Empathy : Spectrum Design Web Engineering
Remember our discussion about web components being accessible and SSR friendly? Spectrum 2 showcases how this can be done : complex components are essentially patterns for reusing smaller, more fundamental building blocks. This approach prioritizes accessibility by keeping most content within the Light DOM, while offering flexibility through slots. This aligns perfectly with Adobe’s vision of a dynamic landscape where project needs and team structures are unique. Spectrum 2 fosters consistency while empowering teams to innovate and create new combinations of components.
By utilizing Lit, Spectrum 2’s web components maintain a small footprint while incorporating essential features for building accessible interfaces.
Diving deeper into Spectrum
I hope this deep dive into Spectrum 2 has been insightful! This design system exemplifies Adobe’s dedication to user experience, efficiency, and innovation, making it a valuable resource for anyone building modern web applications, like yourself.
The good news? Spectrum 2’s implementation, including both web components and CSS components, is open-source and readily available on GitHub. There, you’ll also find a wealth of resources on best practices for crafting software that meets Adobe’s high-quality standards. While some aspects might be more complex than necessary for smaller design systems, Spectrum 2 undoubtedly serves as a powerful source of inspiration for creating top-notch components.