Our existing gray system met Web Content Accessibility Guidelines (WCAG) contrast minimums, that inform the visual presentation of text against adjacent colors, but meeting those minimums wasn’t enough. Gray hues in Spectrum are used for backgrounds, borders, text, and icons. The complexities of programming color are many, and the enormity of Adobe’s product portfolio added its own challenges, but some of our discoveries and hurdles can benefit other teams working on color systems large and small.
#COLOR SPECTRUM UPDATE#
This update to Spectrum's colors was an opportunity to challenge and apply what I know, and to learn more within the context of an elaborate enterprise design system. Over my career I've continued to learn about color and contrast perception. The process ended with color updates to our design and engineering resources and documentation. After settling on a new system, we rewrote documentation and engineered colors as an adaptive color palette (a systematic approach in which we define the constraints informing color generation rather than create static swatches). The seven-month effort began with an in-house brand analysis to evaluate product color needs and align Spectrum colors with the Adobe brand. It’s a flexible, science-backed update that will help Adobe’s design teams make color decisions.
/full-color-wheel-depicted-with-color-pencils-154455881-572642bd3df78ced1fb80a19.jpg "color spectrum")
I'm the Spectrum designer who leads the work on our color system and last month, we released V ersion 6.0 of our colors. Part of its foundation is a color system based on visual perception and accessible design, but our colors hadn’t changed substantially since 2013: They were outdated and it was difficult for teams to make accessible and product-specific color choices. Adobe’s Spectrum design system is an ever-evolving set of guidelines, components, patterns, and principles that ensure a consistent experience across Adobe’s portfolio of more than 100 applications.
0 kommentar(er)
