Navigation - Color palette for new navigation
Description
The purple proposed for the new navigation is too bright and distracting.
Original description
I find the purple of the new nav too bright and distracting.In order to find a less intense color, took what @pedroms did here https://gitlab.com/gitlab-org/gitlab-ce/issues/31351. It takes the grey scale and changes it to a tinted grayscale, based on our brand colors. I did two examples, using $purple-500
and $blue-500
.
The result is more toned down than strictly using our identity colors, which I feel allows you to focus more on the content. It also makes buttons and other UI elements that use our brand colors to pop more on the page.
We can increase the percentage of tint in order to make it less "moody".
The one above is 20%, this one is 35%
Feel free to play with my sketch file if you have some ideas: https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/taurie/navigation
Proposal
Based on the previous comments and after a lot of exploration, making sure that the colors and the states are consistent, we've decided on a violet-blue color. The color's intensity was tweaked to balance prolonged use and vividness across both large areas and smaller hints of color. This work resulted in a color that is not far from our brand purple (as seen in https://about.gitlab.com/) but that tries to appeal to a wider range of people. Purple is not an easy color to get right, let alone make it appealing to “everyone”.
Normal | Hover and active states |
---|---|
The new color will be implemented as part of the work done on the issues linked from https://gitlab.com/gitlab-org/gitlab-ce/issues/32794, as soon as %9.4.