The keystone new brand colors featuring a pink and orange gradient needed to be translated for use on displays. Additionally, we would need a secondary palette including a grayscale ramp. One notable ask was to unify the web marketing palette with swatches in the product palette where possible.
Solution
Drawing from the product color palette, the primary link blue was adopted to connect the palettes in a meaningful way. The gray-scale palette uses that blue as a foundation which compliments the pink and orange tones beautifully while feeling fresh and contemporary.
As an initial step in creating the design system, it was important that the colors be as flexible in their potential usage as possible to allow for freedom in future design decisions. The entire color palette including the pink and orange were stress tested to learn their potential use cases and limitations as well as how they worked with each other. Colors that might be used for text, including the pink were modified to meet web standards for contrast and legibility on white, black and as many of the grays as possible. The grays in turn were designed to work in harmony with the rest of the palette.