Creating an accessible color palette that provides consistency and unity with the brand

While my main role at Uberall was focused on feature design, I was also involved in design system work. In 2023 the company rebranded their marketing materials, and to update the product design, we needed to match our color palette to the new marketing palette. The marketing palette did not account for UI usage, for example the core new brand colors were not accessible, or provided enough shades and variations to fully support UI design. To develop this palette, I started with the new brand colors and then first created a spectrum palette, that had 10 shades for each core color. For each, I made sure they align in brightness levels and saturation. Each color set had a set number of colors that are WCAG AA compliant. Based on the spectrum palette, I then assigned colors to a UI palette for use with text, icons, backgrounds, and interactions. This palette only used accessible shades. I tested each color extensively by applying it to existing app designs and making sure they can be applied in different use cases and work well with each other. I ultimately created palettes for both light and dark mode. These were set up in figma as color variables for the whole team to use.