New color palette modifications

[rcantin-w]

Cardigan Palette for reference

Integrating the new colour palette and having it live has brought up a few questions/comments that might mean we want to review some of the tones and hues. These are decisions that would benefit from having a designer look at it, with the help of a dev. Here are some of the issues we know about:

1. neutral.300 is our old cream, which is used throughout the website as a background colour. Sadly, the new accent.green is not accessible on it. Buttons on had to be changed to be neutral.700 instead of accent.green. This might occur elsewhere in different forms. neutral.300 seems just dark enough that a lot of darker greys don't work with it either (see second pair of screenshots). Do we want a paler neutral colour that works with more colours? We have a neutral.200 but it's very yellow and doesn't look great.

2. Stories get to pick from four colours as a theme. It used to be red, green, purple and teal. As red and green are used for validation purposes only moving forward, the new suggested tones are accent.salmon, accent.green, accent.purple and accent.blue. The thing is, white font on accent.salmon is not accessible, so the font has to be black. I think it looks jarring, but no other accent colour works with white. Are we happy with it? Do we want to tweak accent.salmon so it works with white while still complementing our core yellow? Or should we use another colour as a fourth option?

[alexwlchan]

A thought on the stories themes, from a non-designer: the black on salmon looks weird in that promo box, but I think it would look equally strange to have white-on-a-colour when it's in the regular list of articles (see mockup).

I wonder if what we need is a tweaking of the palette so that each accent colour has a dark/light variant that can be used with white or black.

[rcantin-w]

We already have a light version of all the accent colours that work with black, so one of my suggestions was to have the "base" version of turquoise and salmon slightly modified to work with white, but we need to do so in a way that still complements our core yellow. I think tuning the lightness down about 5% does it, but I'd rather leave it to people with an official eye for design 😄