Sparkbox partnered with Adobe to support their Spectrum design system, Adobe's comprehensive system used internally for major products including Photoshop, Express, and Firefly. What started as a small engagement evolved into a multi-year client relationship focused on advancing the Spectrum design system infrastructure.
The Spectrum Challenge
When Sparkbox initially engaged with Adobe, the Spectrum design system work was divided between two teams: a CSS team handling Spectrum styling and a Web Components team that adapted and consumed the Spectrum CSS styles. Our early work with Adobe included working within the CSS team to migrate from one token system to another.
Eventually, we began migrating from Spectrum 1 to Spectrum 2, writing updated styles for a new version of the design system that the web components team could consume. This ended up being a much larger undertaking than anticipated; Spectrum 2 incorporated many more markup changes and new features, which made writing new code to continue adapting styles for web components impractical. Because of this, and because the original engineers who had built the system to adapt styles to Spectrum Web Components (SWC) had moved on, it was a natural choice to create a new, modern system more compatible with Adobe’s future plans and accessibility needs.
To create the new system, Adobe decided to merge the CSS and SWC teams. This enabled better knowledge sharing around Spectrum development, allowing engineers to write CSS specifically optimized for the unique challenges of web components rather than adapting existing styles after the fact.
The Embedded Approach
Sparkbox team members were closely embedded within Adobe's Spectrum teams at every stage. This approach proved essential for design system work, which required deep understanding of both technical implementation, strategic goals, and design intent. Team members participated in Spectrum-focused planning sessions, identified needed work independently, and executed solutions with minimal oversight.
The team demonstrated exceptional attention to detail in Spectrum component work, consistently receiving recognition for their code review skills. Their natural curiosity led them to explore edge cases in other Spectrum implementations, and their adaptability enabled collaboration with multiple teams.
Key Spectrum Accomplishments
Sparkbox worked collaboratively with Adobe to migrate approximately 75% of the Spectrum CSS components to the Spectrum 2 design language, focusing on components that matched the Spectrum Web Components team's needs.
The original plan was to continue with writing styles for Spectrum 2 that would be consumed by the web components team the same way they had for Spectrum 1. The 75% of components that were migrated were all done in Spectrum CSS, in the background. When the Adobe leadership team decided that CSS and web components ought to combine teams, that meant we should write styles directly for web components, which was slightly different than we had previously.
At this point, it became clear that our existing migration work would need to change a lot to fit the new system, but that work (along with us, because we'd done the work) still held a lot of the knowledge about what needed to change from Spectrum 1 to Spectrum 2. That's where the component analysis came in. We wanted to make it as easy as possible for the team to have that knowledge without having to comb through the code, so we used AI to help generate some documentation that held that knowledge, so that engineers (and their AI coding assistants) could understand what was changing more easily and plan component migrations on the new system.
Another major undertaking was consolidating Spectrum documentation. Before combining the CSS and web component teams, Adobe had been maintaining both a separate documentation site and Storybook for Spectrum CSS components, creating maintenance overload. Sparkbox led a six-month effort to unify all documentation into a single Storybook system, ensuring no information was lost while creating a single source of truth for the Spectrum design system. This effort laid the foundation for the combined team’s Storybook system.
Impact and Results
Sparkbox's work significantly advanced Adobe's Spectrum design system capabilities. The unified documentation system and migration of Spectrum components created an improved developer experience for folks working with Spectrum. Most importantly, Sparkbox helped Adobe to establish new standards for quality and process excellence in Spectrum design system work. There’s now a foundation for continued advancement of Adobe's design system capabilities, and we’ve demonstrated the potential for meaningful collaboration in design system development.