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
.
![](/-/project/13083/uploads/e1e5c7dce6d00e0fbbe6927429eee5f7/Screen_Shot_2017-06-21_at_9.14.02_AM.png)
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.
![](/-/project/13083/uploads/10a624cbc1438efbd562dd70f3e33b19/navigation--blue.png)
![](/-/project/13083/uploads/7c96ca0b1bd551b8a383fb1a62a54ea7/navigation--purple.png)
We can increase the percentage of tint in order to make it less "moody".
The one above is 20%, this one is 35%
![](/-/project/13083/uploads/44988f87dbe9c0ca3c5dbf5c0f0d37f4/navigation--blue-35.png)
![](/-/project/13083/uploads/f82c86d73999de6f9e0567cfcb05272f/navigation--purple-35.png)
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.