https://sparkbox.com/_next/static/chunks/pages/success-stories/adobe-spectrum-47ed2eb419a8ef2e.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[501],{6373:function(e,t,i){"use strict";i.r(t),i.d(t,{__N_SSG:function(){return l}});var a=i(9008),s=i.n(a),n=i(9332),o=i(5893),l=!0;t.default=function(e){var t,i,a=e.title,l=e.description,r=e.seo,c=null!==(t=null==r?void 0:r.title)&&void 0!==t?t:"Sparkbox - Building a Better Web through Partnerships",d=null!==(i=null==r?void 0:r.description)&&void 0!==i?i:"Sparkbox works with enterprise‑level clients to provide the benefit of our years of experience and our best new ideas. Got a problem? Let’s solve it together.";return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s(),{children:[(0,o.jsx)("title",{children:c}),(0,o.jsx)("meta",{name:"description",content:d}),(0,o.jsx)("meta",{property:"og:title",content:c}),(0,o.jsx)("meta",{property:"og:description",content:d}),(0,o.jsx)("meta",{property:"og:type",content:"website"}),(0,o.jsx)("meta",{property:"og:url",content:"https://sparkbox.com".concat((0,n.usePathname)())}),(0,o.jsx)("meta",{property:"og:locale",content:"en_US"}),(0,o.jsx)("link",{rel:"canonical",href:"https://sparkbox.com".concat((0,n.usePathname)())},"canonical"),(0,o.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,o.jsx)("meta",{name:"twitter:site",content:"@hearsparkbox"})]}),(0,o.jsx)("div",{className:"cmp-work-header util-dark-gray-section",children:(0,o.jsxs)("div",{className:"obj-max-width",children:[(0,o.jsx)("header",{className:"util-grid-block",children:(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-two-thirds@md util-position-relative",children:[(0,o.jsx)("h1",{className:"cmp-work-header__title",children:a}),(0,o.jsx)("p",{className:"cmp-work-header__description",children:l})]})}),(0,o.jsx)("div",{className:"cmp-work-header__hero-image",children:(0,o.jsx)("img",{src:"/uploads/work/adobe/adobe-spectrum-hero.jpg",srcSet:"/uploads/work/adobe/[email protected]",alt:""})}),(0,o.jsxs)("div",{className:"cmp-work-header__meta util-grid-block",children:[(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Client"}),(0,o.jsx)("p",{children:"Adobe is a global software company whose products include Photoshop, Express, and Firefly. Internally, Adobe relies on Spectrum, their enterprise design system, to maintain consistent design and development standards across their suite of products."})]}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Solution"}),(0,o.jsx)("p",{children:"We partnered with Adobe's Spectrum design system team to drive the migration of components, unify fragmented documentation into a single Storybook, and raise the bar on development and code review standards."})]}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Scope"}),(0,o.jsxs)("ul",{className:"util-delist util-bullet-list",children:[(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Component migration"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Documentation consolidation"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Internationalization implementation"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"PR process improvement"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Refinement participation"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Cross-team collaboration"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Edge case discovery"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Storybook unification"})]})]}),(0,o.jsxs)("div",{className:"util-grid-cell-full util-grid-cell-half@sm util-grid-cell-quarter@lg",children:[(0,o.jsx)("h2",{className:"cmp-work-header__meta-heading",children:"Tech"}),(0,o.jsxs)("ul",{className:"util-delist util-bullet-list",children:[(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Design System"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"HTML/CSS"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Web Components"}),(0,o.jsx)("li",{className:"util-bullet-list-item",children:"Storybook"})]})]})]})]})}),(0,o.jsxs)("article",{className:"cmp-work-detail","aria-label":"Adobe Spectrum Design System Case Study",children:[(0,o.jsxs)("div",{className:"obj-max-width obj-max-width--article",children:[(0,o.jsx)("div",{className:"cmp-work-detail__vertical-margin",children:(0,o.jsx)("p",{className:"cmp-work-detail__intro util-three-quarter-width",children:"Sparkbox partnered with Adobe to supp

1ort 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."})}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"The Spectrum Challenge"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"The Embedded Approach"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]}),(0,o.jsxs)("div",{className:"cmp-work-detail__vertical-margin",children:[(0,o.jsx)("h2",{children:"Key Spectrum Accomplishments"}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."}

1),(0,o.jsx)("p",{className:"cmp-work-detail__content util-three-quarter-width",children:"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."})]})]}),(0,o.jsx)("div",{className:"cmp-work-detail__results",children:(0,o.jsxs)("div",{className:"obj-max-width",children:[(0,o.jsx)("h2",{className:"cmp-work-detail__results-heading subtitle",children:"Impact and Results"}),(0,o.jsx)("p",{className:"cmp-work-detail__results-content",children:"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."})]})})]})]})}},3649:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/success-stories/adobe-spectrum",function(){return i(6373)}])}},function(e){e.O(0,[774,888,179],function(){return e(e.s=3649)}),_N_E=e.O()}]);