Tint neutral palette based on brand

## Purpose

In the latest brand updates the brand palette includes neutrals that are slightly more cool (blue) in tone. The current Pajamas neutral palette is completely desaturated and feels more generic than it could. There have been previous efforts to explore introducing both a cool and warm set of neutrals to compliment the current ones, however it became clear that this would be to try and account for the current theme approach (warm neutrals with red theme for example), and add unnecessary complexity to an already minimally used feature.

Having a neutral palette that skews more towards the temperature of the brand palette will provide more continuity between digital properties and subtly allow us to infuse more of the brand into Pajamas and the product. Given our use of blue for primary actions and links, a more cool palette also helps elements to feel more harmonious. 

## Proposal

Update the neutral palette to align with the grays in the brand palette.

|  | **Palette** |
| ------ | ------ |
| Brand | ![image](/uploads/415a82d85c280e978fcf32218e192bd4/image.png) |
| Current neutral | ![image](/uploads/684166acb8815214fab2f7a34db1dafb/image.png) |
| Proposed neutral | ![image](/uploads/91da0369d725d7a0ebc47dfde33f86f0/image.png) |

**[![Figmacon.svg](/uploads/baf691a3cd8db4987642840392ab8c95/Figmacon.svg) View working file in Figma →](https://www.figma.com/file/tjSjgnxomkqPg8BEhPdNFJ/%231452-tine-neutral-palette-%40jeldergl?node-id=0%3A1)**

**[![Figmacon.svg](/uploads/baf691a3cd8db4987642840392ab8c95/Figmacon.svg) View UI kit branch in Figma →](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/branch/XRCIH8ZdaAbyBpkJzgxdKG/%F0%9F%93%99-Component-library)**

**[🎨 View palette in Huetone→](https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIDiAZABAORgVwC4CcIAbAZxABoQALbGM%2BAbVElgRCz0KIpAGMB7Iv3z0GIAMQAzAKwyZPKQAZJyxQoAmAIy1aFmyfv0KAnKbMKAHADZr1hVYeOF0mC5fOATNK8eFAFkUAgIUAZkUwsIUARkkYmJAAXQBfcmZoOEQOAmI0AUEeASERBDEpfQhJdQUYXhqYSQ1edSa4SnFDSV4QhQg-CBCIC0tjC1GqtoB2EImPCaG2qw8rKJtnEOko6XmJPxC-Dz9t8RCTjxCjuJgDxJS01kQAIUIwcb5BYVEJSW%2BfjSj1RTqbptdT-QHAiQQDwQKIQKw9aGw%2BGTPwTKITCAKCao9GYtp%2BaT7PyvcQEokkjyaDwWc4KSnU2ltdFREIeKI3BKUXD8MB0EogKJqSjSIUCxSijzinhhUUBUUi0VWKWUCbKkAWNXGTUim5AA)**

**Other thoughts…**

Yes, this is subjective and nuanced. When exploring navigation updates both in the product, and Pajamas, designers have noted that the current neutrals are just too flat. We have an opportunity to better align the recent brand work and the product, and this is a very subtle, but effective way to do so.

A cool neutral palette could also benefit dark UI and ironically (ignoring the terms) prevent it from feeling too cold or bland. [From this article](https://compilezero.medium.com/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129):

> …you could also use accented neutrals instead of a pure-grey palette, which I personally recommend using due to 2 main reasons,
> 
> _Pure greys are not found naturally, and so its a good option to have some tint on those neutrals to give it a more natural vibe._
> 
> _Tinted neutrals, could help give the UI an overall emphasized tone and emotion to look forward to._

**Resources**

- https://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/
- https://compilezero.medium.com/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
- https://graphicdesign.stackexchange.com/questions/119887/dark-ui-design-why-tint-the-dark-gray-colors-with-a-different-primary-color
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems

Story points: 2.0